<template>
  <div class="link" ref="link">
    <div class="left">
      <div class="title">
        <h1>执行动作入参数</h1>
      </div>
      <template v-for="(item, index) in leftData">
        <div class="treebox">
          <div class="tree" :key="index">
            <span>{{ item.label }}</span>
            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
              item.type
            }}</span>
          </div>
          <div class="btn">
            <el-checkbox-button
              v-model="item.value"
              @change="(val, $event) => leftCheckBoxHandle(val, item, $event)"
              >+</el-checkbox-button
            >
          </div>
        </div>
        <template v-if="item.children">
          <template v-for="(item01, index01) in item.children">
            <div class="treebox">
              <div class="tree" style="margin-left: 15px">
                <span>{{ item01.label }}</span>
                <span
                  style="font-size: 12px; color: gray; padding-left: 10px"
                  >{{ item01.type }}</span
                >
              </div>
              <div class="btn">
                <el-checkbox-button
                  v-model="item01.value"
                  @change="
                    (val, $event) => leftCheckBoxHandle(val, item01, $event)
                  "
                  >+</el-checkbox-button
                >
              </div>
            </div>
            <template v-if="item01.children">
              <template v-for="(item02, index02) in item01.children">
                <div class="treebox">
                  <div class="tree" style="margin-left: 30px">
                    <span>{{ item02.label }}</span>
                    <span
                      style="font-size: 12px; color: gray; padding-left: 10px"
                      >{{ item02.type }}</span
                    >
                  </div>
                  <div class="btn">
                    <el-checkbox-button
                      v-model="item02.value"
                      @change="
                        (val, $event) => leftCheckBoxHandle(val, item02, $event)
                      "
                      >+</el-checkbox-button
                    >
                  </div>
                </div>
                <template v-if="item02.children">
                  <template v-for="(item03, index03) in item02.children">
                    <div class="treebox">
                      <div class="tree" style="margin-left: 30px">
                        <span>{{ item03.label }}</span>
                        <span
                          style="
                            font-size: 12px;
                            color: gray;
                            padding-left: 10px;
                          "
                          >{{ item03.type }}</span
                        >
                      </div>
                      <div class="btn">
                        <el-checkbox-button
                          v-model="item03.value"
                          @change="
                            (val, $event) =>
                              leftCheckBoxHandle(val, item03, $event)
                          "
                          >+</el-checkbox-button
                        >
                      </div>
                    </div>
                  </template>
                </template>
              </template>
            </template>
          </template>
        </template>
      </template>
    </div>
    <div class="svg" :style="{ height: svgHeight }">
      <svg
        ref="svg"
        class="line"
        xmlns="http://www.w3.org/2000/svg"
        :style="{ height: svgHeight }"
        style="position: absolute; z-index: 2; width: 300px"
        version="1.1"
      >
        <line
          v-for="item in line"
          :key="item.leftid"
          :x1="item.x1"
          :y1="item.y1"
          :x2="item.x2"
          :y2="item.y2"
          style="stroke: blue; stroke-width: 1; z-index: 999"
        />
      </svg>
    </div>
    <div class="right">
      <div class="title">
        <h1>API入参</h1>
      </div>
      <template v-for="(item, index) in rightData">
        <div class="treebox">
          <div class="btn">
            <el-checkbox-button
              size="mini"
              class="layers-item-selector"
              v-model="item.value"
              @change="(val, $event) => rightCheckBoxHandle(val, item, $event)"
              >+</el-checkbox-button
            >
          </div>
          <div class="tree" :key="index">
            <span>{{ item.label }}</span>
            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
              item.type
            }}</span>
          </div>
        </div>
        <template v-if="item.children">
          <template v-for="(item01, index01) in item.children">
            <div class="treebox">
              <div class="btn">
                <el-checkbox-button
                  v-model="item01.value"
                  @change="
                    (val, $event) => rightCheckBoxHandle(val, item01, $event)
                  "
                  >+</el-checkbox-button
                >
              </div>
              <div class="tree" style="margin-left: 15px">
                <span>{{ item01.label }}</span>
                <span
                  style="font-size: 12px; color: gray; padding-left: 10px"
                  >{{ item01.type }}</span
                >
              </div>
            </div>
            <template v-if="item01.children">
              <template v-for="(item02, index02) in item01.children">
                <div class="treebox">
                  <div class="btn">
                    <el-checkbox-button
                      v-model="item02.value"
                      @change="
                        (val, $event) =>
                          rightCheckBoxHandle(val, item02, $event)
                      "
                      >+</el-checkbox-button
                    >
                  </div>
                  <div class="tree" style="margin-left: 30px">
                    <span>{{ item02.label }}</span>
                    <span
                      style="font-size: 12px; color: gray; padding-left: 10px"
                      >{{ item02.type }}</span
                    >
                  </div>
                </div>
              </template>
            </template>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftData: [
        {
          label: "一级 1",
          id: 1,
          type: "Object",
          children: [
            {
              label: "二级 1-1",
              id: 2,
              type: "Object",
              children: [
                {
                  id: 3,
                  label: "三级 1-1-1",
                  type: "string",
                },
              ],
            },
          ],
        },
        {
          id: 4,
          label: "一级 2",
          type: "Object",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              type: "Object",
              children: [
                {
                  id: 6,
                  label: "三级 2-1-1",
                  type: "String",
                },
              ],
            },
            {
              id: 7,
              label: "二级 2-2",
              type: "Object",
              children: [
                {
                  id: 8,
                  label: "三级 2-2-1",
                  type: "String",
                },
              ],
            },
          ],
        },
        {
          id: 9,
          label: "一级 3",
          type: "Object",
          children: [
            {
              id: 10,
              label: "二级 3-1",
              type: "Object",
              children: [
                {
                  id: 11,
                  label: "三级 3-1-1",
                  type: "Object",
                },
              ],
            },
            {
              id: 12,
              label: "二级 3-2",
              type: "Object",
              children: [
                {
                  id: 13,
                  label: "三级 3-2-1",
                  type: "Object",
                },
              ],
            },
          ],
        },
      ],
      rightData: [
        {
          label: "一级 1",
          id: 1,
          type: "Object",
          children: [
            {
              label: "二级 1-1",
              id: 2,
              type: "Object",
              children: [
                {
                  id: 3,
                  label: "三级 1-1-1",
                  type: "string",
                },
              ],
            },
          ],
        },
        {
          id: 4,
          label: "一级 2",
          type: "Object",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              type: "Object",
              children: [
                {
                  id: 6,
                  label: "三级 2-1-1",
                  type: "String",
                },
              ],
            },
            {
              id: 7,
              label: "二级 2-2",
              type: "Object",
              children: [
                {
                  id: 8,
                  label: "三级 2-2-1",
                  type: "String",
                },
              ],
            },
          ],
        },
        {
          id: 9,
          label: "一级 3",
          type: "Object",
          children: [
            {
              id: 10,
              label: "二级 3-1",
              type: "Object",
              children: [
                {
                  id: 11,
                  label: "三级 3-1-1",
                  type: "Object",
                },
              ],
            },
            {
              id: 12,
              label: "二级 3-2",
              type: "Object",
              children: [
                {
                  id: 13,
                  label: "三级 3-2-1",
                  type: "Object",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      leftActive: {},
      rightActive: {},
      line: [],
      leftActiveItem: {},
      rightActiveItem: {},
      svgHeight: 0,
    };
  },
  methods: {
    leftCheckBoxHandle(val, item, e) {
      //   console.log(val, item.id, e);
      if (val) {
        let svginfo = this.$refs.svg.getBoundingClientRect();
        let info = e.target.getBoundingClientRect();
        this.leftActiveItem = item;
        this.leftActive["leftid"] = item.id;
        this.leftActive["x1"] = svginfo.x - info.x - 25;
        this.leftActive["y1"] = info.y - svginfo.y + 10;

        if (this.leftActive.leftid && this.rightActive.rightid) {
          //   let obj = {};
          //   obj["yOffset"] =
          //     Math.abs(this.rightActive["y2"] - this.leftActive["y1"]) / 2;
          //   obj["centerY "] =
          //     this.rightActive["y2"] < this.leftActive["y1"]
          //       ? this.rightActive["y2"] + obj["yOffset"]
          //       : this.rightActive["y2"] - obj["yOffset"];
          //   obj["xOffset"] =
          //     Math.abs(this.rightActive["x2"] - this.leftActive["x1"]) / 2;
          //   obj["centerX"] =
          //     this.rightActive["x2"] < this.leftActive["x1"]
          //       ? this.rightActive["x2"] + obj["xOffset"]
          //       : this.rightActive["x2"] - obj["xOffset"];
          this.line.push({ ...this.leftActive, ...this.rightActive });
          this.$set(this.leftActiveItem, "isline", true);
          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
          this.$set(this.rightActiveItem, "isline", true);
          this.leftActive = {};
          this.rightActive = {};
        }
        this.deepSearchBox(this.leftData, item.id);
      } else {
        if (item.isline) {
          console.log(item);
          this.line = this.line.filter((ele) => {
            return ele.leftid != item.id;
          });
          this.cloaseBox(this.rightData, item.rightid);
          item.isline = false;
        } else {
          this.leftActive = {};
          this.leftActiveItem = {};
        }
      }
    },
    rightCheckBoxHandle(val, item, e) {
      // console.log(val, item.id, e);
      if (val) {
        let svginfo = this.$refs.svg.getBoundingClientRect();
        let info = e.target.getBoundingClientRect();
        this.rightActiveItem = item;
        this.rightActive["rightid"] = item.id;
        this.rightActive["x2"] = info.x - svginfo.x;
        this.rightActive["y2"] = info.y - svginfo.y + 10;
        if (this.leftActive.leftid && this.rightActive.rightid) {
          this.line.push({ ...this.leftActive, ...this.rightActive });
          this.$set(this.leftActiveItem, "isline", true);
          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
          this.$set(this.rightActiveItem, "isline", true);
          item["isline"] = true;
          this.leftActive = {};
          this.rightActive = {};
        }
        this.deepSearchBox(this.rightData, item.id);
      } else {
        if (item.isline) {
          console.log(item);
          this.line = this.line.filter((ele) => {
            return ele.rightid != item.id;
          });
          this.cloaseBox(this.leftData, item.leftid);
          item.isline = false;
        } else {
          this.rightActive = {};
          this.rightActiveItem = {};
        }
      }
    },
    deepSearchBox(arr, id) {
      arr.forEach((item) => {
        if (item.id != id && item.value && !item.isline) {
          item.value = false;
        }
        if (item.children && item.children.length) {
          this.deepSearchBox(item.children, id);
        }
      });
    },
    cloaseBox(arr, id) {
      arr.some((item) => {
        if (item.id == id) {
          item.value = false;
          item.isline = false;
          return true;
        } else if (item.children && item.children.length) {
          this.cloaseBox(item.children, id);
        }
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  min-width: 700px;
}
.link {
  width: 100%;
  padding: 20px;
  display: flex;
  background-color: #fff;
  height: auto;
  .left {
    width: 300px;
    .title {
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
    }
    .treebox {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        margin-right: 5px;
      }
    }
  }
  .right {
    width: 300px;
    .title {
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
    }
    .treebox {
      align-items: center;
      margin-top: 30px;
      display: flex;
      .btn {
        margin-right: 60px;
      }
    }
  }
  .svg {
    width: 300px;
  }
  svg {
    background-color: #fafafa;
  }
}
</style>

<style lang="scss">
.el-checkbox-button__inner {
  width: 20px;
  height: 20px;
  line-height: 15px;
  background-color: #ffffff;
  border: solid 1px #cccccc;
  border-radius: 50% !important;
  font-size: 12px !important;
  cursor: pointer;
  padding: 0 !important;
  z-index: 3;
}
.layers-item-selector .is-checked {
  background-color: skyblue !important;
}
</style>
