<template>
  <div>
    <div class="dialogs">
      <eno-dialog :title="translateText" width="640px" top="5vh" @confirm-click="confirmClick" :show.sync="worktableFlag">
        <div class="tree-transfer">
          <div class="treeleft">
            <div class="title">已选择 {{ workContent.length }} 项</div>
            <slot></slot>
          </div>
          <div class="treeright">
            <div class="nodata" v-if="!workContent">
              <i class="el-icon-document"></i>
              <span>暂无数据</span>
            </div>
            <div class="powerList" v-else>
              <div class="work-content">
                <div v-for="(item, index) in workContent" :key="index" draggable :data-seq="index" @dragstart="dragStart" @dragover="dragMove" @dragend="dragEnd">
                  <el-tag closable @close="handleClose(item, index)" type="info" :data-seq="index">
                    {{ item.name }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </eno-dialog>
    </div>

  </div>
</template>
<script>
export default {
  name:'enoTransfer',
  data() {
    return {
      worktableFlag: false,
    }
  },
  props: {
    workContent: {
      type: Array,
      default: () => {
        return []
      },
    },
    translateText: {
      type: String,
      default: '',
    },
    workDefaultIdList: {
      type: Array,
      default: () => {
        return []
      },
    }
  },
  watch: {
    workContent: {
      handler(newValue, oldValue) {
        this.workContent = newValue;
      },
      deep: true
    }
  },
  methods: {
    //
    dragStart(e) {
      this.dragNodeIndex = e.target.dataset.seq;
      this.dragNode = this.dataList[this.dragNodeIndex];
    },
    //
    dragMove(e) {
      this.targetNodeIndex = e.target.dataset.seq;
      this.dataList = this.dataList.filter(value => {
        return value.menuId !== this.dragNode.menuId
      });
      this.dataList.splice(this.targetNodeIndex, 0, this.dragNode);
    },
    //
    dragEnd() {
      this.$emit('update:tagList', this.dataList);
    },
    // 快捷功能-工作台保存
    confirmClick() {
      this.worktableFlag = false
      this.$message({
        message: '保存成功',
        type: 'success',
      })
      this.$emit('saveInfo')
    },
    //  删除标签
    handleClose(item, index) {
      let workindex = '';
      this.workDefaultIdList.forEach((item, i) => {
        if (item === this.workContent[index].menuId) {
          workindex = i
        }
      });
      this.workDefaultIdList.splice(workindex, 1);
      this.workContent.splice(index, 1);
      this.$emit('workDefault', this.workDefaultIdList, true)
    }
  }
}
</script>
<style scoped lang="less">
.butstyle {
  margin-top: 3px;
  margin-bottom: 3px;
  display: flex;
  margin-left: 18px;
}
.dialogs {
  .tree-transfer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    .treeleft {
      width: 300px;
      height: 500px;
      border: solid 1px #ebebeb;
      border-top: none;

      .title {
        padding: 0 24px;
        height: 40px;
        line-height: 40px;
        background: #f5f8ff;
        color: #181e29;
      }

      .treeData {
        height: calc(100% - 40px);

        .tree-container {
          height: 100%;
          overflow: auto;
        }
        ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        ::-webkit-scrollbar-thumb {
          background-color: #9093994d;
          border-radius: 10px;
        }
        /deep/.el-tree {
          overflow: initial;
          .el-tree-node {
            .el-tree-node__content {
              padding-left: 1px !important;
              .el-checkbox {
                &.is-disabled {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .treecenter {
      display: flex;
      align-items: center;
      justify-content: center;

      .box {
        width: 24px;
        height: 24px;
        background: #d9d9d9;
        margin: 0 16px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        i {
          color: #fff;
        }

        &:hover {
          background-color: #4880ff;
        }
      }
    }

    .treeright {
      width: 212px;
      height: 500px;
      border: solid 1px #ebebeb;
      .nodata {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        i {
          color: #b2b2b1;
          font-size: 38px;
        }

        span {
          font-size: 13px;
          color: #828282;
          margin-top: 13px;
        }
      }

      .powerList {
        padding: 24px;
        height: 100%;
        overflow: auto;

        /deep/.el-tag {
          padding: 0 16px;
          height: 32px;
          line-height: 32px;
          margin-bottom: 12px;
        }
      }
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      ::-webkit-scrollbar-thumb {
        background-color: #9093994d;
        border-radius: 10px;
      }
    }
  }
}
/deep/.el-dialog__wrapper .el-dialog .el-dialog__bod {
  height: 600px !important;
}
</style>


