<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-cascader
      class="el-cascader-zj"
      :placeholder="placeholder"
      :options="tableData"
      v-bind="$attrs"
      v-model="modelValue"
      @change="handleChange"
      :props="endProps"
      :filterable="filterable"
    />
    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from '@/constant';
import { ref, defineProps, defineEmits, defineExpose,computed } from "vue";
import { getSystemMeny } from "@/api/user-manage";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  multiple: {
    default: false,
    type: Boolean
  },
  filterable: {
    default: false,
    type: Boolean
  },
  modelValue: {
    default: [],
    type: Array
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const endProps = computed(() => {
  let re = { children: 'sysMenuList', value: 'id', label: 'menuName' }
  if (props.multiple === true) {
    re.multiple = true;
  }
  return re;
})
const tableData = ref([]);
const getSysMenuTree = async () => {
  const params = {
    menuName: "",
    current: 1,
    size: 999
  }
  const res = await getSystemMeny(params);
  tableData.value = res?.records;
};
getSysMenuTree();

const emits = defineEmits(["update:modelValue"]);
const handleChange = (e) => {
  if (props.multiple === true) {
    const data = e.map((item) => {
      return item[item.length - 1];
    });
    emits("update:modelValue", data);
  } else {
    const data = e ? e[e.length - 1] : ''
    emits("update:modelValue", data);
  }
};
</script>

<style lang="scss" scoped>
  .el-cascader-zj{
    width: 100%;

  }
</style>
