<template>
  <el-form
    v-loading="loading"
    element-loading-text="初始化数据中..."
    :model="menueForm"
    :inline="true"
    label-suffix=":"
    label-width="80px">
    <el-form-item label="菜单名">
      <el-input v-model="menueForm.name"></el-input>
    </el-form-item>
    <el-form-item label="路径">
      <el-input v-model="menueForm.path"></el-input>
    </el-form-item>
    <el-form-item label="所属">
      <el-select v-model="menueForm.parentId">
        <el-option label="顶级" :value="0"></el-option>
        <el-option
          :label="item.name"
          :value="((item.id) as number)"
          v-for="(item, index) in menues"
          :key="index">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="图标">
      <el-input v-model="menueForm.icon"></el-input>
    </el-form-item>
    <el-form-item label="是否显示">
      <el-switch v-model="menueForm.show"></el-switch>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { systemMenueType } from "@/types/systemMenue";
import api from "@/lib/request";

const props = defineProps<{
  data?: systemMenueType;
  executeType?: string;
}>();
const emits = defineEmits(["updateData"]);
let menues = ref<systemMenueType[]>([]);
let loading = ref(true);
let menueForm = ref<systemMenueType>({
  name: "",
  path: "",
  parentId: 0,
  icon: "",
  show: true,
});

if (props.executeType === "edit") {
  menueForm.value = { ...props.data };
}

watch(
  () => menueForm,
  (newVal) => {
    emits("updateData", newVal.value);
  },
  { deep: true }
);

onMounted(async () => {
  let respone = await api().get("/system-menue/list?all=true");
  menues.value = respone.data.list;

  loading.value = false;
});
</script>
<style lang="scss" scoped>
.el-input__wrapper {
  width: 200px;
}
.el-select {
  width: 192px;
}
</style>
