<template>
  <div style="padding: 0.5%">
    <!-- <el-col :span="12">
           <el-button type="primary" >新增</el-button>
        </el-col> -->
    <el-col :span="24" style="margin-top: 0.5%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          align="center"
          prop="num"
          label="序号"
          width="0"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="statisticalName"
          label="统计类型"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              size="small"
              >绑定用能指标</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-dialog
      :close-on-click-modal="false"
      title="电度统计指标配置"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- <el-transfer
                style="text-align: left; display: inline-block;  overflow: auto;"
                v-model="value"
                filterable
                :render-content="renderFunc"
                :titles="['未绑定指标', '已绑定指标']"
                :button-texts="['解绑', '绑定']"
                :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}'
                }"
                @change="handleChange"
                :data="zbdata">
                </el-transfer> -->
      <div class="box">
        <!-- lazy -->
        <!-- :lazyFn="lazyFn" -->
        <tree-transfer
          ref="wl-tree-transfer"
          filter
          draggable
          high-light
          check-strictly
          :mode="mode"
          :title="title"
          :button_text="['绑定', '解绑']"
          :to_data="toData"
          :from_data="fromData"
          :filterNode="filterNode"
          :defaultProps="defaultProps"
          :defaultCheckedKeys="defaultCheckedKeys"
          :defaultExpandedKeys="[2, 3]"
          @right-check-change="rightCheckChange"
          @left-check-change="leftCheckChange"
          @render-content="renderContent"
          @remove-btn="remove"
          @add-btn="add"
          node_key="id"
        >
        </tree-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submint">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import treeTransfer from "el-tree-transfer";
