<template>
  <div class="meta-treeChecked-wrap">
    <div
      class="father"
      :class="outermost ? 'outermost' : ''"
      v-for="(item, index) in treeData"
      :key="index"
    >
      <div class="list-item">
        <div
          class="open-handle"
          @click="updataRequestEvent(item[checkedKey], 'show')"
        >
          <div class="open-icon">
            <svg-icon
              v-if="item.children && item.children.length"
              :icon-class="
                childIsShow.length && childIsShow.indexOf(item[checkedKey]) > -1
                  ? '下箭头'
                  : '右箭头'
              "
              :class="
                childIsShow.length && childIsShow.indexOf(item[checkedKey]) > -1
                  ? 'down-icon'
                  : 'right-icon'
              "
            ></svg-icon>
          </div>
          <div class="check-title">{{ item[checkedLabel] }}</div>
        </div>
        <div class="check-box">
          <van-checkbox
            :checked="
              itemIsCheck.length > 0 &&
              itemIsCheck.indexOf(item[checkedKey]) > -1
            "
            @click.stop="updataRequestEvent(item[checkedKey], 'check')"
          ></van-checkbox>
        </div>
      </div>
      <template v-if="item.children && item.children.length">
        <div
          class="children"
          v-show="
            childIsShow.length && childIsShow.indexOf(item[checkedKey]) > -1
          "
        >
          <meta-treeChecked
            :outermost="false"
            :pictureid="pictureid"
            :treeData="item.children"
            :checkedBoxDataKey="checkedKey"
            :checkKey="checkKey"
            :checkedLabel="checkedLabel"
          ></meta-treeChecked>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: "metaTreeCheckedOld",
  props: {
    // 是否为最外层的父节点
    outermost: {
      type: Boolean,
      default: true,
    },
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
      required: true,
    },
    // checkbox绑定的选中字段key
    checkedKey: {
      type: String,
      default: "",
      required: true,
    },
    // checkbox选中的数据映射的key
    checkKey: {
      type: String,
      default: "",
      required: true,
    },
    // 渲染提示信息需要的字段key
    checkedLabel: {
      type: String,
      default: "",
      required: true,
    },
    // 页面id
    pictureid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      checkboxListList: [],
      showChildList: [],
    };
  },
  computed: {
    itemIsCheck() {
      let defaultPictureId = this.defaultPictureId,
        defaultCheckKey = this.defaultCheckKey,
        TreeChecked =
          this.$store.getters.getTreeCheckedData[defaultPictureId] || {};
      if (TreeChecked[defaultCheckKey]) {
        return this.$store.getters.getTreeCheckedData[defaultPictureId][
          defaultCheckKey
        ];
      }
      return [];
    },
    childIsShow() {
      let defaultPictureId = this.defaultPictureId,
        defaultCheckKey = this.defaultCheckKey,
        showChildren =
          this.$store.getters.getShowChildListData[defaultPictureId] || {};
      if (showChildren[defaultCheckKey]) {
        return this.$store.getters.getShowChildListData[defaultPictureId][
          defaultCheckKey
        ];
      }
      return [];
    },
    defaultPictureId() {
      return this.pictureid || this.$getRouterInfo().name;
    },
    defaultCheckKey() {
      return this.checkKey;
    },
  },
  methods: {
    // 更新checkbox选中状态及树形展开状态
    updataRequestEvent(id, type) {
      let index = -1,
        requestList = [],
        defaultPictureId = this.defaultPictureId,
        defaultCheckKey = this.defaultCheckKey,
        commitDataKey = "";
      if (type == "check") {
        let TreeChecked =
          this.$store.getters.getTreeCheckedData[defaultPictureId] || {};
        requestList = JSON.parse(
          JSON.stringify(TreeChecked[defaultCheckKey] || [])
        );
        commitDataKey = "resetTreeCheckedData";
      } else if (type == "show") {
        let showChildren =
          this.$store.getters.getShowChildListData[defaultPictureId] || {};
        requestList = JSON.parse(
          JSON.stringify(showChildren[defaultCheckKey] || [])
        );
        commitDataKey = "resetShowChildListData";
      }
      if (requestList.length == 0) {
        requestList.push(id);
      } else {
        index = requestList.indexOf(id);
        if (index > -1) {
          // 已经存在了
          requestList.splice(index, 1);
        } else {
          requestList.push(id);
        }
      }
      this.$store.commit(commitDataKey, {
        data: JSON.parse(JSON.stringify(requestList)),
        pictureid: defaultPictureId,
        checkKey: defaultCheckKey,
      });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.meta-treeChecked-wrap {
  .father {
    background-color: #fff;
    border-radius: 2.13vw;
    margin-bottom: 2.13vw;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  .list-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .outermost {
    padding: 0 2.13vw;
    .list-item {
      width: calc(100% - 4.26vw);
    }
  }
  .open-handle {
    width: calc(100% - 10vw);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .open-icon {
    width: 3.2vw;
    height: 10.66vw;
    margin-right: 2.13vw;
    box-sizing: border-box;
    svg {
      margin-top: 4.4vw;
      height: 1.86vw;
    }
    .down-icon {
      width: 1.86vw;
      height: 3.23vw;
    }
    .right-icon {
      width: 3.23vw;
      height: 1.86vw;
    }
  }
  .check-title {
    width: calc(100% - 5.5vw);
  }
  .check-box {
    width: 10vw;
    height: 10.66vw;
    display: flex;
    align-items: center;
    justify-content: center;
    .van-checkbox {
      width: 5.33vw;
      height: 5.33vw;
    }
  }
  .children {
    margin-left: 3.2vw;
  }
}
</style>
