<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        :rules="rules"
        :on-positive-click="handleConfirm"
        :on-negative-click="handleClose"
      >
        <n-form-item label="角色编号:" path="code">
          <n-input
            v-model:value="form.code"
            clearable
            :maxlength="20"
            placeholder="请输入角色编号"
          />
        </n-form-item>
        <n-form-item label="角色名称:" path="name">
          <n-input
            v-model:value="form.name"
            clearable
            :maxlength="20"
            placeholder="请输入角色名称"
          />
        </n-form-item>
        <n-form-item label="状态" path="status">
          <n-radio-group
            v-model:value="form.status"
          >
            <n-radio :value="1">正常</n-radio>
            <n-radio :value="2">禁用</n-radio>
          </n-radio-group>
        </n-form-item>
        <n-form-item
          label="备注:"
        >
          <n-input
            v-model:value="form.note"
            type="textarea"
            :rows="3"
            :maxlength="200"
            placeholder="请输入备注"
          />
        </n-form-item>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { defineComponent, computed, reactive, toRefs } from 'vue'
import Modal from '@/components/Modal/index.vue'
import { addRole, editRole } from '@/api/system/role/index'
export default defineComponent({
  name: 'RoleModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null,
    'done': null
  },
  setup(props, { emit }) {
    const data = reactive({
      form: {
        code: '',
        name: '',
        status: 1,
        note: ''
      },
      rules: {
        code: [
          { required: true, message: '请输入角色编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
        ]
      }
    })
    const getModalOptions = computed(() => {
      return {
        title: Object.keys(props.row).length === 0 ? '添加角色' : '编辑角色',
        show: props.visible,
        form: Object.assign(data.form, props.row),
        negativeText: '取消',
        positiveText: '确认'
      }
    })

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

    return {
      getModalOptions,
      handleClose,
      ...toRefs(data),
      rules: reactive({
        code: [
          { required: true, message: '请输入角色编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
        ]
      })
    }
  },
  methods: {
    // 表单提交
    handleConfirm() {
      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
      this.$refs.formRef.validate((errors) => {
        if (!errors) {
          if (type === 'add') {
            addRole(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') {
            editRole(this.form).then(res => {
              if (res.code === 0) {
                this.handleClose()
                this.$emit('done')
                $message.success(res.msg)
              } else {
                $message.error(res.msg)
              }
            })
          }
        }
      })
    }
  }
})
</script>
<style scoped lang='scss'>
</style>
