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

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

<script>
import Tabs from '../../../../components/Tabs';
import ecCanvas from '../../../../ec-canvas/ec-canvas';
import * as echarts from '../../../../ec-canvas/echarts';
import { commonDemandCountByCategory, countByCategory, 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: '共性需求',
                    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('#requirementAnalysis').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });

                canvas.setChart(chart);
                let params = {
                    monthTime: 12
                };
                if (this.tabValue === 1) {
                    countByCategory(params).then(({ data }) => {
                        data = data.map((item) => {
                            return {
                                name: item.categoryName,
                                value: item.cateTotal
                            };
                        });
                        let color = ['#4F94FF', '#A182FB', '#27D1A7', '#FCBF06', '#FF7108'];
                        var option = {
                            color,
                            tooltip: {
                                show: true,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 14
                                },
                                formatter(params) {
                                    // console.log(params)
                                    if (params.name === '') {
                                        return '';
                                    }
                                    return `${params.name} : ${params.percent}%`;
                                }
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    center: ['50%', '50%'],
                                    // 修改为居中
                                    avoidLabelOverlap: true,
                                    label: {
                                        color: '#333333',
                                        alignTo: 'labelLine',
                                        formatter: '{num|{c}}\n{name|{b}}',
                                        minMargin: 5,
                                        edgeDistance: 10,
                                        lineHeight: 15,
                                        rich: {
                                            num: {
                                                fontSize: 17,
                                                color: '#333333'
                                            },
                                            zb: {
                                                fontSize: 14,
                                                color: '#333333'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        length: 15,
                                        length2: 0,
                                        maxSurfaceAngle: 80
                                    },
                                    data: data
                                }
                            ]
                        };
                        chart.setOption(option);
                    });
                } else {
                    commonDemandCountByCategory(params).then(({ data }) => {
                        data = data.map((item) => {
                            return {
                                name: item.categoryName,
                                value: item.cateTotal
                            };
                        });
                        let color = ['#4F94FF', '#A182FB', '#27D1A7', '#FCBF06', '#FF7108'];
                        var option = {
                            color,
                            tooltip: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                formatter(params) {
                                    // console.log(params)
                                    if (params.name === '') {
                                        return '';
                                    }
                                    return `${params.name} : ${params.percent}%`;
                                }
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    center: ['50%', '50%'],
                                    // 修改为居中
                                    avoidLabelOverlap: true,
                                    label: {
                                        color: '#333333',
                                        alignTo: 'labelLine',
                                        formatter: '{num|{c}}\n{name|{b}}',
                                        minMargin: 5,
                                        edgeDistance: 10,
                                        lineHeight: 15,
                                        rich: {
                                            num: {
                                                fontSize: 17,
                                                color: '#333333'
                                            },
                                            zb: {
                                                fontSize: 14,
                                                color: '#333333'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        length: 15,
                                        length2: 0,
                                        maxSurfaceAngle: 80
                                    },
                                    data: data
                                }
                            ]
                        };
                        chart.setOption(option);
                    });
                }
                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%;
}
.requirementAnalysis {
    width: 100%;
    height: 318rpx;
}
</style>
