<template>
  <Modal
    :options="getModalOptions"
    :on-close="handleClose"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
  >
    <template #Context>
      <n-form ref="formRef" :model="form" :rules="rules" require-mark-placement="left" :label-width="80" label-placement="left">
        <n-grid x-gap="12" :cols="2">
          <n-gi>
            <n-form-item label="上级菜单" path="pid">
              <n-select
                v-model:value="form.pid"
                :options="getMenuList"
                placeholder="请选择上级菜单"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜单类型" path="type">
              <n-radio-group v-model:value="form.type" name="type">
                <n-radio v-for="item in typeOptions" :key="item.key" :value="item.key">
                  {{ item.label }}
                </n-radio>
              </n-radio-group>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜单名称" path="title">
              <n-input v-model:value="form.title" placeholder="请输入菜单名称" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="打开方式" path="target">
              <n-radio-group v-model:value="form.target" name="target">
                <n-radio v-for="item in openOptions" :key="item.key" :value="item.key">
                  {{ item.label }}
                </n-radio>
              </n-radio-group>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜单图标" path="icon">
              <n-input v-model:value="form.icon" :disabled="form.type === 1" placeholder="请选择菜单图标" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="权限标识" path="permission">
              <n-input v-model:value="form.permission" :disabled="form.type === 0" placeholder="请输入权限标识" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="路由地址" path="path">
              <n-input v-model:value="form.path" :disabled="form.type === 1" placeholder="请输入路由地址" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="排序号" path="sort">
              <n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="组件路径" path="component">
              <n-input v-model:value="form.component" :disabled="form.type === 1" placeholder="请输入组件路径" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="是否可见" path="hide">
              <n-radio-group v-model:value="form.hide" name="hide">
                <n-radio v-for="item in visibleOptions" :key="item.key" :value="item.key">
                  {{ item.label }}
                </n-radio>
              </n-radio-group>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜单状态" path="status">
              <n-radio-group v-model:value="form.status" name="status">
                <n-radio v-for="item in statusOptions" :key="item.key" :value="item.key">
                  {{ item.label }}
                </n-radio>
              </n-radio-group>
            </n-form-item>
          </n-gi>

        </n-grid>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { defineComponent, computed, reactive, toRefs } from 'vue'
import Modal from '@/components/Modal/index.vue'
import { addMenu, editMenu } from '@/api/system/menu/index.js'
export default defineComponent({
  name: 'MenuModal',
  components: { Modal },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  emits: {
    'update:visible': null,
    'done': null
  },
  setup(props, { emit }) {
    const data = reactive({
      form: {
        title: '',
        icon: '',
        permission: '',
        path: '',
        component: '',
        hide: 0,
        status: 1
      },
      rules: {
        title: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          type: 'number',
          message: '请输入排序号',
          trigger: 'blur'
        }]
      },
      typeOptions: [
        { key: 0, label: '菜单' },
        { key: 1, label: '按钮' }
      ],
      openOptions: [
        { key: '1', label: '内部' },
        { key: '2', label: '外部' }
      ],
      visibleOptions: [
        { key: 0, label: '可见' },
        { key: 1, label: '不可见' }
      ],
      statusOptions: [
        { key: 1, label: '在用' },
        { key: 2, label: '停用' }
      ]
    })

    const getMenuList = computed(() => {
      const list = props.menuList.map((item) => {
        const menu = {
          label: item.title,
          value: item.id
        }
        return menu
      })
      return list
    })

    const getModalOptions = computed(() => {
      const row = props.data
      if (props.data.pid === 0) {
        row.pid = null
      }
      console.log('菜单页面计算属性触发：', row)
      return {
        title: props.data.title ? '修改菜单' : '添加菜单',
        show: props.visible,
        form: Object.assign(data.form, row),
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      getMenuList,
      getModalOptions,
      handleClose
    }
  },
  methods: {
    // 表单提交
    handleConfirm() {
      const type = this.data.title ? 'edit' : 'add'
      this.$refs.formRef.validate((errors) => {
        if (!errors) {
          if (type === 'add') {
            addMenu(this.form).then(res => {
              if (res.code === 0) {
                this.handleClose()
                this.$emit('done')
                $message.success(res.msg)
              } else {
                $message.error(res.msg)
              }
            }).catch(e => {
              console.log(e)
            })
          } else if (type === 'edit') {
            editMenu(this.form).then(res => {
              if (res.code === 0) {
                this.handleClose()
                this.$emit('done')
                $message.success(res.msg)
              } else {
                $message.error(res.msg)
              }
            })
          }
        } else {
          $message.error('请完善必填信息')
        }
      })
    }
  }
})
</script>
<style scoped lang='scss'>
</style>
