<template>
    <div class="symptomTagGroupWrapper commomSymptom clearfix">
        <div class="operation-row">
            <el-checkbox-group size="small" v-if="qaType==2&&type!='4'" v-model="checkedExc">
                <el-checkbox-button :label="0" @change="handleExclu">互斥项</el-checkbox-button>
            </el-checkbox-group>
        </div>
    <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+' ]('+sex[item.sexType]+(item.required?'、必':'')+(item.specFlag?'、跟主':'')+')'"
                :style="getStyle(item)?styles:null"
                @click='selectLeftTag(item, index, $event)'
            >
                <p class="ellipsis" >
                    <span class="tagName">{{item.tagName}}</span>
                    <span>({{sex[item.sexType]}}{{item.required?'、必':''}}{{item.specFlag?'、跟主':''}})</span>
                </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 ">
      <p class="poolTitle">操作界面：</p>
      <ul class="tagList operationPool operationPools">
            <li class = "tagItem"
                v-for="(item) in rightTagsList"
                :key='item.id'
                :style="getStyle2(item)?styles:null"
                @click='selectRightTag(item)'
            >
                <p class="ellipsis" :title="'[ '+item.tagName+' ]('+sex[item.sexType]+(item.required?'、必':'')+(item.specFlag?'、跟主':'')+')'">
                    <span class="tagName">{{item.tagName}}</span>
                    <span>({{sex[item.sexType]}}{{item.required?'、必':''}}{{item.specFlag?'、跟主':''}})</span>
                </p>
                <el-tag class="exclu" v-if="item.exclusionType==1" type="info" size="mini">互斥项</el-tag>
            </li>
        </ul>
    </div>
    <div class="buttonBox" :class="(qaType==2)?'rightMore':''">
        <div class="bottomPartMid bottomPartMidss fl bottomPartMids" >
            <p><span class="el-icon-arrow-up" @click="toggleTopDownList(1)"></span></p>
            <p><span class="el-icon-arrow-down" @click="toggleTopDownList(2)"></span></p>
        </div>
    </div>
  </div>
</template>
<script>
import api from '@api/preTreat.js';

