<template>
    <div class="tp20-outter">
        <v-label-div title="品牌销量排行榜TOP20">
            <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
        </v-label-div>
        <div class="d2">
            <a-form-model layout="inline">
                <a-form-model-item label="选择日期">
                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="d3">
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import {getSalesBrandTop20, getSalesCarseriesTop20} from "@/api/SaleRankMarket";
import {getCheZhuLatestTime} from "@/api/SaleRank"
import createOpt from './opt'
export default {
    name: 'totalTop20',
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
            },
            tValue: 0, //0品牌 1车型
            btnTimes: ['品牌','车型'],
            selTime: ['',''],
            opt: {},
        }
    },
    created() {
        this.form.token = this.getToken;
        getCheZhuLatestTime({token: this.form.token}).then(res => {
            var dt = new Date(res.data)
            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
            this.selTime = [newDt.slice(0,7), res.data];
            this.getData()
        })
    },
    methods: {
        getData() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
            }
            if(this.tValue == 0) {
                getSalesBrandTop20(obj).then(res => {
                    let data = res.data
                    let dx = [];
                    let ds = [];
                    data.forEach((ele) => {
                        let key = ele.Time;
                        let value = ele.Data;
                        dx.push(key);
                        ds.push(value);
                    });
                    this.opt = createOpt(dx, ds);
                })
            } else {
                getSalesCarseriesTop20(obj).then(res => {
                    let data = res.data
                    let dx = [];
                    let ds = [];
                    data.forEach((ele) => {
                        let key = ele.Time;
                        let value = ele.Data;
                        dx.push(key);
                        ds.push(value);
                    });
                    this.opt = createOpt(dx, ds);
                })
            }
        },
        handlerType(index) {
            this.tValue = index;
            this.getData();
        },
    }
}
</script>

<style lang="less">
.tp20-outter {
    width: 1552px;
    height: 965px;
    border: 2px solid #0f2a4d;
    .d2 {
        display: flex;
        justify-content: flex-start;
        padding: 8px 16px 0px 16px;
    }
    .d3 {
        // padding: 0px 16px 16px 16px;
        width: 100%;
        height: calc(100% - 112px);
    }
}
</style>