<template>
    <div class="mcomp-outter" :style="getIsLight?{background: '#FFF'}:{}">
        <v-label-div v-if="!getIsLight" title="全车型竞争关系图谱"></v-label-div>
        <v-label-div-light v-else title="全车型竞争关系图谱"></v-label-div-light>
        <div class="d2">
            <a-form-model layout="inline">
                <a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选">
                    <a-select style="width: 200px" mode="multiple" v-model="countries" placeholder="选择国别" allowClear>
                        <a-select-option v-for="(item) in countryList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-select style="width: 200px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
                        <a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-select style="width: 200px" mode="multiple" v-model="prices" placeholder="选择价格" allowClear>
                        <a-select-option v-for="(item) in priceList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-select style="width: 200px" mode="multiple" v-model="specs" placeholder="选择级别" allowClear>
                        <a-select-option v-for="(item) in specList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-select style="width: 200px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
                        <a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-select style="width: 200px" mode="multiple" v-model="seats" placeholder="选择座位数" allowClear>
                        <a-select-option v-for="(item) in seatList" :value="item.key" :key="item.value">
                            {{item.value}}
                        </a-select-option>
                    </a-select>
                    <a-button type="primary" style="margin-left: 16px" @click="getData">查询</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="d2">
            <a-form-model :class="getIsLight?'lightSy':'dark'" 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="d2">
            <div :class="getIsLight?'lightSy':'dark'">
                <span v-for="(item, index) in seriesList" :key="index">
                    <a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button>
                </span>
                <a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries">本品车型</a-button>
            </div>
        </div>
        <iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
        <div class="d3" v-if="getIsLight">
            <v-echarts :opt="opt2"></v-echarts>
        </div>
        <div class="d3" v-else>
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
import createOpt from "./opt"
import createOptLight from "./optLight"
import {getCheZhuLatestTime} from "@/api/SaleRank"
export default {
    name: 'CitySale',
    data() {
        return {
            form: {
                token: '',
                sCountryS: '',
                sEnergyS: '',
                sPriceRangeS: '',
                sDisplacementS: '',
                sSerieName: '', //
                sSeatS: '', 
                sSpecName1: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime:'',
            },
            //中间数组
            countries: [],
            energies: [],
            prices: [],
            specs: [],
            specs2: [],
            series: [], //
            displacements: [],
            seats: [],
            selTime: ['',''],
            seriesList: [],
            //选项数据
            countryList: [],
            energyList: [],
            priceList: [],
            specList: [],
            displacementList: [],
            seatList: [],
            //chart数据
            opt: {},
            opt2: {},
            totalData: [],
            extraData: [],
            //车型选择框
            modelShow: false,
            brand: '奥迪',
            model: '',
        }
    },
    created() {
        this.form.token = this.getToken;
        this.getApi();
    },
    methods: {
        getApi() {
            getCountryS({token: this.getToken}).then(res => {
                this.countryList = res.data
            });
            getEnergyS({token: this.getToken}).then(res => {
                this.energyList = res.data
            });
            getPriceRangeS({token: this.getToken}).then(res => {
                this.priceList = res.data
            });
            getSpecName1({token: this.getToken}).then(res => {
                this.specList = res.data
            });
            getDisplacementS({token: this.getToken}).then(res => {
                this.displacementList = res.data
            });
            getSeatS({token: this.getToken}).then(res => {
                this.seatList = res.data
            });
            getCheZhuLatestTime({token: this.form.token}).then(res => {
                this.selTime = [res.data, res.data];
                this.getData()
            })
        },
        getData() {
            let obj = {
                token: this.form.token,
                sCountryS: this.countries.join(','),
                sEnergyS: this.energies.join(','),
                sPriceRangeS: this.prices.join(','),
                sDisplacementS: this.displacements.join(','),
                sSeatS: this.seats.join(','),
                sSerieName: this.seriesList.join(','),
                sSpecName1: this.specs.join(','),
                sSpecName2: this.specs2.join(','),
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
            }
            getSalesCompetitionList(obj).then(res => {
                let data = res.data;
                // [ [车长，售价，销量，车名，'total'],[] ]
                let arr = [];
                data.forEach(ele => {
                    if(ele.CheChang * 1 != 0) {
                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total'];
                        // let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total'];
                        arr.push(item);
                    }
                });
                this.totalData = arr;
                this.opt = createOpt(this.totalData, this.extraData);
                this.opt2 = createOptLight(this.totalData, this.extraData)
            })
        },
        //添加车型
        hanlderAddSeries() {
            this.modelShow = true;
        },
        handlerBrand(val) {
            if(val) { this.seriesList.push(val[1].name) };
            let obj = {
                token: this.form.token,
                sSeriesName: this.seriesList.join(','),
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
            };
            getSalesCompetitionAnalysis(obj).then(res => {
                let data = res.data;
                let extraArr = [];
                // [ [车长，售价，销量，车名，'extra'],[] ]
                data.forEach(ele => {
                    let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
                    extraArr.push(item);
                });
                this.extraData = extraArr;
                this.opt = createOpt(this.totalData, this.extraData);
                this.opt2 = createOptLight(this.totalData, this.extraData)
            })
            this.modelShow = false;
        },
        //删除车型
        onDelete(index) {
            this.seriesList.splice(index,1);
            if(this.seriesList.length == 0) {
                this.extraData = [];
                this.opt = createOpt(this.totalData, this.extraData);
                this.opt2 = createOptLight(this.totalData, this.extraData)
            } else {
                let obj = {
                    token: this.form.token,
                    sSeriesName: this.seriesList.join(','),
                    sTimeType: 4,
                    sStartTime: this.selTime[0],
                    sEndTime: this.selTime[1],
                };
                getSalesCompetitionAnalysis(obj).then(res => {
                    let data = res.data;
                    let extraArr = [];
                    // [ [车长，售价，销量，车名，'extra'],[] ]
                    data.forEach(ele => {
                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
                        extraArr.push(item);
                    });
                    this.extraData = extraArr;
                    this.opt = createOpt(this.totalData, this.extraData);
                    this.opt2 = createOptLight(this.totalData, this.extraData)
                })
            }
        },
    }
}
</script>

<style lang="less">
.mcomp-outter {
    width: 1552px;
    // height: 460px;
    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: 1060px;
    }
}
</style>