<template>
  <div class="menu_permission">
    <ul class="floor_list first" v-if="data && data.length">
      <li v-for="(first_item, first_index) in data" :key="'p_' + first_index">
        <div class="floor_item first">
          <label
            class="el-checkbox apass_checkbox"
            :class="{ 'is-checked': first_item.selected }"
            @click="selectedItem(first_item)"
          >
            <span
              class="el-checkbox__input"
              :class="{ 'is-checked': first_item.selected }"
            >
              <span class="el-checkbox__inner"></span>
            </span>
            <span
              class="el-checkbox__label"
              v-text="first_item.menu_name"
            ></span>
          </label>
        </div>
        <ul
          class="floor_list second"
          v-if="first_item.Child && first_item.Child.length"
        >
          <li
            v-for="(second_item, second_index) in first_item.Child"
            :key="'p_' + first_index + '_' + second_index"
          >
            <div class="floor_item second">
              <label
                class="el-checkbox apass_checkbox"
                :class="{ 'is-checked': second_item.selected }"
                @click="selectedItem(second_item, first_item)"
              >
                <span
                  class="el-checkbox__input"
                  :class="{ 'is-checked': second_item.selected }"
                >
                  <span class="el-checkbox__inner"></span>
                </span>
                <span
                  class="el-checkbox__label"
                  v-text="second_item.menu_name"
                ></span>
              </label>
            </div>
            <ul
              class="floor_list third"
              v-if="second_item.Child && second_item.Child.length"
            >
              <li
                v-for="(third_item, third_index) in second_item.Child"
                :key="
                  'p_' + first_index + '_' + second_index + '_' + third_index
                "
              >
                <div class="floor_item third">
                  <label
                    class="el-checkbox apass_checkbox"
                    :class="{ 'is-checked': third_item.selected }"
                    @click="selectedItem(third_item, second_item, first_item)"
                  >
                    <span
                      class="el-checkbox__input"
                      :class="{ 'is-checked': third_item.selected }"
                    >
                      <span class="el-checkbox__inner"></span>
                    </span>
                    <span
                      class="el-checkbox__label"
                      v-text="third_item.menu_name"
                    ></span>
                  </label>
                </div>
                <ul
                  class="floor_list fourth"
                  v-if="third_item.Child && third_item.Child.length"
                >
                  <li>
                    <div class="floor_item fourth">
                      <label
                        v-for="(fourth_item, fourth_index) in third_item.Child"
                        :key="
                          'p_' +
                            first_index +
                            '_' +
                            second_index +
                            '_' +
                            third_index +
                            '_' +
                            fourth_index
                        "
                        class="el-checkbox apass_checkbox"
                        :class="{ 'is-checked': fourth_item.selected }"
                        @click="
                          selectedItem(
                            fourth_item,
                            third_item,
                            second_item,
                            first_item
                          )
                        "
                      >
                        <span
                          class="el-checkbox__input"
                          :class="{ 'is-checked': fourth_item.selected }"
                        >
                          <span class="el-checkbox__inner"></span>
                        </span>
                        <span
                          class="el-checkbox__label"
                          v-text="fourth_item.menu_name"
                        ></span>
                      </label>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  model: {
    prop: "data",
    event: "change-permissions",
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    selectedItem(
      selected_item,
      p_item = null, // 父元素
      gp_item = null, // 祖父元素
      ggp_item = null // 曾祖父元素
    ) {
      let selected = !(selected_item.selected || false);

      this.traverse(selected_item, (v) => {
        this.$set(v, "selected", selected);
      });

      if (p_item) {
        let selectedAll = true;

        p_item.Child.forEach((item) => {
          selectedAll = selectedAll && item.selected;
        });

        this.$set(p_item, "selected", selectedAll);
      }

      if (gp_item) {
        let selectedAll = true;

        gp_item.Child.forEach((item) => {
          selectedAll = selectedAll && item.selected;
        });

        this.$set(gp_item, "selected", selectedAll);
      }

      if (ggp_item) {
        let selectedAll = true;

        ggp_item.Child.forEach((item) => {
          selectedAll = selectedAll && item.selected;
        });

        this.$set(ggp_item, "selected", selectedAll);
      }

      this.$emit("change", this.data);
    },
    traverse(obj, cb) {
      cb(obj);

      if (obj.Child && obj.Child.length) {
        obj.Child.forEach((item) => {
          this.traverse(item, cb);
        });
      }
    },
  },
  watch: {
    data(value) {
      console.log("--- --- ---");
      console.log(value);
      console.log("--- --- ---");
    },
  },
};
</script>

<style scoped>
.floor_list > li {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.floor_list.first > li {
  border: 2px solid #f4f7fc;
  border-radius: 7px;
  overflow: hidden;
}
.floor_list:not(.first) {
  flex-grow: 1;
}
.floor_list:not(.first) > li {
  border-left: 2px solid #f4f7fc;
  border-top: 2px solid #f4f7fc;
  margin: -2px 0 0 -2px;
}
.floor_list.first > li:not(:first-child) {
  margin-top: 20px;
}
.floor_item {
  min-width: 230px;
  padding: 10px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floor_item.fourth {
  width: 100%;
  justify-content: flex-start;
}
.apass_checkbox {
  line-height: 40px;
}
</style>
