<template>
  <div class="shy-tree">
    <div v-if="value && value.length > 0">
      <div v-for="item in value" :key="item.updatetime" class="shy-tree-node">
        <i
          v-if="item.child && item.child.length > 0"
          v-show="level < 3"
          :class="iconFont[index].down"
          style="font-size: 18px; margin-right: 10px"
          @click="
            openChildren(item.id, item.pid, level, item.child && item.child.length > 0)
          "
        />
        <i
          v-else
          v-show="level < 3"
          :class="iconFont[index].up"
          style="font-size: 18px; margin-right: 10px"
          @click="
            openChildren(item.id, item.pid, level, item.child && item.child.length > 0)
          "
        />
        <i
          v-if="item.menu_img"
          v-show="level < 3"
          :class="item.menu_img"
          @click="
            openChildren(item.id, item.pid, level, item.child && item.child.length > 0)
          "
        />
        <span
          class="label"
          @click="
            openChildren(item.id, item.pid, level, item.child && item.child.length > 0)
          "
        >
          {{ item.menu_name || item.action_name }}
        </span>
        <span class="btn-list">
          <el-button
            v-if="level < 3 && powers.some((i) => i == '003')"
            type="success"
            size="mini"
            @click="addEdit('0', item.id, level + 1, false, true, {})"
          >
            添加
          </el-button>
          <el-button
            v-if="powers.some((i) => i == '005')"
            type="warning"
            size="mini"
            @click="
              addEdit(
                item.id,
                level === 3 ? item.menuid : item.pid,
                level,
                false,
                false,
                item
              )
            "
          >
            修改
          </el-button>
          <el-button
            v-if="powers.some((i) => i == '004')"
            :type="item.status === '1' ? 'primary' : 'info'"
            size="mini"
            @click="
              remove(item.id, level === 3 ? item.menuid : item.pid, level, item.status)
            "
          >
            {{ item.status === "1" ? "禁用" : "启用" }}
          </el-button>
          <el-button
            v-if="powers.some((i) => i == '006')"
            type="danger"
            size="mini"
            @click="
              deleteMenu(
                item.id,
                level === 3 ? item.menuid : item.pid,
                level,
                item.status
              )
            "
          >
            删除
          </el-button>
        </span>
        <shy-tree
          v-if="item.child && item.child.length > 0"
          :value="item.child"
          :level="level + 1"
          @addEdit="addEdit"
          @openChildren="openChildren"
          @remove="remove"
          @deleteMenu="deleteMenu"
        />
      </div>
    </div>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
<script>
import shyTree from "./main.vue";
export default {
  name: "shyTree",
  components: {
    shyTree,
  },
  props: ["value", "level"],
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "menuOperator") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      newValue: "",
      index: 0, // icon 箭头
      iconFont: [
        {
          down: "el-icon-arrow-up",
          up: "el-icon-arrow-down",
        },
        {
          down: "el-icon-folder-remove",
          up: "el-icon-folder-add",
        },
        {
          down: "el-icon-minus",
          up: "el-icon-plus",
        },
        {
          down: "iconfont icon-jiantouxia",
          up: "iconfont icon-up",
        },
      ],
    };
  },
  methods: {
    addEdit(id, pid, level, isDetail, isAdd, formData) {
      this.$emit("addEdit", id, pid, level, isDetail, isAdd, formData);
    },
    editInterface(id) {
      this.$emit("editInterface", id);
    },
    openChildren(id, pid, level, isOpen) {
      if (level === 3) return false;
      this.$emit("openChildren", id, pid, level, isOpen);
    },
    remove(id, pid, level, status) {
      this.$emit("remove", id, pid, level, status);
    },
    deleteMenu(id, pid, level, status) {
      this.$emit("deleteMenu", id, pid, level, status);
    },
  },
};
</script>
<style lang="scss">
.shy-tree {
  margin-left: 10px;
  cursor: pointer;
  // border: 1px solid #ccc;
  // border-radius: 6px;
  .no-data {
    text-align: center;
    line-height: 50px;
    color: #666;
    margin: 20px 0 0 0;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .el-button--mini {
    padding: 6px 10px;
    margin-top: 5px;
  }
  .shy-tree-node:nth-of-type(odd) {
    background: rgba(75, 157, 177, 0.1);
  }
  .shy-tree-node:nth-of-type(even) {
    background: rgba(249, 168, 110, 0.1);
  }
  .shy-tree-node {
    display: block;
    margin: 5px 0 5px 5px;
    padding-left: 5px;
    line-height: 35px;
    i {
      font-size: 22px;
      width: 22px;
      margin: auto;
    }
    .label {
      font-size: 16px;
    }
    .btn-list {
      display: block;
      float: right;
    }
  }
}
</style>
