<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-02-05 10:50:57
 * @LastEditors: 无尘
 * @LastEditTime: 2020-08-26 09:59:39
 -->
<!--
  设置成员所在部门（回收站）
  <set-department v-if="setVisible" @closeSet="closeSet"></set-department>
  import setDepartment from '@/components/set-department.vue';
  -->
<template>
  <el-dialog width="600px" title="设置成员所在部门" :visible.sync="setVisible" append-to-body :before-close="handleClose">
    <div class="select-search">
      <!-- 树形也自带有过滤搜索的方法 -->
      <el-input placeholder="请输入内容" maxlength="50" clearable v-model="searchSelect" style="width: 296px;" @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
    </div>
    <div class="select-tree-wrap m-t-20">
      <!-- <el-tree :data="treeData" node-key="groupId" ref="setTree" default-expand-all :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :class="['font-14 p-r-10 iconfont-hb3', node.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', node.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ node.label }}</span>
        </span>
      </el-tree> -->
      <el-tree :filter-node-method="filterNode" :data="groupData" :load="loadNode" node-key="departmentId" ref="groupTree" lazy default-expand-all :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :class="['font-14 p-r-10 iconfont-hb3', 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 slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable */
  import {
    _debounce
  } from '@/common/js/public';
  import {
    getRequest,
    postRequest
  } from '@/api/api';
  import errMsg from '@/common/js/error';
  import showMsg from '@/common/js/showmsg';
  export default {
    props: {
      recoverItem: {
        type: [Object, Array],
        default () {
          return {};
        }
      }
    },
    data() {
      return {
        setVisible: true,
        treeData: [],
        searchSelect: '', // 搜索字段
        selectId: '',
        groupData: [],
        groupDataCopy: [],
        defaultProps: {
          children: 'children',
          label: 'departmentName'
        }
      };
    },
    computed: {},
    watch: {
      searchSelect(val) {
        this.$refs.groupTree.filter(val);
      }
    },
    methods: {
      /**
       * 加载更多
       */
      async loadNode(node, resolve) {
        // console.log(node, resolve);
        const that = this;
        if (node.level === 0) {
          return resolve(that.getGroup());
        } else {
          await that.getGroup(node, node.data, resolve);
        }
      },
      /**
       * 关闭弹窗
       */
      handleClose(done) {
        const that = this;
        done();
        that.$emit('closeSet');
        that.selectId = '';
      },
      cancel() {
        const that = this;
        that.$emit('closeSet');
        that.selectId = '';
      },

      filterNode(value, data) {
        if (!value || !data.label) return true;
        return data.label.indexOf(value) !== -1;
      },
      /**
       * 输入
       */
      toInput: _debounce(function(e, value) {
        const that = this;
        if (!that.groupDataCopy.length) {
          return false;
        }
        // if (value == '') {
        //   that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
        //   return false;
        // }
        // let filterData = JSON.parse(JSON.stringify(that.groupDataCopy)).filter(ele => {
        //   return ele.departmentName.includes(value);
        // });
        // that.groupData = filterData;
      }, 200),
      /**
       * 清空
       */
      clearSearch() {
        const that = this;
        that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
      },
      /**
       * 点击 tree 数据
       */
      handleNodeClick(data) {
        const that = this;
        // console.log(data);
        that.selectId = data.departmentId;
        that.selectData = data;
      },
      /**
       * 获取tree 数据
       */
      /**
       * 获取门店分组
       */
      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;
                });
              }
              if (node) {
                resolve(resData.result);
                if (!data.children) {
                  that.$set(data, 'children', []);
                }
                data.children = resData.result || [];
                that.$forceUpdate();
                return false;
              }
              that.groupData = resData.result || [];
              // 存一份数据自己搜索
              that.groupDataCopy = JSON.parse(JSON.stringify(that.groupData));
              return;
            }
            errMsg.errorMsg(resData);
          })
          .catch(function(error) {
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      },

      /**
       * 确定恢复
       */
      submitForm() {
        const that = this;
        if (!that.selectId) {
          showMsg.showmsg('请选择部门', 'warning');
          return false;
        }
        if (that.selectData.isStore == 1) {
          showMsg.showmsg('禁止门店下面添加节点', 'warning');
          return false;
        }
        let params = {
          departmentId: that.recoverItem.departmentId,
          parentId: that.selectId
        };
        postRequest('/haoban-manage3-web/department-repair', params)
          .then(res => {
            let resData = res.data;
            if (resData.errorCode == 1) {
              showMsg.showmsg('恢复成功', 'success');
              that.$emit('closeSet', that.selectId);
            }
            errMsg.errorMsg(resData);
          })
          .catch(function(error) {
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      }
    },
    components: {},
    mounted() {
      const that = this;
      that.getGroup();
    }
  };
</script>
<style scoped>
  .m-t-5 {
    margin-top: 5px;
  }

  .dialog-top {
    margin-bottom: 20px;
  }

  .dialog-top img {
    width: 40px;
    height: 40px;
    border: 1px solid #e4e7ed;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }

  .dialog-top span {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
  }

  .select-info {
    display: inline-block;
    vertical-align: middle;
  }

  .dialog-operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .pagination-content {
    text-align: right;
  }

  .dialog-form {
    width: 430px;
    padding-top: 20px;
  }

  .w-215 {
    width: 215px;
  }

  .w-115 {
    width: 115px;
  }

  .select-tree-wrap {
    height: 445px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
  }
</style>
