<!--
 * @Author: your name
 * @Date: 2021-10-15 09:16:31
 * @LastEditTime: 2021-11-21 14:58:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
-->
<template>
    <div class="sb-outter" v-if="show">
        <div class="sb-inner">
            <v-label-div title="车型切换">
                <span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
            </v-label-div>
            <div class="sb-d">
                <ul class="sb-ul">
                    <span class="liSn">按品牌拼音首字母查找:</span>
                    <li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
                    <li @click="selectAll">全选</li>
                </ul>
                <div class="sb-tabs">
                    <a-form-model layout="inline" style="margin-left: 16px">
                        <a-form-model-item label="数据筛选">
                            <a-select style="width: 154px" 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-opt-group v-for="(it,id) in countryList" :key="id*10" :label="it.value">
                                    <a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
                                        {{item.value}}
                                    </a-select-option>
                                </a-select-opt-group>
                            </a-select>
                            <a-select style="margin-left: 8px;width: 154px" 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="margin-left: 8px;width: 154px" 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="margin-left: 8px;width: 154px" 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-opt-group v-for="(it,id) in specList" :key="id*10" :label="it.value">
                                    <a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
                                        {{item.value}}
                                    </a-select-option>
                                </a-select-opt-group>
                            </a-select>
                            <a-select style="margin-left: 8px;width: 154px" 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="margin-left: 8px;width: 154px" 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="onSearch">查询</a-button>
                        </a-form-model-item>
                    </a-form-model>
                </div>
                <div style="margin: 0 0 0 16px">
                    <a-form-model layout="inline">
                        <a-form-model-item label="关键词">
                            <a-input v-model="searchForm.sKeyword" style="width: 167px"></a-input>
                        </a-form-model-item>
                    </a-form-model>
                </div>
                <div class="sb-body">
                    <div class="sb-dd">
                        <vue-scroll>
                            <div class="sb-bd">
                                <div class="s-item" :class="brandname === item.brandname ? 's-item-active': ''" v-for="(item,index) in showCars" :key="index" @click="handlerChoose(index,item)">
                                    <div class="d1">
                                        <img class="m1" :src="item.img">
                                    </div>
                                    <span class="s1">{{item.brandname}}</span>
                                </div>
                            </div>
                        </vue-scroll>
                    </div>
                    <div class="sb-dd-right">
                       <vue-scroll>
                           <div class="sb-bd" v-loading="load">
                               <div class="sb-b-item" :class="list.indexOf(item.seriesname) != -1 ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
                                   <div v-if="item.seriesname.length > 11 && item.seriesname.length <= 13" style="font-size: 15px">{{item.name}}</div>
                                   <div v-else-if="item.seriesname.length > 13 && item.seriesname.length <= 14" style="font-size: 13px">{{item.seriesname}}</div>
                                   <div v-else-if="item.seriesname.length > 14" style="font-size: 13px">{{item.seriesname}}</div>
                                   <div v-else>{{item.seriesname}}</div>
                                </div>    
                           </div>
                       </vue-scroll> 
                    </div>
                </div>
            </div>
            <div class="sb-footer" align="center">
                <img class="m1" src="../../assets/images/BrandInsight/btn-01.png" @click="handlerSubmit">
            </div>
        </div>
    </div>
</template>

