<template>
    <div class="qcTypeWrapper commomSymptom clearfix">
        <QCTipPop :name="curName" :example="curEmp" :show="showPop" :top="popTop" :left="popLeft" @close="closePop"></QCTipPop>
        <div class="bottomPartLeft">
            <p style="height: 26px;"> </p>
          <div class="pool">
            <ul class="tagList tagPool">
                <li v-for="(item, index) in leftTagsList"
                    class = "tagItem"
                    :key='item.id'
                    :style="getStyle(item)?styles:null"
                    @click='selectLeftTag(item, index, $event)'
                >
                    <p class="ellipsis" @click="closePop">
                        <span class="tagName">{{item.name}}</span>
                        <!-- <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></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" @click="closePop">
                        <span class="tagName">{{item.name}}</span>
                        <!-- <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span> -->
                    </p>
                </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/qualityControl.js';
import QCTipPop from './QCTipPop.vue';
import $ from 'jquery'

export default {
    name: "ItemDataTypeQcTypePour",
    props: ['hospital','moduleName','selectedTag'],
    data() {
        return {
            checkedExc:false,
            leftTagsList: [],
            selectLeftTagsList: [],
            rightTagsList: [],
            selectRightTagsList: [],
            showPop:false,
            activeId:'',
            curName:"",
            curEmp:"",
            popTop:'',
            popLeft:'',
            styles:{
                background:'#eae7e7'
            },
        }
    },
    mounted() {
      //编辑
        if(this.hospital&&this.moduleName){
          const that = this;
          setTimeout(function(){            //等watch执行后赋值tags,否则这里先执行，会被watch里清空
            that.rightTagsList = [...that.selectedTag];
            that.getModuleTypeList();
            that.$emit('changeActionData',that.getModuleTypeIds());
          },100);
        }
    },
    watch: {
      hospital(){
            this.rightTagsList=[];
          this.getModuleTypeList();
        },
      moduleName(){
            this.rightTagsList=[];
          this.getModuleTypeList();
        },
      /*'selectRightTagsList':{
          handler:function(newVal){
          },
          deep:true
        }*/
    },
    methods: {
        closePop(){
          this.activeId = '';
          this.curName = '';
          this.curEmp = '';
          this.popTop = 0;
          this.popLeft=0;
          this.showPop=false;
        },
        showTipPop(item,e){
          if(this.showPop&&this.activeId===item.id){
            this.closePop();
            return;
          }
          const t=$(".el-main").scrollTop();
          this.activeId = item.id;
          this.curName = item.name;
          this.curEmp = item.behospitalCodes;
          this.popTop = t+e.clientY;
          this.popLeft=e.clientX;
          this.showPop = true;
        },
        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.getModuleTypeIds());
        },
        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.getModuleTypeList();
          }else if(newVal.trim() != preVal.trim()){
            this.searchVal = '';
            this.rightTagsList=[];
            this.getModuleTypeList();
          }
        },
        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;
            }*/
          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 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.getModuleTypeIds(), 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.getModuleTypeIds(), false);
                  return;
                }
              }
            }
          }
        },
        toLeftList() {console.log(this.rightTagsList)
            this.leftTagsList.push(...this.selectRightTagsList);
            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.getModuleTypeList();
            this.$emit('changeActionData',this.getModuleTypeIds(), 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.getModuleTypeList();
            this.$emit('changeActionData',this.getModuleTypeIds(), false);
        },
        getModuleTypeList() {
          this.leftTagsList = []
          if(this.hospital === "" || this.moduleName===""){
            return
          }
          return api.getQcEntryTypeIndex({hospitalId: ""+this.hospital, entryId: ""+this.moduleName,notIdList:this.getModuleTypeIds()||[]}).then((res) =>{
            if(res.data.code==="0"){
              const data = res.data.data;
              this.leftTagsList = data;
              this.selectLeftTagsList = [];
              this.selectRightTagsList = [];
            }else{
              this.leftTagsList=[];
              this.selectLeftTagsList = [];
              this.selectRightTagsList = [];
              this.warning("获取质控类型失败");
            }
          })
        },
      getModuleTypeIds(){
          const list=this.rightTagsList;
          return list.map((it)=>it.id);
      },
      warning(msg, type,time) {
            this.$message({
                showClose: true,
                message: msg,
                type: type || 'warning',
                duration:time || '3000'
            })
        },
    },
    components:{
      QCTipPop
    }
}
</script>

<style lang="less" scoped>
@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;
  }
}
.qcTypeWrapper {
    padding-left: 60px;
    margin:-20px 0 20px;
    position: relative;
    .bottomPartLeft {
        width: 40%;
        box-sizing: border-box;
        float: left;
    }
    .poolTitle {
        // border-bottom: 1px solid @icssBorder;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 12px;
    }
    .pool {
        // border:1px solid @icssBorder;
    
    }
    .search {
        width: 100%;
        border-bottom: 1px solid @icssBorder;
        box-sizing: border-box;
        height: 30px;
    }
    .tagList {
        border: 1px solid @icssBorder;
    }
    .ellipsis{
        .tip-icon{
            display:inline-block;
            width:16px;
            height: 16px;
            vertical-align: middle;
            background-image:url("../../images/tip.png");
            background-size:16px;
            background-repeat:no-repeat;
            &:hover,&.active{
                 background-image:url("../../images/tip1.png");
            }
        }

    }
    /*.pop{
        display: none;
        position: absolute;
        top:-30px;
        right: -10px;
        padding: 5px 10px;
        background: #fff;
        border:1px #ccc solid;
        border-radius: 3px;
        line-height: 20px;
        font-size: 12px;
        width: 300px;
        word-break: break-all;
        z-index: 1;
    }*/
    .tagPool {
        height: 320px;
        overflow-y: auto;

    }
    .tagItem {
        position: relative;
        line-height: 30px;
        cursor: pointer;
        padding: 0 10px;
        /*z-index:0;*/
    }
    .operationPool {
        position: relative;
        width: 60%;
        height: 300px;
        padding: 10px 0;
        overflow: auto;
    }
    .tagName{
        margin-right: 10px;
        font-size: 14px;
        vertical-align: middle;
    }
    .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>
