<!--
 * @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="smc-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>
                </ul>
                <div style="margin: 0 0 0 16px">
                    <a-form-model layout="inline">
                        <a-form-model-item label="关键词">
                            <a-input v-model="form.sKeyword" style="width: 160px"></a-input>
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-button type="primary" @click="onSearch">搜索</a-button>
                        </a-form-model-item>
                    </a-form-model>
                </div>
                <div style="clear: both"></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="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
                                   <!-- <a-tooltip>
                                        <template slot="title">
                                            {{item.name}}
                                        </template> -->
                                        <div v-if="item.name.length > 11 && item.name.length <= 13" style="font-size: 15px">{{item.name}}</div>
                                        <div v-else-if="item.name.length > 13 && item.name.length <= 14 " style="font-size: 13px">{{item.name}}</div>
                                        <div v-else-if="item.name.length > 14 " style="font-size: 11px">{{item.name}}</div>
                                        <div v-else>{{item.name}}</div>
                                   <!-- </a-tooltip> -->
                                </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 { getUserBrand, getUserSeriesName } from "@/api/comm";
export default {
    name: "iSwitchModel",
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        brand: {
            type: String,
            default: ""
        },
        model: {
            type: String,
            default: ""
        }
    },
    watch: {
        visible: {
            handler(val) {
                this.show = val ? true : false;
            },
            immediate: true,
        },
    },
    created() {
        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: '',
                sType: 'Marketing'
            },
            letterArr: [
               
            ],
            cars: [],
            models: [],
            showCars: [],
            showActive: "",
            chooseBrand: null,
            chooseModel: null,
            modelName: "",
            brandname: ""
        };
    },
    methods: {
        // 关闭
        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);
        },
        // 获取品牌
        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;
            this.chooseBrand =  row;
            this.brandname = this.chooseBrand.brandname;
            this.getUserSeriesName(this.brandname)
        },
        // 选择车型
        handlerModel(n, row) {
             this.modelName = row.name;
             this.chooseModel = row;
        },
        // 确定车型
        handlerSubmit() {
            if(this.chooseBrand && this.chooseModel) {
                this.$emit("change", [this.chooseBrand, this.chooseModel]);
                this.handlerClose();
            } else {
                this.$message.warning('请选择车型');
            }   
        },
        // 获取车型
        getUserSeriesName(brandName) {
            if(!this.getToken) return;
             this.form.token = this.getToken;
             this.form.sBrandName = brandName;
             this.form.sKeyword = '';
             this.load = true;
            getUserSeriesName(this.form).then(res => {
                let data = res.data || [];
                this.models = data;
                this.load = false;
            })
        },
        onSearch() {
            this.load = true;
            getUserSeriesName(this.form).then(res => {
                let data = res.data || [];
                this.models = data;
                this.load = false;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.sb-body {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    justify-content: flex-start;
}
.smc-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: 90%;
        }
        .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: 90%;
        }
       
        .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>
