<template>
    <card icon="shuju_icon_qiyeshuliang" title="企业数量趋势图">
        <template #top-right>
            <el-radio-group v-model="type" size="mini" @change="getData">
                <el-radio-button label="year"> 年度 </el-radio-button>
                <el-radio-button label="month"> 月度 </el-radio-button>
            </el-radio-group>
        </template>

        <div class="chart" ref="chart"></div>
    </card>
</template>

<script>
import card from '../card.vue';
import * as echarts from 'echarts';
import chartOptions from '../../mixins/chartOptions';
import dayjs from 'dayjs';

export default {
    name: 'Project',
    components: { card },
    mixins: [chartOptions],
    mounted() {
        this.$nextTick(() => {
            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
            this.initChat(this.myChart);
            this.getData();
        });
    },
    data() {
        return {
            type: 'month',
        };
    },
    methods: {
        getData() {
            this.$http
                .get('/statDataCenter/orgNumStat', {
                    type: this.type,
                })
                .then((res) => {
                    let labels = res.labels;

                    if (this.type === 'month') {
                        labels = labels.map((item) => {
                            let day = '';
                            if (Number(item) > new Date().getMonth()) {
                                day = dayjs().add(-1, 'years').format('YY') + '.' + dayjs(item, 'M').format('MM');
                            } else {
                                day = dayjs().format('YY') + '.' + dayjs(item, 'M').format('MM');
                            }

                            return day;
                        });
                    }

                    this.myChart.setOption({
                        tooltip: {
                            formatter: () => {
                                return '';
                            },
                        },
                        xAxis: {
                            data: labels,
                        },
                        series: [
                            {
                                name: '企业数量',
                                data: res.data,
                                type: 'line',
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#4DACFF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(77, 172, 255, 0)',
                                            },
                                        ],
                                        global: false,
                                    },
                                },
                                label: {
                                    show: false,
                                    formatter: '{b}\r\n{c}',
                                    backgroundColor: this.$colors.prim,
                                    color: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 4,
                                    textStyle: {
                                        lineHeight: 16,
                                    },
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                    },
                                },
                                labelLayout: this.labelLayout,
                            },
                        ],
                    });
                });
        },
    },
};
</script>

<style lang="less" scoped>
.chart {
    width: 100%;
    height: 100%;
    flex-grow: 1;
}
</style>