import api from "@/api/energy/sysconfig";
export default {
  computed: {
    title() {
      if (this.mode == "transfer") {
        return ["未绑定监测点", "已绑定监测点"];
      } else {
        return ["通讯录", "收件人", "抄送人", "密送人"];
      }
    },
  },
  components: { treeTransfer },
  data() {
    // const generateData = _ => {
    //   const data = [];
    //   for (var i=0;i<this.zbdata.length;i++) {
    //     this.zbdata.push({
    //       key: this.zbdata[i].id,
    //       label: this.zbdata[i].name,
    //      // disabled: i % 2 === 0
    //     });
    //   }
    //   return data;
    // };
    return {
      mode: "transfer", // transfer addressList
      defaultProps: {
        label: "name",
        children: "children",
        /* disabled(data) {
          return data.id === 2;
        }, */
      },
      fromData: [], // 穿梭框 - 源数据 - 树形
      toData: [], // 穿梭框 - 目标数据 - 树形
      fromArray: [
        {
          id: "1",
          name: "1",
          pid: "0",
        },
        {
          id: "2",
          name: "2",
          pid: "0",
        },
        {
          id: "1-1",
          name: "1-1",
          pid: "1",
        },
        {
          id: "1-2",
          name: "1-2",
          pid: "1",
        },
        {
          id: "1-1-1",
          name: "1-1-1",
          pid: "1-1",
        },
        {
          id: "1-1-1-1",
          name: "1-1-1-1",
          pid: "1-1-1",
        },
        {
          id: "2-1",
          name: "2-1",
          pid: "2",
        },
        {
          id: "2-2",
          name: "2-2",
          pid: "2",
        },
      ],
      toArray: [],
      defaultCheckedKeys: [], // 左侧默认选中数据
      dialogVisible: false,
      tableData: [],
      zbdata: [],
      bindId: [],
      // value: ['64592326d968dd07ffc0437befcfa026','100f4fadcf9a5e43b2b7b4161094cf1c'],
      rowId: "",
      renderFunc(h, option) {
        return <span>{option.label}</span>;
      },
    };
  },
  created() {},
  mounted() {
    this.queryData();
  },
  methods: {
    //获取指标树触发事件
    handleClick(row) {
      this.dialogVisible = true;
      this.rowId = row.statisticalId;
      var data = {
        statisticalId: row.statisticalId,
        statisticalName: row.statisticalName,
      };
      api.getEleStatisticalTree(data).then((res) => {
        if (res.code == "A0000") {
          //  var data = res.data
          var noBinds = res.data.noBinds;
          var binds = res.data.binds;
          var arrL = [];
          var arrR = [];
          if (noBinds !== null && binds !== null) {
            for (var j = 0; j < binds.length; j++) {
              var p = {
                id: binds[j].id,
                pid: 0,
                name: binds[j].name,
              };
              arrR.push(p);
            }
            this.toData = arrR;
            for (var i = 0; i < noBinds.length; i++) {
              var p = {
                id: noBinds[i].id,
                pid: 0,
                name: noBinds[i].name,
              };
              arrL.push(p);
            }
            this.fromData = arrL;
          } else {
            this.fromData = [];
            this.toData = [];
          }
        }
      });
    },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      console.log(movedKeys);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //获取列表数据
    queryData() {
      api.getEleStatisticalDetail().then((res) => {
        if (res.code == "A0000") {
          var arr = [];
          var data = res.data;
          for (var i = 0; i < data.length; i++) {
            var map = {
              num: i + 1,
              statisticalId: data[i].statisticalId,
              statisticalName: data[i].statisticalName,
            };
            arr.push(map);
          }
          this.tableData = arr;
        }
      });
    },
    //提交绑定
    submint() {
      this.dialogVisible = true;
      this.toData.forEach((item) => {
        this.bindId.push(item.id);
      });

      var data = {
        id: this.rowId,
        ids: this.bindId,
      };
      api.getEleStatisticalAdd(data).then((res) => {
        if (res.code == "A0000") {
          this.$message.success("绑定指标成功");
          this.dialogVisible = false;
        }
      });
    },
    // 获取选中
    getChecked() {
      const checkeds = this.$refs["wl-tree-transfer"].getChecked();
      console.log("获取选中：", checkeds);
    },
    // 设置选中
    setChecked() {
      this.$refs["wl-tree-transfer"].setChecked([3], [2]);
    },
    // 清除选中
    clearChecked() {
      this.$refs["wl-tree-transfer"].clearChecked();
    },
    // 自定义筛选函数
    filterNode(value, data, where) {
      console.log(value, data, where);
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    // 懒加载回调
    lazyFn(node, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 71272,
            pid: 7127,
            name: "debug22",
            // disabled: true,
            children: [],
          },
          {
            id: 71273,
            pid: 7127,
            name: "debug11",
            children: [],
          },
        ]);
      }, 500);
    },
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },
    // 添加按钮
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 移除按钮
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 左侧源数据选中事件
    leftCheckChange(nodeObj, treeObj, checkAll) {
      console.log(nodeObj);
      console.log(treeObj);
      console.log(checkAll);
    },
    // 右侧目标数据选中事件
    rightCheckChange(nodeObj, treeObj, checkAll) {
      console.log(nodeObj);
      console.log(treeObj);
      console.log(checkAll);
    },
    // 自定义节点 仅树形结构支持
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },
    // 标题自定义区点击事件
    handleTitleRight() {
      alert("标题自定义区点击事件");
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-transfer-panel__list {
  height: 20vh;
  overflow: auto;
  padding-top: 0;
}

.title {
  padding: 40px 0;
}
.box {
  width: 600px;
  margin: 0 auto;
  //height:50vh;
  text-align: left;
}

.btn {
  border: 1px solid #ebeef5;
  padding: 5px 10px;
  background-color: #f5f7fa;
  outline: none;
}

.my-title-right {
  float: right;
  font-size: 12px;
  cursor: pointer;
}

wl-transfer .el-tree {
  min-width: 100%;
  margin-bottom: 5px;

  // height: 50vh;
  display: inline-block !important;
}
::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: #f5f7fa;
  color: #000608;
  height: 22vh;
  overflow: auto;
}
::v-deep .wl-transfer .transfer-main {
  padding: 0px 10px 10px;
  height: 50vh;
  box-sizing: border-box;
  overflow: auto;
}
::v-deep .wl-transfer .transfer-title {
  border-bottom: 1px solid #ebeef5;
  padding: 0 15px;
  height: 40px;
  margin-top: -2px;
  line-height: 40px;
  color: #333;
  font-size: 16px;
  background-color: #f5f7fa;
}
</style>