<template>
    <div class="container">
        <div class="flex row row-1">
            <el-card v-for="(item, index) in opts.summary" :key="index">
                <div class="flex">
                    <div class="text">
                        <p class="label">{{ item.label }}</p>
                        <p class="value">{{ handleValue(item) }}</p>
                    </div>
                    <el-icon :name="item.icon" :size="54" />
                </div>
            </el-card>
        </div>
        <el-card class="row row-2" header="待处理事务">
            <ul>
                <li v-for="(item, index) in opts.order" :key="index" @click="handleRoute(item.route)">
                    <span class="label">
                        {{ item.label }}
                    </span>
                    <span class="value">
                        (
                        <span class="red">
                            {{ item.value }}
                        </span>
                        )
                    </span>
                </li>
            </ul>
        </el-card>
        <el-card class="row row-3" header="运营快捷入口">
            <ul>
                <li v-for="(item, index) in opts.teleport" :key="index" @click="handleRoute(item.route)">
                    <p class="value">
                        <el-icon :name="item.value" :size="54" />
                    </p>
                    <p class="label">
                        {{ item.label }}
                    </p>
                </li>
            </ul>
        </el-card>
        <div class="flex row row-4">
            <el-card header="商品总览">
                <ul>
                    <li v-for="(item, index) in opts.product" :key="index">
                        <p class="value red">
                            {{ item.value }}
                        </p>
                        <p class="label">
                            {{ item.label }}
                        </p>
                    </li>
                </ul>
            </el-card>
            <el-card header="用户总览">
                <ul>
                    <li v-for="(item, index) in opts.customer" :key="index">
                        <p class="value red">
                            {{ item.value }}
                        </p>
                        <p class="label">
                            {{ item.label }}
                        </p>
                    </li>
                </ul>
            </el-card>
        </div>
        <el-card class="row row-5" header="访客统计">
            <div class="flex">
                <div class="left">
                    <div class="text">
                        <p class="label">本周访客数量</p>
                        <p class="value">1000</p>
                        <p class="rate">
                            <span class="down">10%</span>
                            <span class="desc">同比上周</span>
                        </p>
                    </div>
                    <div class="text">
                        <p class="label">本月访客数量</p>
                        <p class="value">10000</p>
                        <p class="rate">
                            <span class="up">10%</span>
                            <span class="desc">同比上月</span>
                        </p>
                    </div>
                </div>
                <div class="right">
                    <div class="header flex">
                        <p class="title">近一周访客统计</p>
                        <date-range v-model="condition1" />
                    </div>
                    <div class="chart"></div>
                </div>
            </div>
        </el-card>
        <el-card class="row row-6" header="订单统计">
            <div class="flex">
                <div class="left">
                    <div class="text">
                        <p class="label">本周订单数量</p>
                        <p class="value">1000</p>
                        <p class="rate">
                            <span class="down">10%</span>
                            <span class="desc">同比上周</span>
                        </p>
                    </div>
                    <div class="text">
                        <p class="label">本月订单总数</p>
                        <p class="value">10000</p>
                        <p class="rate">
                            <span class="up">10%</span>
                            <span class="desc">同比上月</span>
                        </p>
                    </div>
                </div>
                <div class="right">
                    <div class="header flex">
                        <p class="title">近一周订单统计</p>
                        <date-range v-model="condition2" />
                    </div>
                    <div class="chart"></div>
                </div>
            </div>
        </el-card>
        <el-card class="row row-7" header="销售统计">
            <div class="flex">
                <div class="left">
                    <div class="text">
                        <p class="label">本周销售总额</p>
                        <p class="value">1000</p>
                        <p class="rate">
                            <span class="down">10%</span>
                            <span class="desc">同比上周</span>
                        </p>
                    </div>
                    <div class="text">
                        <p class="label">本月销售总额</p>
                        <p class="value">10000</p>
                        <p class="rate">
                            <span class="up">10%</span>
                            <span class="desc">同比上月</span>
                        </p>
                    </div>
                </div>
                <div class="right">
                    <div class="header flex">
                        <p class="title">近一周销售统计</p>
                        <date-range v-model="condition3" />
                    </div>
                    <div class="chart"></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
    import * as echarts from 'echarts';
    import DateRange from './dateRange.vue';
    const router = useRouter();
    const store = useStore();
    const opts = computed(() => store.state.home.opts);
    const condition1 = ref([]);
    watch(condition1, (value) => {
        store.dispatch('home/loadChartData1', {
            beginDate: value[0].split(' ')[0],
            endDate: value[1].split(' ')[0],
        });
    });
    const condition2 = ref([]);
    watch(condition2, (value) => {
        store.dispatch('home/loadChartData2', {
            beginDate: value[0].split(' ')[0],
            endDate: value[1].split(' ')[0],
        });
    });
    const condition3 = ref([]);
    watch(condition3, (value) => {
        store.dispatch('home/loadChartData3', {
            beginDate: value[0].split(' ')[0],
            endDate: value[1].split(' ')[0],
        });
    });
    const handleValue = (item) => {
        let res = new Number(item.value).toLocaleString();
        if (item.type === 'money') {
            res = '￥' + res;
        }
        return res;
    };

    const handleRoute = (route) => router.push(route);
    const handleChart = (selector, color, name, data) => {
        const chart = echarts.init(document.querySelector(selector));
        const option = {
            color: color,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.map((item) => item.label),
                },
            ],
            yAxis: [
                {
                    type: 'value',
                },
            ],
            series: [
                {
                    name,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 0,
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(128, 255, 165)',
                            },
                            {
                                offset: 1,
                                color: 'rgb(1, 191, 236)',
                            },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    data: data.map((item) => item.value),
                },
            ],
        };
        chart.setOption(option);
    };
    onActivated(async () => {
        await store.dispatch('home/load');
        handleChart('.row-5 .chart', '#80FFA5', '访客数量', unref(opts).chart[0].data);
        handleChart('.row-6 .chart', '#00DDFF', '订单数量', unref(opts).chart[1].data);
        handleChart('.row-7 .chart', '#37A2FF', '销售额', unref(opts).chart[2].data);
    });
