<template>
  <el-dialog
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="visibleDialog"
    :before-close="cancleDialog"
    width="674px">
    <div class="custom-checkbox-group">
      <div class="left-tag-list">
        <el-input
          prefix-icon="el-icon-search"
          v-model="inputValue"
          size="small"
          placeholder="请输入内容"
        ></el-input>
        <div class="list-data-box">
          <el-checkbox v-model="checkedAll" @change="handleCheckedAll">全部用户组（{{userList.length}}）</el-checkbox>
          <el-checkbox-group v-if="userList.length>0" class="bg-scroll" v-model="checkList" @change="updateSelect">
            <ul>
              <li v-for="(item, index) in userList" :key="index + 's'">
                <div class="avatar-box" @click.stop="selectIndex(item, index)">
                  <div class="name" v-if="item.userGroupName.length>20">
                    <el-tooltip placement="top" :content="item.userGroupName">
                      <div class="nameTip">{{item.userGroupName}}</div>
                    </el-tooltip>
                  </div>
                  <div class="name" v-else>
                    {{item.userGroupName}}
                  </div>
                </div>
                <el-checkbox :label="item.id">{{ "" }}</el-checkbox>
              </li>
            </ul>
          </el-checkbox-group>
          <div class="no-data" v-if="userList.length==0">暂无数据</div>
        </div>
      </div>
      <div class="right-tag-list">
        <div class="darkGrayText default-size">
          已选用户组：&emsp;<span>({{ selectGroup.length }})</span>
        </div>
        <div class="right-staff">
          <ul>
            <li v-for="(item, index) in selectGroup" :key="index + 's'">
              <div class="avatar-box">
                <div class="name" v-if="item.userGroupName.length>20">
                  <el-tooltip placement="top" :content="item.userGroupName">
                    <div class="nameTip">{{item.userGroupName}}</div>
                  </el-tooltip>
                </div>
                <div class="name" v-else>
                  {{item.userGroupName}}
                </div>
              </div>
              <i
                @click="deletGroup(item, index)"
                style="cursor: pointer"
                class="el-icon-close"
              ></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="text-align: center" class="btnDiv" slot="footer">
      <el-button size="small" @click="cancleDialog">取消</el-button>
      <el-button
        size="small"
        type="primary"
        class="ml-20"
        @click="confirmDialog"
      >提交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import ElDialog from 'modesign-ui/packages/dialog';
