<template>
    <div class="chart-box">
        <div class="title-top">
            <span>每月店铺订单量日趋势</span>
            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
                <el-option v-for="item in options()" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="chart" :id="id"></div>
    </div>

</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Line01 extends Vue {
    id = this.randomString();
    dateValue = new Date().getFullYear();
    options() {
        let arr: Array<any> = []
        //从2010年到当前年
        for (let i = 2010; i <= new Date().getFullYear(); i++) {
            arr.push({
                value: i,
                label: i + '年'
            })
        }
        return arr
    }
    mounted() {
        this.getData()
    }

    randomString() {
        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 10; i > 0; --i)
            result += str[Math.floor(Math.random() * str.length)];
        return result;
    }
    dateChange() {
        this.getData()
    }
    initChart(list: Array<any>) {
        if (!list) return
        let chartDom: any = document.getElementById(this.id);
        let myChart = echarts.init(chartDom);
        let option: EChartsOption;
        let dataX: Array<any> = this.getDaysList()
        let dataY: Array<any> = []
        for (const item of list) {
            let obj: any = {
                name: item.sourceName,
                type: 'line',
                smooth: true,
                data: []
            }
            if (item) {
                for (const arr of dataX) {
                    let isAdd = false
                    //for (const item2 of item) {    
                    if (arr == this.dateValue + '-' + item.createTime) {
                        obj.data.push(item.total)
                        isAdd = true
                        //break
                    }
                    //}
                    if (!isAdd) {
                        obj.data.push(0)
                    }
                }
            }
            dataY.push(obj)
        }
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                show: true,
                top: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    // saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: dataY
        };

        option && myChart.setOption(option);
    }
    getDaysList() {
        //返回当前年的所有月份，如2025-01，2025-02，2025-03，2025-04，2025-05，2025-06，2025-07，2025-08，2025-09，2025-10，2025-11，2025-12
        let data: Array<any> = []
        for (let i = 1; i <= 12; i++) {
            data.push(this.dateValue + '-' + (i < 10 ? '0' + i : i))
        }
        return data
    }
    getData() {
        (this as any).$request({
            //url:'/omsOrder/report/shopDailyCount',
            url: '/omsOrder/orderReport/orderSourceByYear',
            params: {
                year: this.dateValue
            },
            method: 'GET',
        }).then((res: any) => {
            if (res.data) {
                this.initChart(res.data)
            }
        }).catch(() => { })
    }
}
</script>

<style lang="scss" scoped>
.chart-box {
    height: 100%;
    width: 100%;

    .title-top {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;

        >span {
            font-size: 16px;
            font-weight: 700;
        }
    }
}

.chart {
    height: calc(100% - 40px);
    width: 100%;
}
</style>
