<template>
    <view>
        <Tabs :tabList="tabList" @tabChange="tabChange" />

        <view class="smyddcSqmydzc">
            <ec-canvas id="smyddcSqmydzc" canvas-id="smyddcSqmydzc" :ec="ec"></ec-canvas>
        </view>
    </view>
</template>

<script>
import Tabs from '../../../../components/Tabs';
import ecCanvas from '../../../../ec-canvas/ec-canvas';
import * as echarts from '../../../../static/echarts.js';
import { satisfactionGroup, event12345Group } from '../../../../utils/statisticsApi';
var chart;
const formatTime = (date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return [year, month, day].map(formatNumber).join('-');
};
const formatNumber = (n) => {
    n = n.toString();
    return n[1] ? n : '0' + n;
};
export default {
    components: {
        Tabs,
        ecCanvas
    },
    data() {
        return {
            ec: {
                lazyLoad: true
                // onInit: initChart
            },

            tabList: [
                {
                    label: '按满意度调查/社区自查结果',
                    value: 1
                },
                {
                    label: '按12345热线投诉结果',
                    value: 2
                }
            ],
            tabValue: 1
        };
    },
    props: {
        typeCondition: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            this.getData();
        },

        tabChange({ detail }) {
            this.setData({
                tabValue: this.tabList[detail].value
            });
            this.getData();
        },

        getData() {
            this.zpSelectComponent('#smyddcSqmydzc').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });

                canvas.setChart(chart);
                let params = {
                    startTime: '',
                    endTime: ''
                };
                let now = new Date();
                if (this.typeCondition === 0) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1));
                }
                if (this.typeCondition === 1) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
                }
                if (this.typeCondition === 2) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
                }
                if (this.typeCondition === 3) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
                }
                if (this.typeCondition === 4) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
                }
                if (this.typeCondition === 1) {
                    params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59));
                } else {
                    params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59));
                }
                console.log(params);
                console.log(this.tabValue, 'this.data.tabValue');
                if (this.tabValue === 1) {
                    satisfactionGroup(params).then(({ data }) => {
                        var dataname = data.map((item) => item.name);
                        var datavaule = data.map((item) => (item.blueNum ? item.blueNum : 0));
                        var datavaule2 = data.map((item) => (item.yellowNum ? item.yellowNum : 0));
                        var indicator = [];
                        let max = Math.max(...datavaule, ...datavaule2);
                        console.log(max);
                        var datamax = new Array(datavaule.length).fill(max);
                        for (var i = 0; i < dataname.length; i++) {
                            indicator.push({
                                name: dataname[i],
                                max: datamax[i]
                            });
                        }
                        indicator[0].axisLabel = {
                            show: true
                        };
                        let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数'];
                        let series = [
                            {
                                name: '省满意度调查各项\n不满意人数',
                                type: 'radar',
                                symbol: 'circle',
                                symbolSize: 0,
                                areaStyle: {
                                    normal: {
                                        color: 'rgba(58,128,231,0.36)'
                                    }
                                },
                                axisLabel: {
                                    show: true
                                },
                                triggerEvent: true,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'transparent'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#527AA8'
                                    }
                                },
                                itemStyle: {
                                    color: '#3A80E7',
                                    borderColor: '#3AB7FF',
                                    borderWidth: 1
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#3AB7FF',
                                        width: 2
                                    }
                                },
                                data: [datavaule]
                            },
                            {
                                name: '社区满意度自查各项\n不满意人数',
                                type: 'radar',
                                symbol: 'circle',
                                symbolSize: 0,
                                areaStyle: {
                                    normal: {
                                        color: 'rgba(170, 216, 255, 0)'
                                    }
                                },
                                itemStyle: {
                                    color: '#EB8E16',
                                    borderColor: '#EF9700',
                                    borderWidth: 1
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#EF9700',
                                        width: 2
                                    }
                                },
                                data: [datavaule2]
                            }
                        ];
                        var option = {
                            tooltip: {
                                show: true,
                                trigger: 'item',
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14
                                },
                                formatter(params) {
                                    // console.log(params)
                                    if (params.name === '') {
                                        return '';
                                    }
                                    return `${params.name} : ${params.percent}%`;
                                }
                            },
                            legend: {
                                show: true,
                                textStyle: {
                                    color: '#999999',
                                    rich: {
                                        name: {
                                            fontSize: 14,
                                            lineHeight: 19,
                                            padding: [20, 0, 0, 0]
                                        }
                                    }
                                },
                                itemWidth: 6,
                                itemHeight: 6,
                                y: 'bottom',
                                x: 'center',
                                formatter: (name) => {
                                    return `{name|${name}}`;
                                },
                                data: legendName
                            },
                            radar: {
                                center: ['50%', '40%'],
                                radius: '50%',
                                startAngle: 90,
                                splitNumber: 5,
                                splitArea: {
                                    areaStyle: {
                                        color: 'transparent'
                                    }
                                },
                                name: {
                                    textStyle: {
                                        color: '#333333',
                                        fontSize: 14,
                                        borderRadius: 3
                                    }
                                },
                                indicator: indicator
                            },
                            axisLabel: {
                                show: true
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(226,226,226,0.28)'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(226,226,226,0.61)'
                                }
                            },
                            series
                        };
                        chart.setOption(option, true);
                    });
                } else {
                    event12345Group().then(({ data }) => {
                        var dataname = data.map((item) => item.name);
                        var datavaule = data.map((item) => (item.blueNum ? item.blueNum : 0));
                        var datavaule2 = data.map((item) => (item.yellowNum ? item.yellowNum : 0));
                        var indicator = [];
                        let max = Math.max(...datavaule, ...datavaule2);
                        console.log(max);
                        var datamax = new Array(datavaule.length).fill(max);
                        for (var i = 0; i < dataname.length; i++) {
                            indicator.push({
                                name: datavaule[i] + '\n' + dataname[i],
                                max: datamax[i]
                            });
                        }
                        let legendName = ['12345热线事件\n上报人数'];
                        let series = [
                            {
                                name: '12345热线事件\n上报人数',
                                type: 'radar',
                                symbol: 'circle',
                                symbolSize: 0,
                                areaStyle: {
                                    normal: {
                                        color: 'rgba(58,128,231,0.36)'
                                    }
                                },
                                itemStyle: {
                                    color: '#3A80E7',
                                    borderColor: '#3AB7FF',
                                    borderWidth: 1
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#3AB7FF',
                                        width: 2
                                    }
                                },
                                data: [datavaule]
                            }
                        ];
                        var option = {
                            tooltip: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                formatter(params) {
                                    // console.log(params)
                                    if (params.name === '') {
                                        return '';
                                    }
                                    return `${params.name} : ${params.percent}%`;
                                }
                            },
                            legend: {
                                show: true,
                                textStyle: {
                                    color: '#999999',
                                    rich: {
                                        name: {
                                            fontSize: 14,
                                            lineHeight: 19,
                                            padding: [20, 0, 0, 0]
                                        }
                                    }
                                },
                                itemWidth: 6,
                                itemHeight: 6,
                                y: 'bottom',
                                x: 'center',
                                formatter: (name) => {
                                    return `{name|${name}}`;
                                },
                                data: legendName
                            },
                            radar: {
                                center: ['50%', '40%'],
                                radius: '50%',
                                startAngle: 90,
                                splitNumber: 5,
                                splitArea: {
                                    areaStyle: {
                                        color: 'transparent'
                                    }
                                },
                                axisLabel: {
                                    show: false
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(226,226,226,0.28)'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(226,226,226,0.61)'
                                    }
                                },
                                name: {
                                    textStyle: {
                                        color: '#333333',
                                        fontSize: 14,
                                        borderRadius: 3
                                    }
                                },
                                indicator: indicator
                            },
                            series
                        };
                        chart.setOption(option, true);
                    });
                }
                return chart;
            });
        }
    },
    created: function () {},
    watch: {
        typeCondition: {
            handler: function (val) {
                console.log(val, 11);
                this.getData();
            },

            immediate: true
        }
    }
};
</script>
<style>
ec-canvas {
    width: 100%;
    height: 100%;
}
.smyddcSqmydzc {
    width: 100%;
    height: 558rpx;
}
</style>