import ElTooltip from 'modesign-ui/packages/tooltip';
import ElButton from 'modesign-ui/packages/button';
import ElCheckbox from 'modesign-ui/packages/checkbox';
import ElCheckboxGroup from 'modesign-ui/packages/checkbox-group';
import ElInput from 'modesign-ui/packages/input';
export default {
  components:{
    ElDialog,
    ElTooltip,
    ElButton,
    ElCheckbox,
    ElCheckboxGroup,
    ElInput
  },
  name: 'ElUserGroup',
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    },
    userList: { //用户组列表
      type: Array,
      default: () => []
    },
    chooseList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: () => '用户组筛选'
    }
  },
  data () {
    return {
      selectNewGroup: [],
      selectGroup: [],
      checkList: [],
      inputValue: '',
      checkedAll: false,
      timer: null
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 全选
    handleCheckedAll () {
      this.checkList = []
      this.selectGroup = []
      if (this.checkedAll) {
        // 选中全部
        this.userList.forEach((element) => {
          this.checkList.push(element.id)
          this.selectGroup.push(element)
        })
      }
    },
    // 选中内容校验
    updateSelect () {
      this.selectGroup = []
      this.userList.forEach((element) => {
        const index = this.checkList.findIndex((item) => item === element.id)
        if (index != -1) {
          this.selectGroup.push(element)
        }
      })
      // 全选的时候
      this.checkedAll = this.userList.length === this.checkList.length
    },
    // 删除用户组
    deletGroup (tItem) {
      const index = this.checkList.findIndex((item) => item === tItem.id)
      this.checkList.splice(index, 1)
      this.updateSelect()
    },
    // 勾线单个
    selectIndex (tItem) {
      const index = this.checkList.findIndex((item) => item === tItem.id)
      if (index !== -1) {
        this.checkList.splice(index, 1)
      } else {
        this.checkList.push(tItem.id)
      }
      this.updateSelect()
    },
    confirmDialog () {
      // debugger
      this.$emit('submit', this.selectGroup)
    },
    cancleDialog () {
      this.$emit('close')
    },
    // 最新数组数据
    getNewuserList() {
      const arrs = [...this.selectGroup, ...this.userList]
      // 根据id去重
      const map = new Map()
      for (const item of arrs) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      this.userList = [...map.values()]
    }
  },
  watch: {
    chooseList:{
      handler (neVal, olVal) {
        this.selectGroup = neVal
        // this.getNewuserList() // 去除添加
        if (neVal.length === 0) {
          this.checkList = []
        } else {
          this.checkList = []
          neVal.forEach((element) => {
            this.checkList.push(element.id)
          })
        }
        // 判断全选不
        this.checkedAll = this.userList.length === this.checkList.length
      },
      deep: true,
      immediate: true
    },
    inputValue() {
      this.inputValue = this.inputValue.replace(/\s*/g,"");
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.$emit('getUserList', this.inputValue)
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
padding-top: 0px;
padding-bottom: 0px;
}
:deep(.el-dialog-div) {
  height: 558px;
}
.custom-checkbox-group {
  height: 469px;
  border-bottom: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;

  :deep(.el-dialog__body) {
    padding:0px 20px !important;
    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  }
  .left-tag-list {
    width: 50%;
    border-right: 1px solid #e9e9e9;
    min-height: 300px;
    float: left;
    box-sizing: border-box;
    :deep(.el-collapse-item__arrow) {
      display: none;
    }
    :deep(.el-collapse-item__header) {
      border-bottom: 1px solid #fff;
      height: 34px;
      line-height: 34px;
      &:hover {
        background: #f4f4f4;
      }
    }
    :deep(.el-button--small,
    .el-button--small.is-round) {
      padding: 0 8px;
    }
    .tag-btn {
      height: 22px;
      line-height: 22px;
      font-size: $--font-size-body-1;
    }
    :deep(.el-collapse-item__wrap) {
      border-bottom: 1px solid #fff;
    }
    :deep(.el-collapse) {
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    :deep(.el-collapse-item__content) {
      padding-bottom: 5px;
    }
    :deep(.el-input) {
      margin: 10px 0;
      width: 250px;
    }
    .bg-scroll {
      margin: 10px 0 0;
      height: 386px;
      overflow: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: hidden;
      overflow-y: auto;
      ul {
        padding: 10px 0;
      }
      li {
        cursor: pointer;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
      }
      .avatar-box {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        line-height: 1.5;
        .name, .nameTip{
          width: 250px;
          // height: 20px;
          font-size: $--font-size-body-2;
          // margin-left: 10px;
          color: #333;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
          white-space: nowrap;
          // border: solid 1px red;
        }
        .nameTip{
          margin: 0;
        }
      }
    }
    .errow-box {
      transition: transform 0.25s;
      -moz-transition: -moz-transform 0.25s; /* Firefox 4 */
      -webkit-transition: -webkit-transform 0.25s; /* Safari 和 Chrome */
      -o-transition: -o-transform 0.25s;
    }
    .noselect {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
    }
    .select {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
    }
  }
  .right-tag-list {
    width: 50%;
    float: right;
    padding:10px;
    box-sizing: border-box;
    .right-staff{
      margin: 10px 0px 0;
      height: 426px;
      overflow: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: hidden;
      overflow-y: auto;
    }
    ul {
      padding: 10px 0;
    }
    li {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      float: left;
      width: auto;
      background-color: #C5E3FF;
      margin: 7px;
      border-radius: 0px;
      color: #1890FF;
      cursor: pointer;
      width: 100%;
    }
    .avatar-box {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      width: 96%;
      .name,.nameTip{
        // width: 190px;
        height: 20px;
        font-size: $--font-size-body-2;
        // margin-left: 10px;
        color: #333;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: nowrap;
        color: #1890FF;
      }
      .nameTip{
        margin: 0;
      }
    }
  }
  .btnDiv {
    text-align: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .disabledTag {
    background: #f4f4f4;
    border-radius: 2px;
    font-weight: 400;
    color: #999;
    border: 1px solid #fff;
  }
  .selectTag {
    background: #c5e3ff;
    border-radius: 2px;
    font-weight: 400;
    color: #1890ff;
    border: 1px solid #fff;
  }
  .noselectTag {
    border-radius: 2px;
    border: 1px solid #1890ff;
    background: #fff;
    font-weight: 400;
    color: #1890ff;
  }
  .bottom-select-tag {
    background: #c5e3ff;
    border-radius: 2px;
    font-weight: 400;
    color: #1890ff;
    margin: 10px 10px 0 0;
    font-size: $--font-size-body-1;
    max-width: 100%;
    .title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.color-D9D {
  color:  #D9D9D9;
}
.list-data-box {
  position: relative;
}
.no-data {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);;
  -o-transform: translate(-50%, -50%);
  text-align: center;
  color: #999;
}
</style>
