<template>
    <div class="symptomTagGroupWrapper clearfix">
    <div class="bottomPartLeft">
      <p class="poolTitle">标签池</p>
      <div class="pool">
        <el-input
          placeholder="请输入搜索内容"
          v-model="searchVal"
        >
            <i
                slot="prefix"
                class="el-input__icon el-icon-search"
            ></i>
        </el-input>
        <ul class="tagList tagPool">
            <li v-for="(item, index) in leftTagsList"
                class = "tagItem"
                :key='item.id'
                :title="'[ '+item.tagName+' ]'"
                :style="getStyle(item)?styles:null"
                @click='selectLeftTag(item, index, $event)'
            >
                <p class="tagName ellipsis" >{{item.tagName}} </p>
            </li>
        </ul>
      </div>
    </div>
    <div class="bottomPartMid fl">
        <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
        <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
    </div>
    <div class="bottomPartRight inspectBottomPartRight">
      <p class="poolTitle">操作界面：</p>
      <ul class="tagList operationPool">
            <li class = "tagItem"
                v-for="(item) in rightTagsList" 
                :key='item.id'
                :style="getStyle2(item)?styles:null"
                @click='selectRightTag(item)'
            >   
                <p v-if="item.tagName" class="tagName">{{item.tagName}} </p>
            </li>
        </ul>
    </div>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';

export default {
    name: "InspactTagGroup",
    props: {
        pool: {
            default: () => [],
            type: Array
        },
        type: {
            default: '',
            type: String
        },
        sexType: {
            default: '',
            type: String
        },
        options: {
            default: () => [],
            type: Array
        }
    },
    data() {
        return {
            leftTagsList: [],
            selectLeftTagsList: [],
            rightTagsList: [],
            rightTagsList2: [],
            selectRightTagsList: [],
            searchVal: '',
            styles:{
                background:'#eae7e7'
            },
        }
    },
    mounted() {
      this.$nextTick(()=>{
        this.rightTagsList = this.options
        this.$emit('changeActionData',this.options, false);
        this.searchTagList()
      })
    },
    watch: {
        pool(newVal, preVal) {
            if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                this.leftTagsList = newVal
            }
        },
        searchVal(newVal, preVal){
            if(newVal.trim() == ''){
                this.searchTagList()
            }else if(newVal.trim() != preVal.trim()){
                this.searchTagList()
            }
        },
        sexType(newVal, preVal) {
            if (newVal != preVal) {
                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                    this.leftTagsList = [];
                    this.selectLeftTagsList = [];
                    this.rightTagsList = [];
                    this.rightTagsList2 = [];
                    this.selectRightTagsList = [];
                    this.searchVal = '';
                     this.searchTagList();
                }
            }
        },

        
    },
    methods: {
        selectLeftTag(tag, index, e) {
            const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
            if (hasTag) {
                this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
            } else {
                this.selectLeftTagsList.push(tag);
            }
        },
        selectRightTag(tag) {
            const hasTag = this.isHasTag(tag, this.selectRightTagsList)
            if (hasTag) {
                this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
            } else {
                this.selectRightTagsList.push(tag);
            }
            
        },
        isHasTag(item, arr) {
            for ( let i = 0; i <arr.length; i++) {
                if(arr[i].id === item.id) {
                    return true;
                }
            }
            return false;
        },
        getStyle(item){       //左侧选中状态
            // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
            // return utils.filterArr(this.selectLeftTagsList,item,2)
            return this.isHasTag(item, this.selectLeftTagsList)
        },
        getStyle2(item) {
            // return utils.filterArr(this.selectRightTagsList,item,2)
            return this.isHasTag(item, this.selectRightTagsList)
        },
        toLeftList() {
            // if(!this.searchVal) {
            //     this.leftTagsList = this.searchTagList()
            // }
            for (let i = 0; i < this.selectRightTagsList.length; i++) {
                this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
            }
            // for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
            //     if (this.selectRightTagsList[i].type !== 'input') {
            //         for (let j = 0; j < this.rightTagsList2.length; j++) {
            //             if(this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
            //                 this.rightTagsList2.splice(j, 1)
            //             }
            //         }
            //     }
            // }
            this.selectLeftTagsList = []
            this.selectRightTagsList = []
            this.searchTagList()
            this.$emit('changeActionData',this.rightTagsList, false);
        },
        toRightList() {
            this.rightTagsList.push(...this.selectLeftTagsList);
            // let textItem = { text: ',' ,type:'input' }
            // for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个加入输入框，默认为逗号
            //     this.rightTagsList2.push(this.selectLeftTagsList[i]);
            // }
            for (let i = 0; i < this.rightTagsList.length; i++) {
                this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
            }
            this.selectLeftTagsList = []
            this.selectRightTagsList = []
            this.$emit('changeActionData',this.rightTagsList, false);

        },
        searchTagList() {
            let notIds = []
            for (let i = 0; i < this.rightTagsList.length; i++) {
                if(this.rightTagsList[i].id) {
                    notIds.push(this.rightTagsList[i].id)
                }
            }
            let param1 = api.getGroupParams(7);
            let param2 = {
                "tagName": this.searchVal,
                "type": this.type || '',
                "notIds": notIds,
                "sexType": this.sexType,
            }
            let param = Object.assign(param1,param2)
            api.searchTagList(param).then((res) => {
                if (res.data.code === '0') {
                    this.leftTagsList = res.data.data
                    this.selectLeftTagsList = []
                    this.selectRightTagsList = []
                }
            })
           
        },
    }
}
</script>

<style lang="less" >
@import '../../less/common.less';
.symptomTagGroupWrapper {
    .bottomPartLeft {
        width: 30%;
        box-sizing: border-box;
        float: left;
    }
    .poolTitle {
        // border-bottom: 1px solid @icssBorder;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .pool {
        // border:1px solid @icssBorder;
    
    }
    .search {
        width: 100%;
        border-bottom: 1px solid @icssBorder;
        box-sizing: border-box;
        height: 30px;
    }
    .tagList {
        border: 1px solid @icssBorder;
    }
    .tagPool {
        height: 300px;
        overflow-y: auto;

    }
    .attributeBox {
        position: absolute;
        right: -100px;
        top: 2px;
    }
    .tagItem {
        position: relative;
        line-height: 30px;
        cursor: pointer;
        padding: 0 10px;
    }
    .operationPool {
        position: relative;
        width: 60%;
        min-height: 300px;
        padding: 10px 0;
    }
    .tagName:before {
        content: '['
    }
    .tagName::after {
        content: ']'
    }
    .bottomPartMid {
        width: 8%;
        margin-top: 60px;
        p {
        width: 100%;
        text-align: center;
        span {
            cursor: pointer;
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            border: 1px solid @icssBorder;
            margin-bottom: 15px;
            font-size: 18px;
        }
        }
    }
    .bottomPartRight {
        float: left;
        width: 40%;
    }
    .buttonBox {
        width: 10%;
        float: left;
    }
    .followButton {
        margin-top: 20px;
    }
    .tagAttribute {
       border: 1px solid @icssBorder;
       height: 17px;
       line-height: 17px;
       padding: 3px 5px;
       border-radius: 10px;
    }
    .inputBox {
        width: 120px;
        .el-input {
            .el-input__inner {
                height: 30px;
                background: rgb(234, 231, 231);
            }
        }
    }
    .closeTagAttribute {
        position: absolute;
        top: -5px;
        right: -5px;
    }
    .pagination {
        min-width: 1010px;
    }
    .active {
        color: #aBcdef;
    }
}
</style>
