<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 09:28:41
 * @Description: 菜单管理-新增编辑菜单
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <Drawer
    :drawer-visible="drawerVisible"
    width="480"
    :title="title"
    :loading="submitLoading"
    confirm-btn-text="保存"
    :cancel-btn="false"
    @confirm="handleConfirm"
    @close="close"
  >
    <t-form ref="formRef" label-align="top" class="login-form" :rules="rules" :data="formData">
      <t-form-item label="菜单名称" name="menuName">
        <t-input maxlength="20" v-model="formData.menuName" placeholder="请输入菜单名称"> </t-input>
      </t-form-item>
      <t-form-item label="路由名称" name="router">
        <t-input
          maxlength="50"
          v-model="formData.router"
          @change="
            () => {
              formData.menuSign = formData.router
            }
          "
          placeholder="请输入路由名称"
        >
        </t-input>
      </t-form-item>
      <t-form-item label="菜单层级" name="menuLevel">
        <t-radio-group v-model="formData.menuLevel" @change="changeMenuLevel">
          <t-radio :value="1">一级菜单</t-radio>
          <t-radio :value="2">二级菜单</t-radio>
          <t-radio :value="3">三级菜单</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item v-if="formData.menuLevel === 3" label="是否为按钮" name="isButton">
        <t-radio-group v-model="formData.isButton">
          <t-radio :value="1">是</t-radio>
          <t-radio :value="0">否</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item label="父级菜单" name="parentId" v-if="formData.menuLevel !== 1">
        <t-select v-model="formData.parentId" filterable clearable>
          <t-option v-for="v in LevelMenus" :key="v.menuId" :label="v.menuName" :value="v.menuId" />
        </t-select>
      </t-form-item>
      <t-form-item label="icon" name="icon">
        <t-input maxlength="50" v-model="formData.icon" placeholder="请输入图标名称"> </t-input>
      </t-form-item>
      <t-form-item label="菜单路径" name="menuPath">
        <t-input maxlength="50" v-model="formData.menuPath" placeholder="请填写菜单路径"> </t-input>
      </t-form-item>
    </t-form>
  </Drawer>
</template>

<script setup lang="ts" name="menu-edit">
import { FormProps, FormInstanceFunctions } from 'tdesign-vue-next'
import { ReqMenuEdit, ResMenu } from '@/api/interface/menu'
import { postMenuEdit, postMenuSave, getDiffLevelMenu } from '@/api/modules/menu'

const props = defineProps({
  tabType: {
    type: Number,
    default: 0
  }
})

const drawerVisible = ref(false)
const submitLoading = ref(false)

const formRef = useTemplateRef<FormInstanceFunctions>('formRef')
const formData = reactive<ReqMenuEdit>({
  htmlPlatform: '',
  icon: '',
  isButton: 0,
  menuId: '',
  menuLevel: 1,
  menuName: '',
  menuSign: '',
  menuPath: '',
  parentId: '',
  router: ''
})

const rules: FormProps['rules'] = {
  menuName: [
    {
      required: true,
      message: '请填写菜单名称！',
      trigger: 'blur'
    }
  ],
  router: [
    {
      required: true,
      message: '请填写路由名称！',
      trigger: 'blur'
    }
  ],
  menuLevel: [
    {
      required: true,
      message: '请选择菜单层级！',
      trigger: 'blur'
    }
  ],
  isButton: [
    {
      required: true,
      message: '请选择是否为按钮！',
      trigger: 'change'
    }
  ],
  parentId: [
    {
      required: true,
      message: '请选择父级菜单！',
      trigger: 'change'
    }
  ],
  icon: [
    {
      required: true,
      message: '请填写icon！',
      trigger: 'blur'
    }
  ],
  menuPath: [
    {
      required: true,
      message: '请填写菜单路径！',
      trigger: 'blur'
    }
  ]
}

const title = ref('新增菜单')
const open = (val: ResMenu | null) => {
  drawerVisible.value = true
  if (val) {
    title.value = '编辑菜单'
    for (const key in formData) {
      if (Object.prototype.hasOwnProperty.call(val, key)) {
        ;(formData as any)[key] = val[key] // 使用类型断言
      }
    }
    getLevelMenu()
  } else {
    title.value = '新增菜单'
  }
  formData.htmlPlatform = props.tabType
}
const close = () => {
  drawerVisible.value = false
  formRef.value?.reset()
  formData.menuLevel = 1
  formData.isButton = 0
  formData.menuId = ''
}

// 获取菜单大类
const LevelMenus = ref<ResMenu[]>([])
const getLevelMenu = () => {
  if (formData.menuLevel != 1) {
    getDiffLevelMenu({ tabType: props.tabType, menuLevel: (Number(formData.menuLevel) - 1) as number }).then(res => {
      LevelMenus.value = res.data
    })
  }
}
// 菜单层级变化
const changeMenuLevel = () => {
  if (formData.menuLevel === 3) {
    formData.isButton = 1
  } else {
    formData.isButton = 0
  }
  formData.parentId = ''
  getLevelMenu()
}

// 保存
const handleConfirm = () => {
  formRef.value?.validate().then(val => {
    if (val === true) {
      submitLoading.value = true
      const sumit = formData.menuId ? postMenuEdit : postMenuSave
      let form = { ...formData }
      form.router = formData.menuSign
      sumit(form)
        .then(() => {
          emit('success')
          close()
        })
        .finally(() => {
          submitLoading.value = false
        })
    }
  })
}

const emit = defineEmits<{
  success: []
}>()

defineExpose({
  open,
  close
})
</script>

<style lang="less" scoped>
:deep(.t-radio__label) {
  color: var(--td-font-gray-2);
}
</style>
