<template>
  <div class="select-res">
    <el-cascader
      clearable
      filterable
      :value="value"
      placeholder="请选择资源"
      :options="resourceList"
      :props="{
        value: 'id',
        label: 'name',
        multiple: true,
        emitPath: false,
        expandTrigger: 'hover',
      }"
      v-bind="$attrs"
      v-on="$listeners"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import { getResourceGroup } from "@/api/system";
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      default: "",
    },
    dict: {
      type: Object,
      default: () => {},
    },
    form: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      resourceList: [], // 资源列表
    };
  },

  created() {
    this.getResourceGroup();
  },
  methods: {
    // 获取资源列表
    async getResourceGroup() {
      this.loading = true;
      let res = await getResourceGroup({
        page: 1,
        size: -1,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.resourceList = this.formatGroup(data);
      }
    },
    // 格式化分组
    formatGroup(data) {
      let arr = [];
      Object.keys(data).forEach((key, index) => {
        let group = {};
        group = {
          name: key,
          id: -index,
          children: [],
        };
        group.children.push(...data[key]);
        arr.push(group);
      });
      return arr;
    },
    handleChange(value) {
      this.$emit("change", value);
    },
  },
};
</script>

<style lang="less" scoped>
.select-res,
:deep(.el-cascader) {
  width: 100%;
}
</style>
