<template>
    <div class="home">
        <div class="left">
            <div class="grid">
                <div class="grid-item">
                    <company-amount></company-amount>
                </div>
                <div class="grid-item">
                    <transaction></transaction>
                </div>
                <div class="grid-item">
                    <project></project>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center-data-item">
                <span>需求总数</span>
                <span class="val">{{ sndStat['需求总数'] || 0 }}</span>
            </div>
            <div class="center-data-item">
                <span>供应总数</span>
                <span class="val">{{ sndStat['供应总数'] || 0 }}</span>
            </div>
            <div class="center-data-item">
                <span>互动总数</span>
                <span class="val">{{ sndStat['互动总数'] || 0 }}</span>
            </div>

            <div class="search" @click="goSearch()">
                <img src="../assets/svgs/icon_sousuo.svg" alt="" />
                <span>搜索</span>
            </div>
        </div>
        <div class="chart-map">
            <map-chart type="项目分布" ref="mapChart" :valueInfo="valueInfo"></map-chart>
        </div>
        <div class="right">
            <div class="grid">
                <div class="grid-item">
                    <amount-by-city></amount-by-city>
                </div>
                <div class="grid-item">
                    <project-amount></project-amount>
                </div>
                <div class="grid-item">
                    <compare></compare>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import companyAmount from '../components/charts/companyAmount.vue';
import Transaction from '../components/charts/transaction.vue';
import Project from '../components/charts/project.vue';
import AmountByCity from '../components/charts/amountByCity.vue';
import ProjectAmount from '../components/charts/projectAmount.vue';
import Compare from '../components/charts/compare.vue';
import MapChart from '../components/mapChart.vue';
import menuOptions from '../mixins/menuOptions';

export default {
    components: { companyAmount, Transaction, Project, AmountByCity, ProjectAmount, Compare, MapChart },
    name: 'Home',
    mixins: [menuOptions],
    data() {
        return {
            valueInfo: {},
            sndStat: {},
        };
    },
    watch: {
        active() {
            this.changeChoose();
        },
        chooseMenu() {
            this.getData();
        },
    },
    mounted() {
        this.$http.get('/statDataCenter/sndStat').then((res) => {
            this.sndStat = res;
        });

        if (this.$route.query.menu) {
            let menu = this.$route.query.menu;

            let info = [...this.menus].find((item) => {
                return item.name === menu;
            });
            // if (info) {
            //     this.$store.commit('updateChooseMenu', 0);
            // }
        }

        this.$store.dispatch('getMenus').then(() => {
            this.$nextTick(() => {
                console.log(this.menus);
                console.log(this.chooseMenu);
            });
            this.getData();
        });
    },
    methods: {
        getData() {
            if (this.chooseMenu == 0) {
                this.$http
                    .get('/orgInfo/all', {
                        size: 99,
                    })
                    .then((res) => {
                        console.log(res);
                        this.valueInfo = res.content;

                        // this.valueInfo = {
                        //     labels: res.map((item) => {
                        //         return item.city;
                        //     }),
                        //     data: res.map((item) => {
                        //         return item.num;
                        //     }),
                        // };
                        // // this.valueInfo = res;
                        this.$refs.mapChart.init();
                    });
            } else {
                this.$http
                    .get('/statDataCenter/cityData', {
                        categoryId: this.menus[this.chooseMenu].id,
                    })
                    .then((res) => {
                        this.valueInfo = {
                            labels: res.map((item) => {
                                return item.city;
                            }),
                            data: res.map((item) => {
                                return item.num;
                            }),
                        };
                        // this.valueInfo = res;
                        this.$refs.mapChart.init();
                    });
            }
        },
        goSearch() {
            this.$router.push('/search');
        },
    },
};
</script>
<style lang="less" scoped>
.home {
    display: flex;
    .chart-map {
        flex-grow: 1;
    }
}
.left {
    position: absolute;
    top: 0;
    padding: 129px 30px 30px;
    bottom: 0;
    left: 0;
    z-index: 30;
    .grid {
        .grid-item {
            &:nth-child(2) {
                height: 40%;
            }
        }
    }
}
.grid {
    height: 100%;
    .grid-item {
        height: 30%;
        box-sizing: border-box;
        .card {
            width: 25vw;
            height: 100%;
            max-width: 410px;
        }
    }
    .grid-item + .grid-item {
        padding-top: 20px;
    }
}
.center {
    position: absolute;
    top: 0;
    left: 470px;
    right: 470px;
    height: 56px;
    padding: 118px 0;
    z-index: 30;
    .flex();

    .center-data-item {
        max-width: 210px;
        flex-grow: 1;
        .flex();
        align-items: flex-end;
        justify-content: center;
        background: rgba(60, 190, 242, 0.12);
        padding: 7px;

        font-size: 12px;
        font-weight: normal;
        color: #ffffff;
        line-height: 26px;
        white-space: nowrap;

        .val {
            font-size: 41px;
            line-height: 43px;
            margin-left: 6px;
        }
        cursor: default;
        &:hover {
            background: rgba(60, 190, 242, 0.4);
        }
        transition: background ease-in-out 0.3s;
    }

    div + div {
        margin-left: 10px;
    }

    .search {
        .flex();
        height: 56px;
        box-shadow: inset 0px 0px 23px 0px rgba(125, 212, 255, 0.29);
        border: 1px solid #3cbef2;
        flex-grow: 1;
        padding: 0 17px;
        margin-left: 30px;
        span {
            font-size: 18px;
            color: #3cbef2;
            line-height: 25px;
        }
        cursor: pointer;

        background: rgba(15, 36, 77, 0);
        transition: background ease-in-out 0.3s;

        &:hover {
            background: rgba(60, 190, 242, 0.12);
        }
    }
}
.right {
    position: absolute;
    top: 0;
    padding: 129px 30px 30px;
    bottom: 0;
    right: 0;
    z-index: 30;
    .grid {
        .grid-item {
            &:nth-child(3) {
                height: 40%;
            }
        }
    }
}
</style>
