<template>
    <img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
    <div class="user" id="user"></div>
    <div class="storeNum">
        <div class="tit"></div>
        <div class="townList" style="color: white;height: 14.4vh;">
            <div class="storebox" v-for="(item, index) in (storeData.length || [1, 1, 1, 1, 1, 1, 1, 1])" :key="index">
                <div class="store" :id="'store' + index"></div>
                <div class="toenName">
                    <div>{{ storeData[index]?.name }}</div>
                    <div>{{ storeData[index]?.num }}个</div>
                </div>
            </div>
        </div>
        <div style="color: white;display: flex; justify-content: center;
                    ">
            <div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>

        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, reactive, defineProps } from "vue"
import { getUserNumApi } from "@/api.js"



const props = defineProps({
    areaCodes: Object,
})


const getFiveDaysFn = () => {
    var today = new Date();
    var dateArray = new Array();

    for (var i = 0; i < 5; i++) {
        var date = new Date(today);
        date.setDate(today.getDate() - i);
        var month = date.getMonth() + 1;
        var day = Number(date.getDate());
        day = day >= 10 ? day : '0' + day
        var formattedDate = month + "." + day;
        dateArray.unshift(formattedDate);
    }

    return dateArray
}
// 图表
const initCharts = (tag, option) => {
    var chartDom = document.getElementById(tag);
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
}
// 平台用户总量统计option
let Option = {
    color: [
        new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 1, color: 'transparent' },
            { offset: 0, color: '#0081C3' },
        ])
        , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 1, color: 'transparent' },
            { offset: 0, color: '#3E54BF' },
        ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 1, color: 'transparent' },
            { offset: 0, color: '#4DBFD9' },
        ]),
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    // color: transparent;

    legend: {
        textStyle: {
            color: "white"
        }


    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: getFiveDaysFn()
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',//背景色为虚线,
                    color: '#256980'
                }
            }

        },

    ],
    series: [
        {
            name: '新增用户数量',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [],
            itemStyle: {
                borderWidth: 1,
                borderColor: "#384FB4",
            },


        },
        {
            name: '访问用户数量',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [],
            itemStyle: {
                borderWidth: 1,
                borderColor: "#3E54BF",
            },
        },
        {
            name: '累计用户数量',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [],
            itemStyle: {
                borderWidth: 1,
                borderColor: "#4EC1DB",
            },
        },

    ]
}

// 地方店铺数量统计option
let angle = 0;//角度，用来做简单的动画效果的

let getRange = (Num) => {
    return {
        backgroundColor: "#061740",
        title: {
            text: '{a|' + Num + '}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 10,
                        color: '#ffffff',
                        fontWeight: 'bold'
                    },
                    c: {
                        fontSize: 10,
                        color: '#ffffff',
                        fontWeight: 'normal'
                    }
                }
            }
        },
        series: [
            //内环
            {
                name: "",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
                            startAngle: (0 + -angle) * Math.PI / 180,
                            endAngle: (360 + -angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 0.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            //外环
            {
                name: '',
                type: 'pie',
                radius: ['85%', '70%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    normal: {
                        position: "center",
                    }
                },
                data: [
                    {
                        value: Num,
                        name: "",
                        itemStyle: {
                            normal: {
                                //外环发光
                                borderWidth: 0.5,
                                shadowBlur: 20,
                                borderColor: '#4bf3f9',
                                shadowColor: '#9bfeff',
                                color: { // 圆环的颜色
                                    colorStops: [{
                                        offset: 0,
                                        color: '#4bf3f9', // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#4bf3f9', // 100% 处的颜色
                                    }]
                                },
                            }
                        }
                    },
                    {
                        value: 100 - Num,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#173164"
                            }
                        }
                    }
                ]
            },
        ]
    }

}

const storeData = reactive([])
const initStoreOption = (pageData, total) => {
    storeData.splice(0, storeData.length);
    pageData.forEach(item => {
        let range = ((item.merchant_count / total).toFixed(2) * 100)
        storeData.push({
            name: item.street_name,
            num: item.merchant_count,
            option: getRange(range)
        })
    })
    storeData.forEach((item, index) => {
        initCharts(`store${index}`, item.option)
    })
}

let pageNum = ref(0)
let merchatCountList = []
let merchantTotalCount = []

getUserNumApi(
    props.areaCodes

).then(res => {
    merchatCountList = res.data.merchatCountList
    merchantTotalCount = res.data.merchantTotalCount
    let { userCountlist } = res.data
    userCountlist.forEach(item => {
        Option.series[0].data.push(item.newUserCount)
        Option.series[1].data.push(item.viewUserCount)
        Option.series[2].data.push(item.totalUserCount)
    });
    pageNum.value = Math.ceil(merchatCountList.length / 8)
    initCharts('user', Option)
    initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
})


const pageFN = (Num) => {

    switch (Num) {
        case 1:
            initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
            break;
        case 2:
            initStoreOption(merchatCountList.slice(8, 16), merchantTotalCount)
            break;
        case 3:
            initStoreOption(merchatCountList.slice(16, 24), merchantTotalCount)
            break;
        case 4:
            initStoreOption(merchatCountList.slice(24, 32), merchantTotalCount)
            break;
    }




}



</script>
<style lang="scss">
.user {
    box-sizing: border-box;
    padding-top: 5vh;
    width: 100%;
    height: 58%;

    .btn {
        color: white;
    }
}

.storeNum {
    width: 100%;
    height: 42%;
    box-sizing: border-box;
    overflow: hidden;

    .tit {
        height: 15%;
    }

    .townList {
        height: 5vh;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 10px;
        padding-bottom: 0;


        .storebox {
            width: 22%;
            height: 40%;
            position: relative;
            display: flex;
            margin-left: 10px;

            .store {
                flex: 1;
                height: 100%;

            }

            .toenName {
                flex: 1;
                height: 100%;
                background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
                border-radius: 0 15px 15px 0;
                font-size: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                color: white;
                box-sizing: border-box;
                padding: 7px 2px;

            }
        }
    }
}

.page-num {
    padding: 0 5px;
    margin-right: 5px;
    border: #2A538D 1px solid;
    cursor: pointer;
    position: relative;
    font-size: 12px;

}
</style>