<script>
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
import { getUserBrand, getSeriesNameByCategory } from "@/api/comm";
export default {
    name: "iSwitchModel",
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        brand: {
            type: String,
            default: ""
        },
        model: {
            type: String,
            default: ""
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    watch: {
        visible: {
            handler(val) {
                this.show = val ? true : false;
            },
            immediate: true,
        },
    },
    created() {
        this.searchForm.token = this.getToken;
        this.getApi();
        this.brandname = this.brand;
        this.modelName = this.model;
        this.getBrands().then(() => {
            this.handlerLi(0);
            let row = this.cars.find(ele => {
                return ele.brandname === this.brandname
            })
            this.chooseBrand = row;
        });
        this.getUserSeriesName(this.brandname);
    },
    data() {
        return {
            show: false,
            activeLi: 0,
            load: false,
            form: {
                token: "",
                sBrandName: "",
                sKeyword: '宝',
            },
            searchForm: {
                token: '',
                sBrand: '',
                sType: 'Series',
                sFirstword: '',
                sSpec: '',
                sPriceRangeS: '',
                sDisplacementS: '',
                sSeatS: '',
                sEnergyType: '',
                sCountryS: '',
                sKeyword: '',
            },
            letterArr: [
               
            ],
            cars: [],
            models: [],
            showCars: [],
            showActive: "",
            chooseBrand: null,
            chooseModel: null,
            modelName: "",
            brandname: "",
            // 筛选项
            countryList: [],
            energyList: [],
            priceList: [],
            specList: [],
            displacementList: [],
            seatList: [],
            // 中间数组
            countries: [],
            energies: [],
            prices: [],
            specs: [],
            seats: [],
            displacements: [],
        };
    },
    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
            });
        },
        // 关闭
        handlerClose() {
            this.show = false;
            this.$emit("update:visible", this.show);
        },
        // 选择li
        handlerLi(n) {
            this.activeLi = n;
            let key = this.letterArr[n];
            this.showCars = this.cars.filter((ele) => ele.firstword === key);
            // if(n != 0) {
            //     this.searchForm.sFirstword = key
            // } else {
            //     this.searchForm.sFirstword = ''
            // };
            // this.getUserSeriesName(this.brandname)
        },
        // 获取品牌
        getBrands() {
            if(!this.getToken) return;
            this.form.token = this.getToken;
            return new Promise((resolve, reject) => {
                getUserBrand(this.form)
                    .then((res) => {
                        let data = res.data;
                         let arr = [];
                        data.forEach((ele) => {
                            let fk = ele.firstword;
                            arr.push(fk);
                        });
                        let sarr = new Set(arr);
                        let arr1 = Array.from(sarr);
                        this.letterArr = this.todo(arr1, '热门');
                        this.cars = data;
                        resolve(true);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
         todo(arr, id) {
            let index = 1,
                newArr = [],
                length = arr.length;
            for (let i = 0; i < length; i++) {
                if (arr[i] === id) {
                    newArr[0] = arr[i];
                } else {
                    newArr[index++] = arr[i];
                }
            }
            return newArr;
        },
        // 选择品牌
        handlerChoose(n, row) {
            this.showActive = row.brandid;
            if(row.brandname == this.brandname) { //反选
                this.brandname = "";
            } else {
                this.brandname = row.brandname;
            }
            this.getUserSeriesName(this.brandname)
        },
        // 选择车型
        handlerModel(n, row) {
            this.$emit("choose", row.seriesname);
        },
        // 确定车型
        handlerSubmit() {
            this.$emit("change", this.list);
        },
        // 获取车型
        getUserSeriesName(brandName) {
            this.load = true;
            this.searchForm.sBrand = brandName;
            this.searchForm.sSpec = this.specs.join(',');
            this.searchForm.sPriceRangeS = this.prices.join(',');
            this.searchForm.sDisplacementS = this.displacements.join(',');
            this.searchForm.sSeatS = this.seats.join(',');
            this.searchForm.sEnergyType = this.energies.join(',');
            this.searchForm.sCountryS = this.countries.join(',');
            getSeriesNameByCategory(this.searchForm).then(res => {
                let data = res.data || [];
                this.models = data;
                this.load = false;
            })
        },
        onSearch() {
            this.getUserSeriesName(this.brandname)
        },
        selectAll() {
            let arr = [];
            this.models.forEach(ele => {
                arr.push(ele.seriesname)
            })
            this.$emit("selectAll", arr);
        }
    },
};
</script>

<style lang="less" scoped>
.sb-body {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    justify-content: flex-start;
}
.sb-tabs {
    display: flex;
    justify-content: flex-start;
}
.sb-outter {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.45);
    overflow: auto;
    .sb-inner {
        position: absolute;
        width: 1230px;
        height: 720px;
        top: 0px;
        left: 50%;
        border-radius: 2px;
        transform: translate(-50%, 90px);
        background: #0c2342;
        min-width: 400px;
        min-height: 300px;
        .sb-d {
            width: 100%;
            height: calc(100% - 128px);
            overflow: hidden;
        }
        .sb-ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
            margin-left: 16px;
            margin-top: 10px;
            height: 30px;

            .liSn {
                float: left;
                color: #fff;
                font-size: 16px;
                margin-right: 24px;
            }
            li {
                float: left;
                color: #fff;
                font-size: 16px;
                margin-right: 24px;
                cursor: pointer;
                &:hover {
                    color: #3373cc;
                }
            }
            .lactive {
                color: #3373cc;
            }
        }
        .sb-dd {
            width: 31%;
            height: 95%;
            box-shadow: 0 0 20px;
        }
        .sb-bd {
            padding: 0px 16px 16px 8px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .s-item {
                cursor: pointer;
                margin-left: 16px;
                margin-top: 16px;
                transition: all 0.3s;
                border: 1px solid transparent;
                &:hover {
                    border: 1px solid #3373cc;
                }
                .d1 {
                    // width: 152px;
                    // height: 132px;
                    width: 100px;
                    height: 87px;
                    background: #fff;
                    border-radius: 2px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .m1 {
                    width: 90px;
                }
                .s1 {
                    display: block;
                    text-align: center;
                    font-size: 14px;
                    width: 100px;
                    overflow: hidden;
                    color: #fff;
                }
            }
            .s-item-active {
                border: 1px solid #3373cc;
            }
            .sb-b-item {
                width: 190px;
                height: 66px;
                background: #1B4163;
                color: #fff;
                border-radius: 2px;
                font-size: 20px;
                text-align: center;
                line-height: 66px;
                margin-left: 16px;
                margin-top: 16px;
                transition: all 0.3s;
                white-space:nowrap;
                cursor: pointer;
                &:hover {
                    background: #3373CC;
                    color: #fff;
                }
            }
            .sb-b-item-active {
                background: #3373CC;
                color: #fff;
            }
        }
        .sb-dd-right {
            width: 69%;
            height: 95%;
            box-shadow: 0 0 20px;
        }
       
        .sb-footer {
            position: absolute;
            width: 100%;
            height: 80px;
            bottom: 0px;
            left: 0px;
            border-top: 1px solid #1e3d64;
            .m1 {
                width: 480px;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    
}
</style>
