<template>
  <el-dialog :title="type === '1' ? '新建绑定白名单接口' : '新建绑定能力接口'" :visible.sync="dialogVisible" width="600px" @close="closeDialog">
    <div class="dialog-body">
      <div class="content">
        <div class="left-content">
          <div class="title">
            <h3><el-checkbox :indeterminate="isIndeterminate" v-model="checkedAll" @change="changeAllTree">所有API</el-checkbox></h3>
          </div>
          <div class="tree-content" v-loading="loading">
            <el-tree :props="props" :load="loadNode" node-key="id" lazy show-checkbox @check-change="handleCheckChange" ref="tree"> </el-tree>
          </div>
        </div>
        <div class="left-center">
          <el-button type="primary" :disabled="leftSelectList.length <= 0" @click="transferRight">转入<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-button type="primary" :disabled="rightSelectList.length <= 0" @click="transferLeft"><i class="el-icon-arrow-left el-icon--left"></i>移除</el-button>
        </div>
        <div class="right-content">
          <!-- <div class="title">
            <h3><el-checkbox :indeterminate="isIndeterminate" v-model="checkedAPI" @change="handleCheckAllChange">已选API</el-checkbox></h3>
          </div> -->
          <div class="list-content table-transfer">
            <template>
              <el-table ref="multipleTable" :data="rightList" tooltip-effect="dark" style="width: 100%" height="305" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="已选API" width="150">
                  <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
              </el-table>
            </template>
            <!-- <div v-for="(item, index) in rightList" :key="index">
              <el-checkbox v-model="item.select" :label="item.name" :key="item.id" class="el-checkbox el-transfer-panel__item" @change="val => handleCheckItemChange(val, item)">{{ item.name }}</el-checkbox>
              <span style="display:none">{{ refash }}</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="btnLoading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRequest } from '@/api/api';
