<template>
    <div class="d-container">
        <div class="sac-outter">
            <div class="sac-inner">
                <v-label-div title="分析设置">
                    <v-btn @click="goBack">返回专项分析</v-btn>
                </v-label-div>
                <div style="padding: 16px;display: flex">
                    <a-form-model layout="inline">
                        <a-form-model-item label="专项名称">
                            <a-input style="width: 472px" v-model="form.Name" placeholder="请输入名称"></a-input>
                        </a-form-model-item>
                    </a-form-model>
                    <div style="margin: 4px 16px 0 16px">
                        <span style="color: #fff;">分析方向：</span>
                        <v-tab-group :value="direction" :style="{ background: 'transparent' }" :btns="['品牌分析','车型分析']" @change="handlerType"></v-tab-group>
                    </div>
                    <a-form-model layout="inline">
                        <a-form-model-item label="选择日期">
                            <a-range-picker show-time v-model="selTime" :disabled-date="disabledDate" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" @ok="handlerChangeTime">
                                <a-icon slot="suffixIcon" type="calendar" />
                            </a-range-picker>
                        </a-form-model-item>
                    </a-form-model>
                </div>
            </div>
            <div class="sac-inner-d2">
                <v-label-div title="品牌列表">
                    <v-btn @click="reset">重选分析</v-btn>
                </v-label-div>
                <div class="brandChooseContent" v-if="form.Classify == 1">
                    <div class="brand-item" v-for="(item, index) in chosenBrandList" :key="index">
                        <span style="margin-left: 40px">{{item}}</span><a-icon @click="delBrand(index)" class="close-icon" type="close" />
                    </div>
                    <div class="brand-item" style="text-align: center;">
                        <a-icon @click="handlerAdd" style="cursor: pointer;font-size: 36px;margin-top: 20px" type="plus" />
                    </div>
                </div>
                <div class="brandChooseContent" v-if="form.Classify == 2">
                    <div class="brand-item" v-for="(item, index) in chosenSeriesList" :key="index">
                        <span style="margin-left: 40px">{{item}}</span><a-icon @click="delBrand(index)" class="close-icon" type="close" />
                    </div>
                    <div class="brand-item" style="text-align: center;">
                        <a-icon @click="handlerAdd" style="cursor: pointer;font-size: 36px;margin-top: 20px" type="plus" />
                    </div>
                </div>
            </div>
            <div class="beCpm-footer" @click="handlerConfirm">
                保存
            </div>
        </div>
        <iSpecialBrandChoose :list="chosenBrandList" :visible.sync="brandShow" @choose="brandChose" @change="handlerBrand"></iSpecialBrandChoose>
        <iSpecialSeriesChoose brand="奥迪" :list="chosenSeriesList" :visible.sync="seriesShow" @choose="seriesChose" @change="handlerSeries"></iSpecialSeriesChoose>
    </div>
</template>

<script>
import {setSchemeDataSpecial} from "@/api/SpecialAnalize";
import {getSchemeDataToBrandOrSeries} from "@/api/SpecialAnalize";
export default {
    name: 'sac',
    data() {
        return {
            token: '',
            form: {
                Guids: null,
                Name: '',
                Classify: 1, // 1品牌 2车型
                StartTime: '',
                EndTime: '',
                Types: 'SpecialV6',
            },
            chosenBrandList: [],
            chosenSeriesList: [],
            itemList: [], //已选数据
            selTime: [],
            direction: 0,
            //品牌车型选择框控制
            brandShow: false,
            seriesShow: false,
        }
    },
    created() {
        this.token = this.getToken;
        if(this.$route.query.sSpecialGuid) {
            this.form.Guids = this.$route.query.sSpecialGuid
            getSchemeDataToBrandOrSeries({token: this.token, sGuids: this.form.Guids}).then(res =>{
                this.form.Classify = res.data.classify;
                if(res.data.classify == 1) {
                    this.direction = 0;
                    this.chosenBrandList = (res.data.brand).split(',');
                } else {
                    this.direction = 1;
                    this.chosenSeriesList = (res.data.seriesname).split(',');
                }
            })
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        handlerType(value) {
            if(value == 0) {
                this.form.Classify = 1
            } else {
                this.form.Classify = 2
            }
        },
        handlerChangeTime(val) {
            this.form.StartTime = val[0];
            this.form.EndTime = val[1];
        },
        reset() {
            if(this.form.Classify == 1) {
                this.chosenBrandList = [];
            } else if(this.form.Classify == 2) {
                this.chosenSeriesList = [];
            }
        },
        handlerConfirm() {
            let obj = Object.assign(this.form, {AnalyzeWord: this.form.Classify == 1 ? this.chosenBrandList.join(','):this.chosenSeriesList.join(',')})
            let str = JSON.stringify(obj);
            let o = {
                token: this.token,
                DataJson: str
            }
            setSchemeDataSpecial(o).then(res => {
                if(res.msg) {
                    if(this.$route.query.sSpecialGuid) {
                        this.$message.success('修改成功');
                    } else {
                        this.$message.success('添加成功');
                    }
                    this.$router.push('/specialAnalize')
                }
            })
        },
        handlerAdd() {
            if(this.form.Classify == 1) {
                this.brandShow = true;
            } else {
                this.seriesShow = true;
            }
        },
        brandChose(value) {
            if(this.chosenBrandList.indexOf(value) == -1) {
                this.chosenBrandList.push(value)
            } else {
                let index = this.chosenBrandList.indexOf(value);
                this.chosenBrandList.splice(index, 1);
            }
        },
        handlerBrand(value) {
            // console.log(value); 已选择的回调数组
            this.brandShow = false;
        },
        seriesChose(value) {
            if(this.chosenSeriesList.indexOf(value) == -1) {
                this.chosenSeriesList.push(value)
            } else {
                let index = this.chosenSeriesList.indexOf(value);
                this.chosenSeriesList.splice(index, 1);
            }
        },
        handlerSeries(value) {
            this.seriesShow = false;
        },
        delBrand(index) {
            if(this.form.Classify == 1) {
                this.chosenBrandList.splice(index,1);
            } else if(this.form.Classify == 2) {
                this.chosenSeriesList.splice(index,1);
            }
        },
        disabledDate() {
            return false
        }
    }
}
</script>

<style lang="less">
.sac-outter {
    padding: 0px 16px 16px 16px;
}
.sac-inner {
    width: 100%;
    // height: 960px;
    border: 2px solid #0F2A4D;
    background: #010B19;
}
.sac-inner-d2 {
    width: 100%;
    // height: 960px;
    border: 2px solid #0F2A4D;
    background: #010B19;
    margin-top: 16px;
    .brandChooseContent {
        padding: 0 0 24px 24px;
        display: flex;
        flex-wrap: wrap;
        .brand-item {
            width: 286px;
            height: 80px;
            background: #1B4163;
            border-radius: 4px;
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 80px;
            margin-right: 24px;
            margin-top: 24px;
            text-align: center;
            .close-icon {
                position: relative;
                margin-top: 30px;
                margin-right: 24px;
                float: right;
                color: #3373CC;
                cursor: pointer;
            }
        }
    }
}
.beCpm-footer {
    position: relative;
    width: 354px;
    height: 64px;
    background-image: url("../../assets/images/login/img_dlan_nor.png");
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
    color: #63aecc;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 64px;
    margin-top: 16px;
}
</style>