<template>
  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="drawerProps.title" v-bind="$attrs" destroy-on-close>
    <template #header="scope">
      <slot name="header" v-bind="scope">
        <div style="display: flex">
          <slot name="title">
            <span style="flex: 1">{{ drawerProps.title }}</span>
          </slot>
        </div>
      </slot>
    </template>

    <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :model="drawerProps.row" @submit.enter.prevent="handleConfirm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上级" prop="parentId">
            <el-tree-select
              v-model="drawerProps.row.parentId"
              :data="treeData"
              check-strictly
              placeholder="请选择上级"
              :render-after-expand="false"
              clearable
              :default-expand-all="true"
              :props="treeProps" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="drawerProps.row.title" placeholder="请填写名称" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="路由名称" prop="name">
            <el-input v-model="drawerProps.row.name" placeholder="请填写路由名称" clearable>
              <template #prepend>setup name=</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="drawerProps.row.menuType === 'L' ? '外联地址' : '路由地址'" prop="path">
            <el-input v-model="drawerProps.row.path" placeholder="请填写路由地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="路由参数" prop="queryParam">
        <el-input v-model="drawerProps.row.queryParam" placeholder="请填写路由参数" clearable />
      </el-form-item> -->
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="drawerProps.row.menuType">
          <el-radio-button :value="item.dictValue" v-for="(item, index) in menuTypes" :key="index" :label="item.dictLabel" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <IconChoose v-model="icon" placeholder="请填写图标" clearable />
      </el-form-item>
      <el-form-item v-if="drawerProps.row.menuType === 'M'" label="组件路径" prop="component">
        <el-select v-model="drawerProps.row.component" filterable allow-create placeholder="请选择或填写组件路径">
          <el-option v-for="item in componentPaths" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="显示状态" prop="visible">
            <el-radio-group v-model="drawerProps.row.visible">
              <el-radio-button :value="item.dictValue" v-for="(item, index) in showStatus" :key="index" :label="item.dictLabel" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="drawerProps.row.status">
              <el-radio-button :value="item.dictValue" v-for="(item, index) in commonStatus" :key="index" :label="item.dictLabel" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="drawerProps.row.orderNum" :precision="0" :min="0" :max="999999" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="drawerProps.row.menuType === 'M'">
        <el-col :span="8">
          <el-form-item label="是否缓存" prop="keepLive">
            <el-radio-group v-model="drawerProps.row.keepLive">
              <el-radio-button :value="item.dictValue" v-for="(item, index) in YES_NO" :key="index" :label="item.dictLabel" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否Layout" prop="displayLayout">
            <el-radio-group v-model="drawerProps.row.displayLayout">
              <el-radio-button :value="item.dictValue" v-for="(item, index) in YES_NO" :key="index" :label="item.dictLabel" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="固定标签页" prop="affix">
            <el-radio-group v-model="drawerProps.row.affix">
              <el-radio-button :value="item.dictValue" v-for="(item, index) in YES_NO" :key="index" :label="item.dictLabel" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="drawerProps.row.remark" placeholder="请填写备注" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <slot name="footer">
        <ElButton @click="drawerVisible = false">取 消</ElButton>
        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
      </slot>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts" name="MenuForm">
import MenuApi from '@/api/module/system/menu'
import { ResultEnum } from '@/enums/HttpEnum'
import { FormInstance } from 'element-plus'
import { useDictOptions } from '@/hooks'
import { MenuBO, MenuTreeVO } from '@/api/interface/system/menu'
import { buildComponentPaths } from '@/router/modules/dynamicRouter'
const componentPaths = buildComponentPaths()
const commonStatus = useDictOptions('COMMON_STATUS')
const YES_NO = useDictOptions('YES_NO')
const showStatus = useDictOptions('SHOW_STATUS')
const menuTypes = useDictOptions('MENU_TYPE')
const icon = ref('')

const rules = reactive({
  account: [{ required: true, message: '请填写账号' }],
  menuName: [{ required: true, message: '请填写姓名' }],
  status: [{ required: true, message: '状态不能为空' }]
})

interface EcoDrawerProps {
  api?: (params: any) => Promise<any> // 调用接口
  title: string // 顶部标题
  isView: boolean
  row: Partial<MenuBO>
  getTableList?: () => void
}

const treeData = ref<MenuTreeVO[]>([])
const treeProps = {
  label: 'title',
  value: 'menuId'
}

const drawerVisible = ref(false)
const drawerProps = ref<EcoDrawerProps>({
  isView: false,
  title: '',
  row: {}
})

// emit
const emit = defineEmits(['submit'])

// 接收父组件传过来的参数
const acceptParams = (params: EcoDrawerProps) => {
  drawerProps.value = params
  drawerVisible.value = true
  loadTree()
  drawerProps.value.row.status = drawerProps.value.row.status || '1'
  drawerProps.value.row.orderNum = drawerProps.value.row.orderNum || 0
  icon.value = drawerProps.value.row.icon || ''
}

const loadTree = () => {
  MenuApi.tree().then(res => {
    treeData.value = [
      {
        parentId: '-1',
        menuId: '0',
        title: '顶层',
        children: res.data
      }
    ]
  })
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleConfirm = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return
    try {
      drawerProps.value.row.icon = icon.value
      const { code } = await drawerProps.value.api!(drawerProps.value.row)
      if (code == ResultEnum.SUCCESS) {
        ElMessage.success({ message: `${drawerProps.value.title}成功！` })
        drawerProps.value.getTableList!()
        emit('submit')
        drawerVisible.value = false
      }
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams
})
</script>

<style scoped lang="scss"></style>
