<template>
    <div class="tp20-outter" :style="getIsLight?{background: '#FFF'}:{}">
        <v-label-div v-if="!getIsLight" :title="tValue==0?'品牌销量排行榜TOP20':'车型销量排行榜TOP20'">
            <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
            <a-button type="primary" @click="report">导出报告</a-button>
        </v-label-div>
        <v-label-div-light v-else :title="tValue==0?'品牌销量排行榜TOP20':'车型销量排行榜TOP20'" class="lightSy">
            <v-tab-group-light :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group-light>
            <a-button type="primary" @click="report">导出报告</a-button>
        </v-label-div-light>
        <div class="d2">
            <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
                <a-form-model-item label="选择日期">
                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
                    <a-month-picker style="width: 146px;margin-left: 16px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div v-if="getIsLight" class="d3">
            <v-echarts :opt="opt2"></v-echarts>
        </div>
        <div v-else class="d3">
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import {getSalesBrandTop20, getSalesCarseriesTop20} from "@/api/SaleRankMarket";
import createOpt from './opt'
import createOptLight from './optLight'
export default {
    name: 'totalTop20',
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
            },
            tValue: 0, //0品牌 1车型
            btnTimes: ['品牌','车型'],
            selTime: ['',''],
            opt: {},
            opt2: {},
        }
    },
    created() {
        this.form.token = this.getToken;
        let date = this.getLatestTime;
        var dt = new Date(date);
        var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
        this.selTime = [newDt.slice(0,7), date];
        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);
                    this.opt2 = createOptLight(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);
                    this.opt2 = createOptLight(dx, ds);
                })
            }
        },
        handlerType(index) {
            this.tValue = index;
            this.getData();
        },
        report() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
                isExcel: 1,
            };
            let authBtns = this.getLevelBtn;
            for(let i=0;i<authBtns.length;i++) {
                if(authBtns[i].Id == '815') {
                    if(this.tValue == 0) {
                        getSalesBrandTop20(obj).then(res => {
                            let data = res.data;
                            window.open(data);
                        })
                    } else {
                        getSalesCarseriesTop20(obj).then(res => {
                            let data = res.data;
                            window.open(data);
                        })
                    }
                    return true;
                };
            };
            this.$message.error('权限不足')
        }
    }
}
</script>

<style lang="less">
.tp20-outter {
    width: 1552px;
    height: 768px;
    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>