<template>
  <div class="linkk" ref="link" :style="style">
    <div class="left">
      <div class="title">
        <h1>执行动作入参数</h1>
      </div>
      <template v-for="(item, index) in leftData">
        <div
            class="treebox"
            @mouseenter="leftMouseenterHandle(item)"
            @mouseleave="leftMouseleaveHandle(item)"
        >
          <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
                :fill="item.stroke ? item.stroke : '#000000'"
                v-model="item.value"
                :disabled="!!lookFlag"
                @change="
                (val, $event) =>
                  leftCheckBoxHandle(val, item, $event, [item.id], item.label)
              "
            ></el-checkbox>
          </div>
        </div>
        <template v-if="item.children">
          <template v-for="(item01, index01) in item.children">
            <div
                class="treebox"
                @mouseenter="leftMouseenterHandle(item01)"
                @mouseleave="leftMouseleaveHandle(item01)"
            >
              <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
                    v-model="item01.value"
                    :disabled="!!lookFlag"
                    @change="
                    (val, $event) =>
                      leftCheckBoxHandle(
                        val,
                        item01,
                        $event,
                        [item.id, item01.id],
                        item.label + '.' + item01.label
                      )
                  "
                ></el-checkbox>
              </div>
            </div>
            <template v-if="item01.children">
              <template v-for="(item02, index02) in item01.children">
                <div
                    class="treebox"
                    @mouseenter="leftMouseenterHandle(item02)"
                    @mouseleave="leftMouseleaveHandle(item02)"
                >
                  <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
                        v-model="item02.value"
                        :disabled="!!lookFlag"
                        @change="
                        (val, $event) =>
                          leftCheckBoxHandle(
                            val,
                            item02,
                            $event,
                            [item.id, item01.id, item02.id],
                            item.label + '.' + item01.label + '.' + item02.label
                          )
                      "
                    ></el-checkbox>
                  </div>
                </div>
                <template v-if="item02.children">
                  <template v-for="(item03, index03) in item02.children">
                    <div
                        class="treebox"
                        @mouseenter="leftMouseenterHandle(item03)"
                        @mouseleave="leftMouseleaveHandle(item03)"
                    >
                      <div class="tree" style="margin-left: 45px">
                        <span>{{ item03.label }}</span>
                        <span
                            style="
                            font-size: 12px;
                            color: gray;
                            padding-left: 10px;
                          "
                        >{{ item03.type }}</span
                        >
                      </div>
                      <div class="btn">
                        <el-checkbox
                            v-model="item03.value"
                            :disabled="!!lookFlag"
                            @change="
                            (val, $event) =>
                              leftCheckBoxHandle(
                                val,
                                item03,
                                $event,
                                [item.id, item01.id, item02.id, item03.id],
                                item.label +
                                  '.' +
                                  item01.label +
                                  '.' +
                                  item02.label +
                                  '.' +
                                  item03.label
                              )
                          "
                        ></el-checkbox>
                      </div>
                    </div>
                  </template>
                </template>
              </template>
            </template>
          </template>
        </template>
      </template>
    </div>
    <div class="svg">
      <svg
          ref="svg"
          class="line"
          xmlns="http://www.w3.org/2000/svg"
          :style="{ height: svgHeight }"
          style="position: absolute; z-index: 2"
          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="{
            position: 'absolute',
            stroke: item.stroke,
            strokeWidth: item.width,
            zIndex: item.z,
          }"
        />

      </svg>
    </div>
    <div class="right">
      <div class="title">
        <h1>API入参</h1>
      </div>
      <template v-for="(item, index) in rightData">
        <div
            class="treebox"
            @mouseenter="rightMouseenterHandle(item)"
            @mouseleave="rightMouseleaveHandle(item)"
        >
          <div class="btn">
            <el-checkbox
                :disabled="!!lookFlag"
                size="mini"
                v-model="item.value"
                @change="
                (val, $event) =>
                  rightCheckBoxHandle(val, item, $event, [item.id], item.label)
              "
            ></el-checkbox>
          </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"
                @mouseenter="rightMouseenterHandle(item01)"
                @mouseleave="rightMouseleaveHandle(item01)"
            >
              <div class="btn">
                <el-checkbox
                    :disabled="!!lookFlag"
                    v-model="item01.value"
                    @change="
                    (val, $event) =>
                      rightCheckBoxHandle(
                        val,
                        item01,
                        $event,
                        [item.id, item01.id],
                        item.label + '.' + item01.label
                      )
                  "
                ></el-checkbox>
              </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"
                    @mouseenter="rightMouseenterHandle(item02)"
                    @mouseleave="rightMouseleaveHandle(item02)"
                >
                  <div class="btn">
                    <el-checkbox
                        :disabled="!!lookFlag"
                        v-model="item02.value"
                        @change="
                        (val, $event) =>
                          rightCheckBoxHandle(
                            val,
                            item02,
                            $event,
                            [item.id, item01.id, item02.id],
                            item.label + '.' + item01.label + '.' + item02.label
                          )
                      "
                    ></el-checkbox>
                  </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 v-if="item01.children">
                  <template v-for="(item03, index03) in item02.children">
                    <div
                        class="treebox"
                        @mouseenter="rightMouseenterHandle(item03)"
                        @mouseleave="rightMouseleaveHandle(item03)"
                    >
                      <div class="btn">
                        <el-checkbox
                            :disabled="!!lookFlag"
                            v-model="item03.value"
                            @change="
                            (val, $event) =>
                              rightCheckBoxHandle(
                                val,
                                item03,
                                $event,
                                [item.id, item01.id, item02.id, item03.id],
                                item.label +
                                  '.' +
                                  item01.label +
                                  '.' +
                                  item02.label +
                                  '.' +
                                  item03.label
                              )
                          "
                        ></el-checkbox>
                      </div>
                      <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>
                  </template>
                </template>
              </template>
            </template>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lookFlag: {
      type: [Boolean, String],
      default: false,
    },
    leftData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    rightData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      style: {
        "--clickBoxColor": "pink",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      leftActive: {},
      rightActive: {},
      line: [],
      leftActiveItem: {},
      rightActiveItem: {},
      svgHeight: 0,
    };
  },
  methods: {
    //左侧树鼠标移入事件（让线变红）
    leftMouseenterHandle(item) {
      if (item.isline) {
        let temp = this.line.find((ele) => {
          return ele.leftid == item.id;
        });
        if (temp) {
          temp.stroke = "red";
          temp.width = 2;
          temp.z = 9;
        }
      }
    },
    //左侧树鼠标移出事件
    leftMouseleaveHandle(item) {
      if (item.isline) {
        let temp = this.line.find((ele) => {
          return ele.leftid == item.id;
        });
        if (temp) {
          temp.stroke = "#409EFF";
          temp.width = 1;
          temp.z = 4;
        }
      }
    },
    //右侧树鼠标移入事件
    rightMouseenterHandle(item) {
      if (item.isline) {
        let temp = this.line.find((ele) => {
          return ele.rightid == item.id;
        });
        if (temp) {
          temp.stroke = "red";
          temp.width = 2;
          temp.z = 9;
        }
      }
    },
    //右侧树鼠标移出事件
    rightMouseleaveHandle(item) {
      if (item.isline) {
        let temp = this.line.find((ele) => {
          return ele.rightid == item.id;
        });
        if (temp) {
          temp.stroke = "#409EFF";
          temp.width = 1;
          temp.z = 4;
        }
      }
    },
    // 左侧数按钮点击事件
    leftCheckBoxHandle(val, item, e, arrId, name) {
      if (val) {
        let svginfo = this.$refs.svg.getBoundingClientRect();
        let info = e.target.getBoundingClientRect();
        this.leftActiveItem = item;
        this.leftActive["leftidarr"] = arrId;
        this.leftActive["leftid"] = item.id;
        this.leftActive["leftTitle"] = name;
        this.leftActive["x1"] = svginfo.x - info.x - 5;
        this.leftActive["y1"] = info.y - svginfo.y + 10;
        if (this.leftActive.leftid && this.rightActive.rightid) {
          let obj = {
            stroke: "#409EFF",
            width: 1,
            z: 4,
          };
          this.line.push({...this.leftActive, ...this.rightActive, ...obj});
          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) {
          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, arrId, name) {
      console.log(1)
      if (val) {
        let svginfo = this.$refs.svg.getBoundingClientRect();
        let info = e.target.getBoundingClientRect();
        this.rightActiveItem = item;
        this.rightActive["rightidarr"] = arrId;
        this.rightActive["rightid"] = item.id;
        this.rightActive["rightTitle"] = name;
        this.rightActive["x2"] = info.x - svginfo.x - 15;
        this.rightActive["y2"] = info.y - svginfo.y + 10;
        if (this.leftActive.leftid && this.rightActive.rightid) {
          let obj = {
            stroke: "#409EFF",
            width: 1,
            z: 4,
          };
          this.line.push({...this.leftActive, ...this.rightActive, ...obj});
          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) {
          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) {
    },
    resizeHeight() {

      this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
    },
    cleanActive(str) {
      if (str == "left") {
        this.leftActive = {};
        this.leftActiveItem = {};
      } else {
        this.rightActive = {};
        this.rightActiveItem = {};
      }
      this.line = [];
    },
    acivteData(flag, obj) {
      if (flag == "left") {
        this.leftActive = obj;
        this.leftActive["leftid"] = obj.id;
      } else {
        this.rightActive = obj;
        this.leftActive["rightid"] = obj.id;
      }
    },
  },
  mounted() {
    this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
  },
  watch: {
    line: {
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
        this.$emit("linechange", newV);
      },
    },
  },
};
</script>

<style scoped lang="scss">
.linkk {
  border-top: 1px solid #ccc;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;

  .left {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 0 20px 20px;
    width: 300px;

    .title {
      border-bottom: 1px solid #ccc;
      padding: 20px;
    }

    .treebox {
      margin-top: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
      }
    }
  }

  .right {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 20px 20px 0;
    width: 300px;

    .title {
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      padding: 20px;
    }

    .treebox {
      align-items: center;
      margin-top: 25px;
      display: flex;

      .btn {
        margin-right: 60px;
      }
    }
  }

  .svg {
    width: 250px;
  }

  svg {
    background-color: #f5f5f6;
    width: 250px;
    min-height: 300px;
  }

  line {
    transition: all 0.1s;
  }
}
</style>
