<template>
  <div class="bottomPart clearfix">
    <div class="bottomPartLeft fl">
      <p class="desTitle">标签池：</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="pubList searchList">
          <li class="pubLiStyle pubLiStyleWrap ellipsis"
            v-for="val in currentPool"
            :title="'[ '+val.tagName+' ]'"
            :key="val.id"
            :style="getStyle(val.id)?styles:null"
            @click="detailsTagList(val.id)"
          >{{val.tagName}}</li>
        </ul>
      </div>
    </div>
    <div class="bottomPartMid fl">
      <p><span class="el-icon-arrow-right" @click="toRightPool"></span></p>
      <p><span class="el-icon-arrow-left" @click="toLeftPool"></span></p>
    </div>
    <div class="bottomPartRight fl">
      <p class="desTitle">操作界面：</p>
      <div class="rightPool">
        <div
          class="onlyTop pubLiStyle"
          :class="selectArr[0]?'activeBgc':null"
          @click="selectPart(0)"
          v-if="choose == 'single'"
        >
          <template v-for="item in poolDetailList[0]">
            <span class="hzx ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">{{part.name}}</span>
          </template>
        </div>
        <div
          class="onlyTop pubLiStyle"
          :class="selectArr[0]?'activeBgc':null"
          @click="selectPart(0)"
          v-else
        >
          <span class="hzx ellipsis" v-for="item in poolDetailList[0]" :title="'[ '+item.name+' ]'" v-show="choose == 'multiple'" :key="item.id">{{item.name}}</span>
        </div>
        <div class="onlyBottom pubList">
          <ul class="clearfix">
            <li v-for="n in 5"
              :key="n + 'part'"
              class="onlyBottomPart "
              :class="selectArr[n]?'activeBgc':null"
              :style="{borderRight:n==5?'0':''}"
              @click="selectPart(n)"
            >
              <ul v-if="choose == 'single'">
                <template v-for="item in poolDetailList[n]">
                  <li class="partDetail ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">
                    {{part.name}}
                  </li>
                </template>
              </ul>
              <ul v-else>
                <template>
                  <li class="partDetail ellipsis" v-for="item in poolDetailList[n]" :style="getStyleR(item.id)?styleR:null" :title="'[ '+item.name+' ]'" :key="item.id" @click="selectTagOne($event,item.id,n)">
                    [ {{item.name}} ]
                  </li>
                </template>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="partWaring">
        <ul>
          <li v-for="i in 5" :key="i">
            <template v-for="item in poolDetailListTips[i]" v-show="poolDetailListTips[i].length > 0">
              <p class="partDetail tipsWrap" :key="item.type">
                <template v-for="section in currentTipLis">
                  <span v-if="item.type == section.val" :title="section.name" :key="section.val">{{section.name}}</span>         
                </template>
              </p>        
              <p class="partDetail tipsWrap" :title="item.name" :key="item.type+'--'">{{item.name}}</p> 
            </template>
          </li>
        </ul> 
      </div>
    </div>
    <span class="mutex">互斥项</span>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';

