<template>
    <div class="zg-outter" v-loading="load">
        <v-label-div-light v-if="getIsLight" :title="time">
            <v-btn @click="historySale">查看历史销量</v-btn>
        </v-label-div-light>
        <v-label-div v-else :title="time">
            <v-btn @click="historySale">查看历史销量</v-btn>
        </v-label-div>
        <div class="zg-inner" v-if="getIsLight" style="background: #FFF">
            <v-echarts :opt="optLight"></v-echarts>
        </div>
        <div class="zg-inner" v-else>
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import {getCheZhuCountTime} from "@/api/SaleRank"
import createOpt from "./opt"
import createOptLight from "./optLight"
export default {
    name: 'zgCarSale',
    data() {
        return {
            form: {
                token: ''
            },
            time: '',
            opt: {},
            optLight: {},
            load: false
        }
    },
    created() {
        this.form.token = this.getToken;
        this.getData()
    },
    methods: {
        getData() {
            this.load = true
            let obj = Object.assign({},this.form)
            getCheZhuCountTime(obj).then(res => {
                let data = res.data;
                this.time = "中国汽车销量趋势图("+data.Time+')';
                let dx = [];
                let ds = [];
                data.Data.forEach(ele => {
                    dx.push(ele.Time);
                    ds.push(ele.value)
                })
               this.opt = createOpt(dx,ds);
               this.optLight = createOptLight(dx,ds);
               this.load = false
            })
        },
        historySale() {
            this.$router.push("/saleRank/history");
        }
    }
}
</script>

<style lang="less">
.zg-outter {
    width: 1552px;
    height: 460px;
    border: 2px solid #0f2a4d;
    .zg-inner {
        width: 100%;
        height: calc(100% - 48px);
    }
}
</style>