</script>

<style lang="less" scoped>
    @big-font: 30px;
    .container {
        height: auto !important;
        .flex {
            display: flex;
        }
        .red {
            color: var(--el-color-danger);
        }
        .el-card {
            flex: 1;
            :deep(.el-card__header) {
                padding: @layout-space;
                font-weight: bolder;
            }
            :deep(.el-card__body) {
                padding: @layout-space;
            }
        }
        .row {
            & + .row {
                margin-top: @layout-space;
            }
            .el-card {
                & + .el-card {
                    margin-left: @layout-space;
                }
            }
            &-1 {
                .flex {
                    justify-content: space-around;
                    align-items: center;
                }
                .value {
                    font-size: calc(@big-font * 0.8);
                }
                .x-icon {
                    color: var(--el-color-success);
                }
            }
            &-2 {
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        width: 45%;
                        padding: @layout-space 3%;
                        margin: 0 2%;
                        border-bottom: 1px solid #eee;
                        cursor: pointer;
                        display: flex;
                        justify-content: space-between;
                        &:hover {
                            background: #eee;
                            color: var(--el-color-primary);
                        }
                    }
                }
            }
            &-3 {
                ul {
                    display: flex;
                    li {
                        flex: 1;
                        padding: @layout-space 3%;
                        margin: 0 2%;
                        cursor: pointer;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        &:hover {
                            background: #eee;
                            color: var(--el-color-primary);
                        }
                        .red {
                            color: var(--el-color-danger);
                        }
                    }
                }
            }
            &-4 {
                ul {
                    display: flex;
                    justify-content: space-evenly;
                    li {
                        flex: 1;
                        padding: @layout-space 3%;
                        margin: 0 2%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                }
                .value {
                    font-size: @big-font;
                }
            }
            &-5,
            &-6,
            &-7 {
                .left {
                    border-right: 1px solid #eee;
                    margin-right: @layout-space-super;
                    padding-right: @layout-space-super;
                    .text {
                        & + .text {
                            margin-top: @layout-space-super;
                        }
                        .label {
                            font-size: 14px;
                            color: @color-white3;
                        }
                        .desc {
                            font-size: 12px;
                            color: @color-white2;
                            margin-left: @layout-space;
                        }
                        .value {
                            font-size: @big-font;
                        }
                        .down {
                            color: var(--el-color-success);
                            &::before {
                                content: '▼';
                                font-size: 12px;
                                position: relative;
                                top: -4px;
                            }
                        }
                        .up {
                            color: var(--el-color-danger);
                            &::before {
                                content: '▲';
                                font-size: 12px;
                                position: relative;
                                top: -4px;
                            }
                        }
                    }
                }
                .right {
                    flex: 1;
                    .header {
                        margin-bottom: @layout-space;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .chart {
                        width: 100%;
                        height: 300px;
                        background: #eee;
                    }
                }
            }
        }
    }
</style>
