<template src="./label.html">

</template>

<script>
import util from "../../utils/util";
import {loginService} from '@/services'
import { Toast } from "mint-ui";
    export default {
         data() {
            var serverUrl="http://skyforest.static.elab-plus.com/";
            return {
                serverUrl:serverUrl,
                labelText1:'请选择投放标签',
                labelText2:'',
                desc:'3-5个为佳，我们会为您推荐最匹配的模板',
                tagList:[],
                arr:[],
                arr1:[],
                arr2:[],
                labelList:[
                    `${serverUrl}btn01.png`,
                    `${serverUrl}btn02.png`,
                    `${serverUrl}btn03.png`,
                    `${serverUrl}btn04.png`,
                    `${serverUrl}btn05.png`,
                    `${serverUrl}btn06.png`,
                    `${serverUrl}btn07.png`,
                    `${serverUrl}btn08.png`,
                    `${serverUrl}btn09.png`,
                    `${serverUrl}btn10.png`,
                    `${serverUrl}btn11.png`,
                    `${serverUrl}btn12.png`,
                    `${serverUrl}btn13.png`,
                    `${serverUrl}btn14.png`,
                    `${serverUrl}btn15.png`,
                    `${serverUrl}btn16.png`,
                    `${serverUrl}btn17.png`,
                    `${serverUrl}btn18.png`,
                    `${serverUrl}btn19.png`,
                    `${serverUrl}btn20.png`,
                    `${serverUrl}btn21.png`,
                    `${serverUrl}btn22.png`,
                    `${serverUrl}btn23.png`,
                    `${serverUrl}btn24.png`,
                    `${serverUrl}btn25.png`,
                    `${serverUrl}btn26.png`,
                    `${serverUrl}btn27.png`,
                    `${serverUrl}btn28.png`,
                    `${serverUrl}btn29.png`,
                    `${serverUrl}btn30.png`,
                    `${serverUrl}btn31.png`,
                    `${serverUrl}btn32.png`,
                    `${serverUrl}btn33.png`,
                    `${serverUrl}btn34.png`,
                    `${serverUrl}btn35.png`,
                    `${serverUrl}btn36.png`,
                    `${serverUrl}btn37.png`,
                    `${serverUrl}btn38.png`,
                    `${serverUrl}btn39.png`,
                    `${serverUrl}btn40.png`,
                    `${serverUrl}btn41.png`,
                    `${serverUrl}btn42.png`,
                    `${serverUrl}btn43.png`,
                    `${serverUrl}btn44.png`,
                    `${serverUrl}btn45.png`,
                    `${serverUrl}btn46.png`,
                    `${serverUrl}btn47.png`,
                    `${serverUrl}btn48.png`,
                    `${serverUrl}btn49.png`,
                    `${serverUrl}btn50.png`,
                    
                ],
                nameList:[
                    '70后','80后','90后','本地客','别墅','产品','单身贵族','地段','顶豪','改善','豪宅','环境','回报','居者','两口之家','配套','亲子家庭','三代同堂','商住','投资','文化','异地客','园林','住宅','自住'],
                countArr:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,]
            }
        },
        mounted() {
            // this.$nextTick(function() {
			//     this.label();
            // });
            // localStorage.removeItem("_url1");
            // localStorage.removeItem("_url2");
            // localStorage.removeItem("_url3");
            // localStorage.removeItem("_list");
            localStorage.removeItem("_tagList");
        },
        watch:{

        },
        methods: {
            clickLabel(index){
                if(index%2 == 0){
                    this.$set(this.countArr, index+1, true);
                    $(".labelBox img").eq(index+1).css("display","block");
                    let ele=index/2;
                    $('.labelText').css('color','#5FA1FC')
                    if(this.arr.length<5){
                        this.arr.push(this.nameList[ele]);
                        if(this.arr.length>3){
                            $('.labelText2').css('display','block');
                            $('.labelText').css('font-size','36px')
                            this.arr2=this.arr.slice(3,5)
                            this.labelText2=this.arr2.join('•');
                            // console.log(this.labelText2.length)
                        }
                        if(this.arr.length<=3){
                            this.arr1=this.arr.slice(0,3)
                            this.labelText1=this.arr1.join('•');
                            // console.log(this.labelText1.length)
                        }
                    }else{
                       Toast('选择1-5个标签即可');
                    }
                    // this.labelText1=this.arr.join('•');
                    // console.log(this.labelText1.length)
                    if(this.labelText1.length>12){
                         $('.labelText').css('font-size','36px')
                    }
                    this.desc='';
                    var isSelect = 0;
                    this.countArr.forEach(function(element) {
                        if (element) {
                            isSelect++;
                            if (isSelect > 5) {
                                // console.log(isSelect);
                                this.$set(this.countArr, index+1, false);
                                $(".labelBox img").eq(index).css("display","block");
                                $(".labelBox img").eq(index+1).css("display","none");
                                Toast('选择1-5个标签即可');
                               
                            }
                            if(isSelect > 0){
                                $(".now_enter .text").css("display","block");
                            }
                        }
                    }, this);
                }else{
                    this.$set(this.countArr, index, false);
                    $(".labelBox img").eq(index).css("display","none");
                    let ele = (index-1)/2;
                    // console.log(ele);
                    var a=this.nameList[ele]
                    // console.log(a);
                    for(let i in this.arr){
                        if(this.arr[i]==a){
                            // console.log(this.arr[i]);
                            // console.log(i);
                            this.arr.splice(i,1);
                            // console.log(this.arr);
                            if(this.arr.length>3){
                                $('.labelText2').css('display','block');
                                $('.labelText').css('font-size','36px')
                                this.arr2=this.arr.slice(3,5)
                                this.labelText2=this.arr2.join('•');
                            }
                            if(this.arr.length<=3){
                                this.arr1=this.arr.slice(0,3)
                                this.labelText1=this.arr1.join('•');
                                 $('.labelText2').css('display','none');
                            }
                            // this.labelText1=this.arr.join('•');
                            // console.log(this.labelText1.length)
                             if(this.labelText1.length>12){
                                $('.labelText').css('font-size','36px')
                            }
                            this.desc='';
                        }
                    }
                    if(this.arr.length<=0){
                        this.labelText1='请选择投放标签';
                        this.desc='3-5个为佳，我们会为您推荐最匹配的模板';
                          $(".now_enter .text").css("display","none");
                    }
                    // this.arr.slice(1,1);
                  
                }
               
               
            },
            async enterModel(){
               if (this.countArr.indexOf(true) == -1) {
                    Toast("选择1-5个标签即可");
                    return;
                }
                // console.log(this.countArr);
                for(let i in this.countArr){
                    if(this.countArr[i]==true){
                        i=(parseInt(i)+parseInt(1))/2;
                        this.tagList.push(i);
                    }
                }
                 localStorage.setItem("_tagList", this.tagList);
                this.$router.push({ name: "templateSlide" });
                 
                // console.log(this.tagList);
                // let data={
                //     tagids:this.tagList
                // };
                // let result = await loginService.getTemplateByTag(data);
                //  if (result.data.success) {
                //     console.log(result.data)
                //     localStorage.setItem("_url1", result.data.list[0].sketch_url);
                //     localStorage.setItem("_url2", result.data.list[1].sketch_url);
                //     localStorage.setItem("_url3", result.data.list[2].sketch_url);
                //     localStorage.setItem("_list", result.data.list);
                //      Toast(" 模板1 "+result.data.list[0].name+" 模板2" + result.data.list[1].name+" 模板3" + result.data.list[2].name)
                //      this.$router.push({ name: "templateSlide" });
                //  }else{
                //      Toast(result.data.message)
                //  }
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "./label.scss"
</style>
