<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">
          <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 ">
      <div class="poolTitle clearfix">
        <span class="fl">操作界面：</span>
        <div class="arrowWrap fr">
          <i
            class="el-icon-arrow-left arrowWrapPub"
            @click="toggleTopDownList(1)"
          ></i>
          <i
            class="el-icon-arrow-right arrowWrapPub"
            @click="toggleTopDownList(2)"
          ></i>
        </div>
      </div>
      <ul class="tagList operationPool templateTagList">
        <li
          class="tagItem operationItem"
          v-for="(item) in rightTagsList2"
          :key='item.id'
          :style="getStyle2(item)?styles:null"
          @click='selectRightTag(item)'
        >
          <div class="inputBox">
            <el-input
              v-if="item.type === 'input'"
              placeholder=""
              v-model="item.text"
            >
            </el-input>
          </div>
          <p
            v-if="item.tagName"
            :class="['tagName','ellipsis',{'redWordTip':isRed(item.sexType)}]"
            :title="'[ '+item.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: "BloodPressTagGroup",
  props: {
    pool: {
      default: () => [],
      type: Array
    },
    type: {
      default: '',
      type: String
    },
    sexType: {
      default: '',
      type: String
    },
    options: {
      default: () => [],
      type: Array
    },
    isEditOrCopy: {
        default: false,
        type: Boolean
    },
  },
  data() {
    return {
      leftTagsList: [],
      selectLeftTagsList: [],
      rightTagsList: [],
      rightTagsList2: [],
      selectRightTagsList: [],
      searchVal: '',
      styles: {
        background: '#eae7e7'
      },
    }
  },
  mounted() {
    this.rightTagsList2 = this.options
    let newArr = []
    for (let i = 0; i < this.rightTagsList2.length; i++) {
      if (this.rightTagsList2[i].tagType == 8) {
        newArr.push({ text: this.rightTagsList2[i].tagName, type: 'input', id: i + ',,,' })
      } else {
        if (i === 0) {
          newArr.push({ text: '', type: 'input', id: i + ',,,' })
        }
        newArr.push(this.rightTagsList2[i])
        if (!this.rightTagsList2[i + 1] || this.rightTagsList2[i + 1] && this.rightTagsList2[i + 1].tagType != 8) {
          newArr.push({ text: '', type: 'input', id: i + ',,,,' })
        }
      }
    }
    this.rightTagsList2 = newArr
    this.$emit('changeActionData', this.rightTagsList2, false);
    this.searchTagList()
    // this.leftTagsList = this.pool
    // console.log('TAGPOOL', this.pool)
  },
  watch: {
    pool(newVal, 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) {
        this.searchTagList();
        if (JSON.stringify(newVal) != JSON.stringify(preVal)&&!this.isEditOrCopy) {
          this.leftTagsList = [];
          this.selectLeftTagsList = [];
          this.rightTagsList = [];
          this.rightTagsList2 = [];
          this.selectRightTagsList = [];
          this.searchVal = '';
        }
      }
    },


  },
  methods: {
    isRed(sexType){
      if(this.sexType == 3){
        return false;
      }else if(this.sexType != 3&&sexType == 3){
        return false;
      }else if(this.sexType != 3&&this.sexType == sexType){
        return false;
      }else{
        return true;
      }
    },
    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) {
      if (tag.type == 'input') {
        return;
      }
      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);
      // }

    },
    toggleTopDownList(type) {
      if (this.selectRightTagsList.length == 0 || this.rightTagsList2.length == 0) {
        return
      }
      const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList))
      const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList2))
      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 == 1) {//第一个不能往上移动
              return;
            } else {//先把这个元素和后面的输入框从数组中删除，再添加到数组里
              let tmp1 = tmpRightLis[i]
              let tmp2 = tmpRightLis[i + 1]
              tmpRightLis.splice(i, 1)
              tmpRightLis.splice(i, 1)
              tmpRightLis.splice(i - 2, 0, tmp1)
              tmpRightLis.splice(i - 1, 0, tmp2)
              this.rightTagsList2 = [...tmpRightLis]
              this.$emit('changeActionData', this.rightTagsList2, 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]
              let tmp2 = tmpRightLis[i + 1]
              tmpRightLis.splice(i, 1)
              tmpRightLis.splice(i, 1)
              tmpRightLis.splice(i + 2, 0, tmp1)
              tmpRightLis.splice(i + 3, 0, tmp2)
              this.rightTagsList2 = [...tmpRightLis]
              this.$emit('changeActionData', this.rightTagsList2, false);
              return
            }
          }
        }
      }
    },
    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) {
              if (this.rightTagsList2.length === 3) {
                this.rightTagsList2 = []
              } else {
                this.rightTagsList2.splice(j, 2)
              }
            }
          }
        }
      }

      // this.rightTagsList2 = [];
      // let textItem = { text: ','  }
      // for (let i = 0; i < this.rightTagsList.length; i++) {
      //     if(this.rightTagsList2.length === 0) {
      //         this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
      //     }
      //     this.rightTagsList2.push(this.rightTagsList[i]);
      //     this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
      // }
      // 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.rightTagsList2, false);
    },
    toRightList() {
      let rLength = this.rightTagsList.length
      let lLength = this.selectLeftTagsList.length
      if(rLength + lLength > 9){
        this.$message({
          message: '血压类型最多能添加9个标签，已添加'+rLength+'个',
          type: 'warning'
        });
        return;
      }
      this.rightTagsList.push(...this.selectLeftTagsList);
      let textItem = { text: '', type: 'input' }
      for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
        if (this.rightTagsList2.length === 0) {
          let textItem1 = JSON.parse(JSON.stringify(textItem))
          textItem1.id = this.selectLeftTagsList[i].id + ',,'
          this.rightTagsList2.push(textItem1)
        }
        this.rightTagsList2.push(this.selectLeftTagsList[i]);
        let textItem2 = JSON.parse(JSON.stringify(textItem))
        textItem2.id = this.selectLeftTagsList[i].id + ','
        this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
      }

      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.rightTagsList2, false);
    },
    searchTagList() {
      let notIds = []
      for (let i = 0; i < this.rightTagsList2.length; i++) {
        if (typeof this.rightTagsList2[i].id === 'number') {
          notIds.push(this.rightTagsList2[i].id)
        }

      }

      let param1 = api.getGroupParams(3);
      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" scoped>
@import "../../less/common.less";
.redWordTip {
    color: red;
}
.symptomTagGroupWrapper {
  .arrowWrap {
    position: absolute;
    right: 0;
    .arrowWrapPub {
      border: 1px solid @icssBorder;
      height: 23px;
      width: 40px;
      text-align: center;
      background: #fff;
      line-height: 23px;
      border-radius: 3px;
      margin: 0 7px 10px 5px;
    }
  }
  .bottomPartLeft {
    width: 30%;
    box-sizing: border-box;
    float: left;
  }
  .poolTitle {
    // border-bottom: 1px solid @icssBorder;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
  }
  .pool {
    // border:1px solid @icssBorder;
  }
  .inputBox {
    width: 100px;
  }
  .search {
    width: 100%;
    border-bottom: 1px solid @icssBorder;
    box-sizing: border-box;
    height: 30px;
  }
  .tagList {
    height: 300px;
    overflow-y: auto;
    border: 1px solid @icssBorder;
  }
  .tagItem {
    line-height: 30px;
    padding: 0px 10px;
  }
  .operationPool {
    position: relative;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .tagName {
    line-height: 30px;
  }
  .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: 60%;
  }
  button {
    margin-top: 20px;
  }
  .operationItem {
    display: inline-block;
    line-height: 40px;
    margin: 0 5px 10px 0;
    float: left;
    text-align: center;
    p {
      padding: 5px 0;
    }
  }
  .templateTagList {
    height: 318px;
  }
  .active {
    color: #abcdef;
  }
}
</style>