// import clone from '../../../static/js/clone';
export default {
  props: {
    type: {
      type: String,
      default() {
        return 1;
      }
    },
    sceneCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      checkedAll: false,
      isIndeterminate: false,
      rightList: [],
      leftSelectList: [],
      rightSelectList: [],
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      loading: false,
      projectList: [],
      refash: false,
      btnLoading: false
    };
  },
  created() {
    this.dialogVisible = true;
  },
  methods: {
    changeAllTree(val) {
      if (!val) {
        this.$refs.tree.setCheckedKeys([]);
        this.leftSelectList = this.$refs.tree.getCheckedNodes();
      } else {
        this.$refs.tree.setCheckedNodes(this.projectList);
        this.leftSelectList = this.$refs.tree.getCheckedNodes();
      }
    },
    // 左侧选中
    handleCheckChange(data, checked, indeterminate) {
      this.leftSelectList = this.$refs.tree.getCheckedNodes();
      let count = 0;
      for (let item of this.leftSelectList) {
        if (
          this.leftSelectList.every(item => {
            return item.type !== 0;
          })
        ) {
          //选中的都不是一级的
          count = 1;
        } else {
          if (item.type === 0) {
            count = count + 1;
          }
        }
      }
      this.isIndeterminate = count > 0 && count < this.projectList.length;
      this.checkedAll = count === this.projectList.length ? true : false;
    },
    //转入
    transferRight() {
      this.rightList = this.leftSelectList.concat(this.rightList);
      this.rightList = this.rightList.filter(function(x, index, self) {
        return self.indexOf(x) === index;
      });
      //处理数据选中父级的过滤掉子级
      for (let i = 0; i < this.rightList.length; i++) {
        if (
          this.rightList.find(item => {
            return item.id === this.rightList[i].parentId;
          })
        ) {
          if (this.rightList[i].leaf) {
            //是叶子节点
            this.rightList.splice(i, 1);
            i = 0;
          }
        }
      }

      this.$refs.tree.setCheckedKeys([]);
      this.leftSelectList = [];
      this.checkedAll = false;
    },
    // 移除
    transferLeft() {
      for (let i = 0; i < this.rightSelectList.length; i++) {
        for (let j = 0; j < this.rightList.length; j++) {
          if (this.rightSelectList[i].id === this.rightList[j].id) {
            this.rightList.splice(j, 1);
            j = 0;
          }
        }
      }
      this.rightSelectList = [];
    },
    // 加载数据
    loadNode(node, resolve) {
      var that = this;
      if (node.level === 0) {
        this.loading = true;
        getRequest('/gateway-manage/plugin/interface/tree', {})
          .then(res => {
            if (res.data.code == '0000') {
              this.loading = false;
              if (res.data.result) {
                this.projectList = res.data.result;
              } else {
                this.projectList = [];
              }
              for (let item of this.projectList) {
                if (item.leafFlag === 0) {
                  item.leaf = false;
                } else {
                  item.leaf = true;
                }
                item.parentId = '';
              }
              return resolve(this.projectList);
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch(function(error) {
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });

        return resolve(this.projectList);
      }
      if (node.level > 2) return resolve([]);
      if (node.level === 1 || node.level === 2) {
        let params = {
          type: node.level - 1,
          id: node.data.id
        };
        let temArr = [];
        getRequest('/gateway-manage/plugin/interface/tree', params)
          .then(res => {
            if (res.data.code == '0000') {
              if (res.data.result) {
                temArr = res.data.result;
              } else {
                temArr = [];
              }
              for (let item of temArr) {
                if (item.leafFlag === 0) {
                  item.leaf = false;
                } else {
                  item.leaf = true;
                }
                item.parentId = node.data.id;
              }
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch(function(error) {
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
        setTimeout(() => {
          resolve(temArr);
        }, 2000);
      }
    },
    // 右侧选中
    handleSelectionChange(val) {
      this.rightSelectList = val;
    },
    submitForm() {
      var that = this;
      if (this.rightSelectList.length === 0) {
        this.$message.error('请选择要绑定的API');
        return false;
      }
      let projectIds = [];
      let groupIds = [];
      let interfaceIds = [];
      for (let item of this.rightSelectList) {
        if (item.type === 0) {
          projectIds.push(item.id);
        } else if (item.type === 1) {
          groupIds.push(item.id);
        } else if (item.type === 2) {
          interfaceIds.push(item.id);
        }
      }

      let params = {
        sceneCode: this.sceneCode
      };
      if (projectIds.length) {
        params.projectIds = projectIds.join(',');
      }
      if (groupIds.length) {
        params.groupIds = groupIds.join(',');
      }
      if (interfaceIds.length) {
        params.interfaceIds = interfaceIds.join(',');
      }
      let url = '';
      if (this.type === '1') {
        url = '/gateway-manage/platform/white/bind';
      } else if (this.type === '2') {
        url = '/gateway-manage/platform/capacity/bind';
      }
      this.btnLoading = true;
      getRequest(url, params)
        .then(res => {
          if (res.data.code == '0000') {
            this.dialogVisible = false;
            this.$emit('getList');
            this.btnLoading = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    closeDialog() {
      this.$emit('cancelBind');
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  .left-content {
    width: 200px;
    height: 305px;
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    .title {
      padding: 0 15px;
      height: 40px;
      line-height: 40px;
      background: #f1f3f7;
      border-bottom: 1px solid rgba(220, 223, 230, 1);
    }
    .tree-content {
      padding: 8px 5px;
      height: 240px;
      overflow-y: auto;
    }
  }
  .left-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    .el-button:first-child {
      margin-left: 8px;
      margin-bottom: 8px;
    }
  }
  .right-content {
    width: 200px;
    height: 305px;
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    margin-left: 8px;
    .list-content {
      .list-item {
        display: block;
      }
    }
  }
}
</style>
<style>
.table-transfer .el-table th.is-leaf,
.table-transfer .el-table td {
  border-bottom: none;
}
.table-transfer .el-table th {
  padding: 8px 0;
}
.table-transfer .el-table tr td {
  padding: 2px 0;
}
.table-transfer .el-table__empty-text::before {
  display: none;
}
</style>
