<template>
  <div class="tagPoolWrapper clearfix">
    <div class="bottomPartLeft">
      <p class="poolTitle">标签池：</p>
      <div class="pool">
        <el-input placeholder="请输入搜索内容"
                v-model="searchVal" clearable>
          <i slot="prefix"
             class="el-input__icon el-icon-search"
          ></i>
        </el-input>
        <ul class="tagList">
          <li v-for="(item, index) in leftTagsList"
              class = "tagItem tagName ellipsis"
              :key='item.id'
              :title="'[ '+item.tagName+' ]'"
              :style="getStyle(item)?styles:null"
              @click='selectLeftTag(item, index, $event)'
          >
            {{item.tagName}}
          </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 ">
      <p class="poolTitle">已选标签：</p>
      <ul class="tagList operationPool">
        <li class = "tagItem operationItem"
            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: "PromptTagPool",
    props: {
      pool: {
        default: () => [],
        type: Array
      },
      type: {
        default: '',
        type: String
      },
      selected:{
        default:[],
        type:Array
      }
    },
    data() {
      return {
        leftTagsList: [],
        selectLeftTagsList: [],
        rightTagsList: [],
        selectRightTagsList: [],
        searchVal: '',
        styles:{
          background:'#eae7e7'
        },
      }
    },
    watch: {
      pool(newVal, preVal) {
        if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
          this.leftTagsList = newVal
        }
      },
      selected(newVal, preVal) {
        if (JSON.stringify(newVal) != JSON.stringify(preVal)) {console.log(newVal)
          this.rightTagsList = newVal
        }
      },
      searchVal(newVal, preVal){
        if(newVal.trim() == ''){
          if(this.type==''){    //清空搜索时清空或回到原始
            this.leftTagsList = [];
          }else{
            this.searchTagList();
          }
        }else if(newVal.trim() != preVal.trim()){
          this.searchTagList()
        }
      },
      type(newVal, preVal) {
        if(newVal.trim()==''&&this.searchVal.trim()==''){
          this.leftTagsList = [];
          return ;
        }
        if(this.searchVal.trim()!=''||newVal != preVal){
          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){       //左侧选中状态
        return this.isHasTag(item, this.selectLeftTagsList)
      },
      getStyle2(item) {
        // return utils.filterArr(this.selectRightTagsList,item,2)
        return this.isHasTag(item, this.selectRightTagsList)
      },
      toLeftList() {
        for (let i = 0; i < this.selectRightTagsList.length; i++) {
          this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
        }
        this.selectLeftTagsList = []
        this.selectRightTagsList = []
        this.searchTagList()
        this.$emit('changeActionData',this.rightTagsList, false);
      },
      toRightList() {
        this.rightTagsList.push(...this.selectLeftTagsList);

        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 param = {
          "tagName": this.searchVal,
          "tagType": [1, 2],
          "controlType": [],
          "type": this.type || '',
          "notIds": notIds,
          "sexType": 3,

        }
        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';
  .tagPoolWrapper {
    .bottomPartLeft {
      width: 30%;
      box-sizing: border-box;
      float: left;
    }
    .pool{
      .el-input__inner {
        width: 100%;
        border: 1px solid #c0c4cc;
        border-radius: 0;
        height: 35px;
        border-bottom: none;
      }
      .el-input__prefix {
        left: 5px;
        right: auto;
      }
    }
    .poolTitle {
      box-sizing: border-box;
      margin-bottom: 10px;
      font-size: 14px;
      color: #606266;
    }
    .search {
      width: 100%;
      border-bottom: 1px solid @icssBorder;
      box-sizing: border-box;
      height: 30px;
    }
    .tagList {
      height: 240px;
      overflow-y: auto;
      border: 1px solid @icssBorder;
    }
    .tagItem {
      line-height: 30px;
      padding: 0px 10px;
      cursor: pointer;
      font-size: 14px;
      color: #606266;
    }
    .tagName:before {
      content: '['
    }
    .tagName::after {
      content: ']'
    }
    .operationPool {
      position: relative;
      width: 60%;
      height: 275px;
      overflow-y: auto;
      border:1px solid @icssBorder;
    }
    .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: 60%;
    }
    Button {
      margin-top: 20px;
    }
    .active {
      color: #aBcdef;
    }
  }
</style>