export default {
  props: {
    pool: {
      default: () => [],
      type: Array
    },
    tipLis: {
      default: () => [],
      type: Array
    },
    type: {
      default: '',
      type: String
    },
    sexType: {
      default: '',
      type: String
    },
    sign: {
      default: '',
      type: String
    },
    choose: {
      default: 'single',      //multiple 多选 single 单选
      type: String
    },
    options: {
        default: () => [],
        type: Array
    }
  },
  data() {
    return {
      poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
      poolDetailListTips: [[],[],[],[],[],[]],     //6个部分对应的提示
      poolDetailListIds: [[],[],[],[],[],[]],     //6个部分对应的id
      poolDetailListAll:[],    //默认6个部分转化为一维数组
      activePart: '-1',        //选中part第几个
      activePartSon:'-1',      //选中第几个part中的元素了
      selectArr: [false, false, false, false, false, false],   //右侧选中part状态

      styles:{background:'#eae7e7'},                       //选中单条样式
      styleR:{background:'#eae7e7 !important'},
      searchVal: '',           //搜索值
      currentPool: [],         //标签池数据
      currentLis:[],           //选中单条ID组合（多选）
      notIds:[],               //去重IDs
      multipleItem:[],         //右侧选中的单条标签
      currentTipLis:[],         //右侧选中的标签提示
      tmpNum:0,
    }
  },
  mounted(){
    this.$nextTick(()=>{
      let tagList = this.options;
      if(tagList.length > 0){
        let tmpArr = [[],[],[],[],[],[]];
        this.tmpNum = 1
        if(tagList[0].formPosition == 1){
          tagList.map((val,idx)=>{
            if(this.sign == 2) {     //杂音修改
                tmpArr[idx].push(val)
            }else{       //既往史修改
              tmpArr[idx] = val.questionMapping
            }
          })
        }else{
          tagList.map((val,idx)=>{
            if(this.sign == 2) {     //杂音修改
                tmpArr[idx+1].push(val)
            }else{       //既往史修改
              tmpArr[idx+1] = val.questionMapping
            }
          })
        }
        
        this.poolDetailList = tmpArr
        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
        this.searchTagList()
        this.getPoolDetailListTips();
      }
    })
  },
  watch: {
    pool(newVal, preVal) {
      this.currentPool = newVal
    },
    tipLis(newVal, preVal) {
      if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
        this.currentTipLis = newVal
      }
    },
    sexType(newVal, preVal) {
      if (newVal != preVal) {
        if (JSON.stringify(newVal) != JSON.stringify(preVal) && this.tmpNum != 1) {
          this.clearData()
        }
      }
    },
    sign(newVal, preVal) {
      if (JSON.stringify(newVal) != JSON.stringify(preVal) && this.tmpNum != 1) {
        this.clearData()
      }
    },
    type(newVal, preVal) {
      if (JSON.stringify(newVal) != JSON.stringify(preVal) && this.tmpNum != 1) {
        // this.clearData()
      }
    },
    searchVal(newVal, preVal){
      if(newVal.trim() == ''){
        this.searchTagList();
      }else if(newVal.trim() != preVal.trim()){
        this.searchTagList();
      }
    }
  },
  methods: {
    clearData(){
        this.poolDetailList = [[],[],[],[],[],[]]
        this.poolDetailListTips = [[],[],[],[],[],[]]
        this.poolDetailListIds = [[],[],[],[],[],[]]
        this.poolDetailListAll=[]
        this.activePart='-1'
        this.activePartSon='-1'
        this.selectArr = [false, false, false, false, false, false]
        this.searchVal= ''
        this.currentPool= []
        this.currentLis=[]
        this.notIds=[]               
        this.multipleItem=[]
    },
    selectTagOne(e,id,n){
      e.stopPropagation()
      if(this.activePartSon != n){
        this.multipleItem = []
      }
      this.activePartSon = n
      this.activePart = -1
      this.selectArr = [false, false, false, false, false, false]
      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
      if(utils.filterArr(this.multipleItem,id,2)){     //选中的有没有单列的小项，有去掉
        let tmpArr = utils.filterArr(this.multipleItem,id,1);
        this.multipleItem = tmpArr;
      }else{
        let tmpArr = this.multipleItem;
        tmpArr.push(id);
        this.multipleItem = tmpArr;
      }
      this.getPoolDetailListTips();
    },
    toRightPool(){
      if(this.currentLis.length == 0){
        this.$message({
          showClose: true,
          message: '请选择标签池标签',
          type: 'warning'
        });
        return;
      }
      this.getRightListDes();
      if(this.choose == 'multiple'){
        // this.getRightListDes();
      }
    },
    toLeftPool(){      //往左返回数据
      if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0){
        let tmparr = this.poolDetailList;
        tmparr[this.activePart] = []
        this.poolDetailList = tmparr;
        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
        this.searchTagList();
        this.currentLis = [];
        this.getPoolDetailListTips();
      }else if((this.choose == 'multiple') && (utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0) || (this.multipleItem.length > 0)){
        if(this.activePart != -1){
          let tmparr = this.poolDetailList;
          tmparr[this.activePart] = []
          this.poolDetailList = tmparr;
          this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
          this.searchTagList();
          this.currentLis = [];
          this.getPoolDetailListTips();
        }else{
          let tmparr = [],tmpArr = this.poolDetailList[this.activePartSon],tmpArrR = [];
          this.multipleItem.map((id)=>{
            this.poolDetailListAll = utils.filterArr(this.poolDetailListAll,id,1,1)
            this.multipleItem = []
            tmpArr = utils.filterArr(tmpArr,id,1,1)
          })
          this.poolDetailList[this.activePartSon] = tmpArr
          this.searchTagList();
          this.currentLis = [];
          this.getPoolDetailListTips();
        }
      }
    },
    getPoolDetailListTips(){
      let list = this.poolDetailList;
      let poolDetailListTips = [[],[],[],[],[],[]];
      let poolDetailListIds = [[],[],[],[],[],[]];
      for(let i = 0;i < list.length;i++){
        let tmpLis = list[i];
        if(tmpLis.length > 0){
          for(let j = 0;j < tmpLis.length;j++){
            let tmpLi = list[i][j],objTmp={};
            if(!utils.filterArr(poolDetailListTips[i],tmpLi.controlType,2)){
              objTmp.type = tmpLi.controlType
              objTmp.name = tmpLi.name
              poolDetailListTips[i].push(objTmp)
            }
            poolDetailListIds[i].push(tmpLi.id)
          }
        }
      }
      this.$emit('changeActionData',poolDetailListIds, false);
      if(this.choose == 'multiple'){
        this.poolDetailListTips = [[],[],[],[],[],[]]
      }else{
        this.poolDetailListTips = poolDetailListTips
      }
      this.poolDetailListIds = poolDetailListIds
    },
    getStyle(id){       //左侧选中状态
      return utils.filterArr(this.currentLis,id,2)
    },
    getStyleR(id){       //右侧选中状态
      return utils.filterArr(this.multipleItem,id,2)
    },
    searchTagList() {
      let ids = [];
      this.currentLis = []
      this.poolDetailListAll.map((value)=>{
        ids.push(value.id)
      })
      this.notIds = ids;
      
      let param1 = !!this.sign ? api.getGroupParams(this.sign): {};
      let param2 = {
        "tagName": this.searchVal || '',
        "type": this.type,
        "notIds": this.notIds,
        "sexType": this.sexType,
      }
      let param = Object.assign(param1,param2)

      api.searchTagList(param).then((res) => {
        if (res.data.code === '0') {
          this.currentPool = res.data.data
        }
      })
    },
    selectPart(idx) {
      this.multipleItem = []   
      let tmpFst1 = this.selectArr[0],
        tmpFst2 = this.selectArr[1],
        tmpFst3 = this.selectArr[2],
        tmpFst4 = this.selectArr[3],
        tmpFst5 = this.selectArr[4],
        tmpFst6 = this.selectArr[5];
      if (idx == 0) {
        this.selectArr = [!tmpFst1, false, false, false, false, false];
      } else if (idx == 1) {
        this.selectArr = [false, !tmpFst2, false, false, false, false];
      } else if (idx == 2) {
        this.selectArr = [false, false, !tmpFst3, false, false, false];
      } else if (idx == 3) {
        this.selectArr = [false, false, false, !tmpFst4, false, false];
      } else if (idx == 4) {
        this.selectArr = [false, false, false, false, !tmpFst5, false];
      } else if (idx == 5) {
        this.selectArr = [false, false, false, false, false, !tmpFst6];
      }
      let tmpArr = this.selectArr;
      let num = 0;
      tmpArr.map((val, idx) => {
        if (val) {
          this.activePart = idx;
        } else {
          num = ++num
          if (num == 6) { this.activePart = '-1' }
        }
      })
    },
    detailsTagList(id) {
      let plus1 = 0,plus2 = 0;
      for(let j = 0;j < this.selectArr.length;j++){        //判断右侧有没有选中
        if(!this.selectArr[j]){
          ++plus1;
          if(plus1 == 6){       //右侧未选中
            for(let k = 1;k < this.poolDetailList.length;k++){
              if(JSON.stringify(this.poolDetailList[k]) != '[]'){
                ++plus2
                if(plus2 == 5){     //右侧数据填满了
                  // alert('请选择需要修改的模块')
                  return;
                }
              }
            }
          }
        }
      }
      if(this.choose == 'single'){           //单选
        let tmpIds = [];
        tmpIds.push(id);
        this.currentLis = tmpIds;
        // this.getRightListDes();
      }else{                                //多选
        let tmpIds = this.currentLis;
        if(utils.filterArr(tmpIds,id,2)){
          tmpIds = utils.filterArr(tmpIds,id,1)
        }else{
          tmpIds.push(id);
        }
        this.currentLis = tmpIds;
      }
    },
    getRightListDes(){
      let idStr = this.currentLis.join(',');
      let param = {
        // "age": 0,
        "ids": idStr,
        // "sexType": 3
      }
      api.detailsTagList(param).then((res) => {        //右侧展开内容
        if (res.data.code === '0') {
          if(this.choose == 'single'){              //判断是单选
            let num = 0,tmpArr = [];
            tmpArr.push(res.data.data[idStr]);
            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
              if(flg){    //有选中
                if(idx == 0 && res.data.data[idStr].questionDetailList && res.data.data[idStr].questionDetailList.length != 1){
                  this.$message({
                    showClose: true,
                    message: '添加的数据有误',
                    type: 'error'
                  });
                  return;
                }
                let ids = [];
                this.poolDetailList[idx] = tmpArr;     //单选的数据
                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                this.searchTagList();
                this.getPoolDetailListTips();
              }else{      //没选中,按順序第二个开始添加
                ++num;
                if(num == 6){
                  for(let i = 1;i < this.poolDetailList.length;i++){
                    let ids = [];
                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
                      this.poolDetailList[i] = tmpArr;
                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                      this.searchTagList();
                      this.getPoolDetailListTips();
                      return;
                    }
                  }
                }
              }
              this.currentLis = [];       //左侧选中数据清空
            })
            // console.log('单选的数据',this.poolDetailList)
          }else{           //判断是多选
            let num = 0,tmpArr = [];
            this.currentLis.map((id)=>{
              tmpArr.push(res.data.data[id]);
            })
            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
              if(flg){    //有选中
                this.poolDetailList[idx] = (this.poolDetailList[idx]).concat(tmpArr);
                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                this.searchTagList();
                this.getPoolDetailListTips();
              }else{
                ++num;
                if(num == 6){
                  for(let i = 1;i < this.poolDetailList.length;i++){
                    let ids = [];
                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
                      this.poolDetailList[i] = tmpArr;
                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                      this.searchTagList();
                      this.getPoolDetailListTips();
                      return;
                    }
                  }
                }
              }
              this.currentLis = []
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less">
@import "../../less/common.less";
.bottomPart {
  box-sizing: border-box;
  padding-right: 100px;
  position: relative;
  padding-bottom: 10px;
  .desTitle {
    padding-bottom: 10px;
  }
  .tipsWrap {
    display: inline-block;
    text-align: center;
    border: 1px solid @icssBorder;
    padding: 2px 3px;
    border-radius: 5px;
    margin: 0 3px 3px 0;
    .tips {
    }
  }
  .pubList {
    height: @icssHeight;
    overflow: auto;
  }
  .pubLiStyle {
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
  }
  .pubLiStyleWrap {
    cursor: pointer;
  }
  .pubLiStyleWrap:hover {
    background-color: #f5f5f5;
  }
  .pubLiStyleWrap:before {
    content: "[ ";
  }
  .pubLiStyleWrap:after {
    content: " ]";
  }
  .mutex {
    position: absolute;
    right: 36px;
    top: 36px;
  }
  .bottomPartLeft {
    width: 30%;
    .pool {
      border: 1px solid @icssBorder;
      .el-input__prefix {
        left: 5px;
        right: auto;
      }
      .el-input__inner {
        height: 31px;
        line-height: 31px;
      }
      .el-input__icon {
        line-height: 31px;
      }
      .el-input--prefix .el-input__inner {
        border: 0 none;
        border-bottom: 1px solid @icssBorder;
        border-radius: 0;
      }
      .search {
        border-bottom: 1px solid @icssBorder;
      }
      .searchList {
        li {
        }
      }
    }
  }
  .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 {
    width: 62%;
    .partWaring {
      li {
        float: left;
        width: 20%;
        padding: 5px;
        box-sizing: border-box;
      }
    }
    .rightPool {
      border: 1px solid @icssBorder;
    }
    .onlyTop {
      border-bottom: 1px solid @icssBorder;
      cursor: pointer;
      .hzx{
        padding: 0 30px 0 0;
      }
    }
    .onlyBottom {
      .onlyBottomPart {
        float: left;
        border-right: 1px solid @icssBorder;
        box-sizing: border-box;
        width: 20%;
        height: @icssHeight;
        overflow: auto;
        cursor: pointer;
        .partDetail {
          padding: 3px 5px;
        }
      }
    }
  }
}
</style>