export default {
    name: "QuestionTagGroup",
    props: ['ascription','sexType','options','type','qaType','relationId'],
    data() {
        return {
            checkedExc:false,
            leftTagsList: [],
            selectLeftTagsList: [],
            rightTagsList: [],
            selectRightTagsList: [],
            searchVal: '',
            sex:{
              1:'男',
              2:'女',
              3:'通'
            },
            styles:{
                background:'#eae7e7'
            },
        }
    },
    mounted() {
      //编辑
        let tagList = this.transOptions(this.options);
        if(tagList&&tagList.length > 0){
          const that = this;
          setTimeout(function(){            //等watch执行后赋值tags,否则这里先执行，会被watch里清空
            that.rightTagsList = tagList;
            that.searchTagList();
            that.$emit('changeActionData',that.rightTagsList);
          },100);
        }else{
          //添加初始
          this.searchTagList();
        }
    },
    watch: {
        searchVal(newVal, preVal){
          //this.ifReflashTagList(newVal, preVal);
          this.searchTagList();
        },
        ascription(newVal, preVal){
          this.ifReflashTagList(newVal, preVal);
        },
        sexType(newVal, preVal){
          this.ifReflashTagList(newVal, preVal);
        },
        type(newVal, preVal){
          this.ifReflashTagList(newVal, preVal);
        },
        relationId(newVal, preVal){
          this.ifReflashTagList(newVal, preVal);
        },
        'selectRightTagsList':{
          handler:function(newVal){
            this.checkedExc = newVal[0]&&newVal[0].exclusionType===1;
          },
          deep:true
        }
    },
    methods: {
        handleExclu(){
            if(!this.selectRightTagsList||this.selectRightTagsList.length==0){
              this.$message({
                showClose: true,
                message: '请先选择要操作的标签',
                type: 'warning'
              });
              return ;
            }
            const arr = this.rightTagsList.map((it)=>{
              if(it.id==this.selectRightTagsList[0].id){
                if(it.exclusionType===1){
                  it.exclusionType = 0
                }else{
                  it.exclusionType=1;
                }
              }else{
                it.exclusionType=0;
              }
              return it;
            });
            this.rightTagsList=arr;
            this.$emit('changeActionData',this.rightTagsList);
        },
        transOptions(opt){
          return opt&&opt.map((it)=>{
            return Object.assign({},it,{id:it.questionId||it.id});      //模板是questionId，组合是id
          });
        },
        ifReflashTagList(newVal='', preVal=''){
          if(newVal.trim() == ''){
            this.searchVal = '';
            this.rightTagsList=[];
            this.searchTagList();
          }else if(newVal.trim() != preVal.trim()){
            this.searchVal = '';
            this.rightTagsList=[];
            this.searchTagList();
          }
        },
        selectLeftTag(tag) {
            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) {
            let tmpArr = [];
            tmpArr.push(tag);
            if (this.selectRightTagsList.length > 0 && tag.id == this.selectRightTagsList[0].id) {
              this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
            }else{
              this.selectRightTagsList = tmpArr;
            }
        },
        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 this.isHasTag(item, this.selectRightTagsList);
        },
        toggleTopDownList(type){
          if(this.selectRightTagsList.length == 0 || this.rightTagsList.length == 0){
            return;
          }
          const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList));
          const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList));
          const numLen = tmpRightLis.length;
          const numId = tmpRightSelect[0].id;
          if(type == 1){
            for(let i = 0;i < tmpRightLis.length;i++){
              if(numId === tmpRightLis[i].id){//选中的是第几个
                if(i == 0){//第一个不能往上移动
                  return;
                }else{//先把这个元素和后面的输入框从数组中删除，再添加到数组里
                  let tmp1 = tmpRightLis[i];
                  tmpRightLis.splice(i,1);
                  tmpRightLis.splice(i-1,0,tmp1);
                  this.rightTagsList = [...tmpRightLis];
                  this.$emit('changeActionData',this.rightTagsList, false);
                  return
                }
              }
            }
          }else if(type == 2){
            for(let i = 0;i < tmpRightLis.length;i++){
              if(numId === tmpRightLis[i].id){
                if(i == numLen-1){
                  return;
                }else{
                  let tmp1 = tmpRightLis[i];
                  tmpRightLis.splice(i,1);
                  tmpRightLis.splice(i+1,0,tmp1);
                  this.rightTagsList = [...tmpRightLis];
                  this.$emit('changeActionData',this.rightTagsList, false);
                  return;
                }
              }
            }
          }
        },
        toLeftList() {
            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++) {
                for (let j = 0; j < this.rightTagsList.length; j++) {
                    if(this.selectRightTagsList[i].id === this.rightTagsList[j].id) {
                        if(this.rightTagsList.length === 1) {
                            this.rightTagsList = [];
                        } else {
                            this.rightTagsList.splice(j, 1);
                        }
                    }
                }
            }
            this.selectLeftTagsList = [];
            this.selectRightTagsList = [];
            this.searchTagList();
            this.$emit('changeActionData',this.rightTagsList, false);
        },
        toMuchImgs(list){
          const arr = list.filter((it)=>{
            return it.tagType==1&&it.controlType ==4;
          });
          if(arr.length>1){
            return true;
          }
          return false;
        },
        toRightList() {
            if(this.toMuchImgs([...this.rightTagsList,...this.selectLeftTagsList])){
              this.$message({
                showClose: true,
                message: '一个模板最多只能添加一个上传图片类型填写单',
                type: 'warning'
              });
              return ;
            }
            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.searchTagList();
            this.$emit('changeActionData',this.rightTagsList, false);
        },
        searchTagList() {
            let notIds = [];
            for (let i = 0; i < this.rightTagsList.length; i++) {
              notIds.push(this.rightTagsList[i].id);
            }
            const maps = {
              '4':['1'],            //独立组合只能添加独立填写单
              '6':['4']             //混合组合只能添加独立组合填写单
            };
            let param = {
                "tagName": this.searchVal,
                "type": this.ascription,
                "notIds": notIds,
                "notControlType":this.qaType==2||this.ascription!='51'?['4']:[],             //组合填写单或非诊疗情况模版不能添加图片上传
                "sexType": this.sexType,
                "tagType":+this.qaType===2?maps[this.type]:['1','6']       //qaType=2:组合填写单，qaType=3模板
            };
            api.questionSearch(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';
.operation-row{
    text-align: right;
}
.exclu{
    position: absolute;
    right: -54px;
    top: 5px;
}
.rightMore{
    margin-left: 48px;
}
.commomSymptom {
  .tagList.operationPools {
    width: 100%;
  }
  div.bottomPartMids {
    margin-left: 20px;
  }
  div.bottomPartMidss {
    margin-top: 30px;
  }
}
.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{
        margin-right: 10px;
    }
    .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;
        margin-top: 30px;
    }
    .inputBox {
        width: 120px;
        .el-input {
            .el-input__inner {
                height: 30px;
                background: rgb(234, 231, 231);
            }
        }
    }
}
</style>
