<template>
  <div class="ContainerBox">
    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row type="flex" justify="space-between" align="middle">
        <!-- <el-button @click="patchDel">选择显示层级</el-button> -->
        <el-button @click="showdialog = true">选择显示范围</el-button>

        <el-select
          style="margin: 0 16px; width: 250px"
          @change="change"
          multiple
          collapse-tags
          v-model="value1"
          multiple
          placeholder="选择显示字段"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <!-- <el-button :type="!disabled ? 'primary' : ''" @click="canUpdate"
          >修改上下级关系</el-button
        >
        <el-button v-if="!disabled" type="success" @click="save"
          >保存上下级关系</el-button
        >
        <el-button v-if="!disabled" type="success" @click="restore"
          >恢复上下级关系</el-button
        > -->
        <el-col style="display: flex; justify-content: end">
          <el-button @click="download">下载当前架构图</el-button>
        </el-col>
      </el-row>
    </section>

    <!-- 内容区域 -->
    <section class="contentBox">
      <zm-tree-org
        :disabled="true"
        @on-zoom="onZoom"
        :only-one-node="false"
        :node-draggable="false"
        :clone-node-drag="false"
        :data="tempDataTree"
        :on-drag-stop="onDragStop"
        collapsable
        :default-expand-level="100000000"
      >
        <template slot-scope="{ node }">
          <div class="node">
            <div :class="node.root ? ' title title-top' : ' title title-child'">
              <span>{{ node.label }}</span>
              <!-- <span
                class="tip"
                v-show="value1.includes('0') || value1.includes('2')"
                >部门</span
              > -->
            </div>
            <div class="main">
              <div v-show="value1.includes('1') || value1.includes('0')">
                <span class="ix">组织编码：</span>
                <span>{{ node.code || "-" }}</span>
              </div>
              <div v-show="value1.includes('0') || value1.includes('3')">
                <span class="ix">联系人：</span>
                <span>{{ node.contactName || "-" }}</span>
              </div>
              <div v-show="value1.includes('0') || value1.includes('4')">
                <span class="ix">员工数：</span>
                <span>{{ node.statistics?.countOfMembers || "-" }}</span>
              </div>
            </div>
          </div>
        </template>
      </zm-tree-org>
    </section>
    <el-dialog
      v-dialogDrag
      title="选择显示范围（点击以选择）"
      center
      width="40%"
      :visible="showdialog"
      @close="showdialog = false"
      :close-on-click-modal="false"
    >
      <div style="padding: 18px 32px; max-height: 50vh; overflow: auto">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input1"
        >
        </el-input>
        <el-tree
          class="tree"
          highlight-current
          empty-text="暂无数据"
          node-key="id"
          :default-expanded-keys="[dataTree.id]"
          :data="dataTreeList"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          ref="treel"
        >
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ok">确 定</el-button>
        <el-button @click="showdialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getORGList } from "@/api/staffApi.js";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      node: null,
      showdialog: false,
      value1: ["0"],
      input1: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      options: [
        {
          value: "0",
          label: "全部显示",
        },
        {
          value: "1",
          label: "组织编码",
        },
        {
          value: "2",
          label: "组织类型",
        },
        {
          value: "3",
          label: "联系人",
        },
        {
          value: "4",
          label: "员工数",
        },
      ],
      zoom: 1,
      dataTree: {},
     dataTreeList:[],
      tempDataTree: {},
      copyTempDataTree: {},
      disabled: true,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },

  components: {},
  created() {
    this.getAllData();
  },
  watch: {
    input1(val) {
        this.$refs.treel.filter(val);
      }
    },
  methods: {
    getAllData() {
      getORGList().then((response) => {
        if (response.data) {
          this.mapData([response.data]);

          this.tempDataTree =this.dataTree = response.data;
          this.dataTreeList=[response.data]


        }
      });
    },
    mapData(data,pid=null) {
      //只为上级组织做数据
      data.forEach((ex) => {
        ex.value = ex.selectedOrganizationId;
        ex.label = ex.selectedOrganizationName;
        ex.pid=pid

        if (ex.children?.length) {
          this.mapData(ex.children,ex.id);
        } 
      });
    },
    handleNodeClick(v) {
      this.node = v;
    },
    filterNode(value, data) {
      console.log(value, data);
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

    ok() {
      if (!this.node) return this.$message.error("请点击树以选择");

      this.tempDataTree = this.node;
    },
    chooseMatch() {},
    change() {
      if (!this.value1.length) {
        this.$message.error("请至少选择一个");
        this.value1 = ["0"];
      }
    },
    canUpdate() {
      this.disabled = !this.disabled;
      this.copyTempDataTree = JSON.parse(JSON.stringify(this.tempDataTree));
    },
    restore() {

      this.getAllData()
    },
    save() {
      this.$message.success("保存成功");

      // this.copyTempDataTree = JSON.parse(JSON.stringify(this.tempDataTree));
    },
    onDragStop(v){
      console.log(v);
    },
    onZoom(v) {
      this.zoom = v;
      console.log(234);
    },

    dragStop() {
      console.log(22);
    },

    download() {
      if (this.zoom != 1) return this.$message.error("请先缩放到100%");
      html2canvas(document.querySelector(".tree-org")).then(function (canvas) {
        // 使用toDataURL方法将图像转换被base64编码的URL字符串
        var url = canvas.toDataURL("image/png");
        // 生成一个a元素
        var a = document.createElement("a");
        // 创建一个单击事件
        var event = new MouseEvent("click");

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || "下载图片名称";
        // 将生成的URL设置为a.href属性
        a.href = url;

        // 触发a的单击事件
        a.dispatchEvent(event);
      });
    },
  },
};
</script>
<style lang="scss">
.tree {
  color: gray;
  margin-top: 16px;
}
.node {
  width: 250px;
  border-radius: 10px;
  box-shadow: hsla(0, 0%, 99%, 0.836) 6px 6px 6px;
  background: white;

  .tip {
    background: #fafafa5b;
    border-radius: 6px;
    padding: 4px;
  }

  .ix {
    color: gray;
    line-height: 1.5;
  }

  .main {
    padding: 6px;
    text-align: left;
  }

  .title {
    border-radius: 10px 10px 0 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }

  .title-top {
    background: #578af7;
  }

  .title-child {
    background: #19be6b;
  }
}

.contentBox {
  height: 70vh;
  // overflow: hidden;
}

.ContainerBox {
  .remarkBox {
    .remarkInfo {
      background: #fafafa;
      color: #666666;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      line-height: 30px;
      padding: 10px;
      display: flex;

      .el-icon-flag {
        margin-top: 9px;
        color: #ffc108;
        margin-right: 10px;
      }
    }
  }

  .primaryColor {
    color: #108ee9;
  }

  .dangerColor {
    color: red;
  }

  .bluelink {
    color: #409eff;
  }

  .TableSelectBox {
    display: flex;
    background: #e6f3fc;
    color: #666666;
    border: 1px solid #d4f0fc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0;

    span {
      line-height: 20px;

      i {
        margin-left: 5px;
        margin-right: 5px;
        color: #2e8ad7;
      }
    }
  }
}

.displayOrderInput {
  display: flex;
  align-items: center;

  i {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
