<script setup name="menuDialog">
import { getCurrentInstance, ref, watch } from 'vue'
import { getMenuDetail, editMenuDetail, saveNewMenu } from '@/http/apis/systemManage/menuManage'
const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close']),
  menuTree = ref([]),
  formRef = ref(),
  form = ref({
    path: undefined,
    title: undefined,
    name: undefined,
    menuType: undefined,
    component: undefined,
    icon: undefined,
    sort: undefined,
    activeMenu: undefined,
    id: undefined,
    pid: undefined,
    hidden: undefined,
    isShowTag: undefined
  }),
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const topMenu = form.value && form.value.pid ? getTopMenu(form.value.pid, toFlatTree(menuTree.value)) : form.value.path
        if (props.data && props.data.id) {
          await editMenuDetail({ ...form.value, pid: form.value.pid || undefined, sort: form.value.sort * 1, topMenu, name: form.value.path?.replace('/', '') || '' })
          proxy.$message.success('编辑成功！')
        } else {
          await saveNewMenu({ ...form.value, name: form.value.path?.replace('/', '') || '', pid: form.value.pid || undefined, sort: form.value.sort * 1, topMenu, id: undefined })
          proxy.$message.success('新增成功！')
        }
        emits('close', true)
      }
    })
  },

  // 获取顶级菜单
  getTopMenu = (id, flatTree) => {
    const parentId = flatTree.find(i => i.id === id)?.pid
    if (parentId === undefined) {
      return flatTree.find(i => i.id === id).path
    } else {
      getTopMenu(parentId, flatTree)
    }
  },
  toFlatTree = (tree) => {
    const list = []
    tree.forEach(item => {
      const o = JSON.parse(JSON.stringify(item))
      if (o.children) delete o.children
      list.push(o)
      if (item.children && item.children.length) {
        list.push(...toFlatTree(item.children))
      }
    })
    return list
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      const res = await getMenuDetail()
      menuTree.value = res.data
      if (props.data && props.data.id) {
        form.value = { ...props.data, pid: props.data.pid === undefined ? undefined : props.data.pid, children: undefined, isSelect: undefined }
      }
    } else {
      formRef.value.resetFields()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    :title="`${data && data.id ? '编辑' : '新增'}菜单`"
    width="600px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="100px"
      label-suffix=":"
    >
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入" :maxlength="50" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="form.menuType">
          <el-radio label="MENU">菜单</el-radio>
          <el-radio label="BUTTON">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="页面路径" prop="path">
        <el-input v-model="form.path" placeholder="请输入" :maxlength="100" />
      </el-form-item>
      <el-form-item label="component" prop="component">
        <el-input v-model="form.component" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="form.icon" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="activeMenu" prop="activeMenu">
        <el-input v-model="form.activeMenu" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="菜单排序" prop="sort">
        <el-input-number v-model="form.sort" placeholder="请输入" :min="1" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="pid">
        <el-tree-select
          v-model="form.pid"
          :data="menuTree"
          :props="{ label: 'title', value: 'id' }"
          check-strictly
          :render-after-expand="false"
          class="w-full"
        />
      </el-form-item>
      <el-form-item label="是否隐藏" prop="hidden">
        <el-radio-group v-model="form.hidden">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="false" label="是否显示标签" prop="isShowTag">
        <el-radio-group v-model="form.isShowTag">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
