<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 16:13:59
 * @LastEditors: 无尘
 * @LastEditTime: 2020-04-27 10:10:37
 -->
<!--

  <select-wx-depart :departArr="departArr" @refreshData="refreshData"></select-wx-depart>
  import selectWxDepart from '@/components/app/protectCard/select-wx-depart.vue';
  -->

<template>
  <el-dialog width="600px" title="选择部门" :visible.sync="departVisible" append-to-body :before-close="handleClose">
    <div class="depart-transfor">
      <div class="depart-transfor-left">
        <div class="transfor-header flex flex-space-between">
          <span class="font-14 color-303133">组织架构</span>
          <span class="font-12 color-909399"></span>
        </div>
        <div class="transfor-body">
          <div class="transfor-body-tree">
            <el-tree :data="groupData" :load="loadNode" :default-checked-keys="checkedKeys" node-key="departmentId" ref="groupTrees" check-strictly lazy show-checkbox :props="defaultProps" @check="checkGroup">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span :class="['font-14 p-r-10 iconfont', data.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', data.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
      <div class="depart-transfor-middle">
        <div class="m-b-10"><el-button :disabled="!groupNodes.length ? true : false" type="primary" icon="el-icon-arrow-right" @click="toRight">转入</el-button></div>
        <div><el-button :disabled="!checkList.length ? true : false" type="primary" icon="el-icon-arrow-left" @click="toLeft">移除</el-button></div>
      </div>
      <div class="depart-transfor-right">
        <div class="transfor-header flex flex-space-between">
          <span class="font-14 color-303133">已选</span>
          <span class="font-12 color-909399">{{ selDepart.length }}</span>
        </div>
        <div class="select-body">
          <div class="select-body-list">
            <el-checkbox-group v-model="checkList">
              <div>
                <el-checkbox :label="item.departmentId" v-for="(item, index) in selDepart" :key="index + 'sel'">{{ item.departmentName }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm('partForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'select-wx-depart',
  components: {},
  props: {
    departShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    departArr: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selDepart: [], // 右侧已选分组，
      groupNodes: [], // 左侧已选分组Nodes
      groupData: [], // 分组数据
      departVisible: false,
      checkedKeys: this.departArr.length ? this.departArr.map(ele => ele.departmentId) : [], // 默认回显勾选数据
      defaultProps: {
        children: 'children',
        label: 'departmentName',
        isLeaf: 'isLeaf'
      },
      checkList: [] // 右侧已选
    };
  },
  methods: {
    /**
     * 加载更多
     */
    async loadNode(node, resolve) {
      console.log('load:', node, resolve);
      const that = this;
      if (node.level === 0) {
        return resolve(that.getGroup());
      } else {
        await that.getGroup(node, node.data, resolve);
        that.checkedKeys = that.departArr.length ? that.departArr.map(ele => ele.departmentId) : [];
      }
    },
    /**
     *  选择 tree 节点,获取选择节点信息
     */
    checkGroup: function(e) {
      const that = this;
      that.groupNodes = that.$refs.groupTrees.getCheckedNodes();
    },
    /**
     * toright
     *
     */
    toRight() {
      const that = this;
      that.selDepart = that.$refs.groupTrees.getCheckedNodes();
    },
    /**
     * toleft
     *
     */
    toLeft() {
      const that = this;
      // 去掉右侧移除的数据
      let arr = [];
      that.selDepart.forEach(ele => {
        if (!that.checkList.includes(ele.departmentId)) {
          arr.push(ele);
        }
      });
      that.selDepart = arr;
      // 重新设置左侧已选数据
      that.$refs.groupTrees.setCheckedNodes(that.selDepart);
    },
    /**
     * 关闭弹窗
     */
    handleClose(done) {
      const that = this;
      that.$emit('refreshData', 'close');
      done();
    },
    cancel() {
      const that = this;
      that.$emit('refreshData', 'close');
    },
    /**
     * 确定保存
     */
    submitForm(form) {
      const that = this;
      if (!that.selDepart.length) {
        that.$message.error({
          duration: 1000,
          message: '请选择部门'
        });
        return false;
      }
      if (that.selDepart.length > 50) {
        that.$message.error({
          duration: 1000,
          message: '最多可选50个部门'
        });
        return false;
      }
      that.$emit('refreshData', that.selDepart);
    },
    /**
     * 获取门店分组
     */
    getGroup(node, data, resolve) {
      let that = this;
      let para = {
        parentId: data ? data.departmentId : '',
        isStore: 0
      };
      if (node && (!data.hasSonNode || data.isStore == 1)) {
        resolve([]);
        return false;
      }
      getRequest('/haoban-manage3-web/department-list-level', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.expand = false;
                ele.children = [];
                ele.label = ele.departmentName;
                ele.isLeaf = ele.hasSonNode ? false : true;
              });
            }
            if (node) {
              resolve(resData.result);
              if (!data.children) {
                that.$set(data, 'children', []);
              }
              data.children = resData.result || [];
              that.$forceUpdate();
              return false;
            }
            that.groupData = resData.result || [];
            console.log(that.groupData);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    departShow(newData) {
      const that = this;
      that.departVisible = newData;
    },
    departArr(newData) {
      const that = this;
      if (newData.length) {
        that.selDepart = JSON.parse(JSON.stringify(newData));
      }
    }
  },
  mounted() {
    const that = this;
    that.departVisible = that.departShow;
    that.getGroup();
    if (that.departArr.length) {
      that.selDepart = JSON.parse(JSON.stringify(that.departArr));
    }
  }
};
</script>
<style lang="less" scoped>
.depart-transfor {
  .transfor-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    background: rgba(245, 247, 250, 1);
  }
  .depart-transfor-left {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 400px;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
    .transfor-body {
      .transfor-body-tree {
        height: 360px;
        padding-top: 20px;
        box-sizing: border-box;
        overflow: auto;
      }
    }
  }
  .depart-transfor-middle {
    display: inline-block;
    vertical-align: middle;
    padding: 0 30px;
  }
  .depart-transfor-right {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 400px;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
    .select-body-list {
      height: 360px;
      padding-top: 20px;
      box-sizing: border-box;
      overflow: auto;
      .el-checkbox {
        display: block;
        line-height: 26px;
        margin-left: 16px;
      }
    }
  }
}

.w-95 {
  width: 95px;
}

.m-l-30 {
  margin-left: 30px;
}
</style>
