<template>
  <a-drawer
    v-model:visible="visible"
    :title="title"
    :mask-closable="false"
    :esc-to-close="false"
    :width="width >= 500 ? 500 : '100%'"
    @before-ok="save"
    @close="reset"
  >
    <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
      <fieldset>
        <legend>基础信息</legend>
        <a-form-item label="名称" field="roleName">
          <a-input v-model.trim="form.roleName" placeholder="请输入名称" :max-length="30" show-word-limit />
        </a-form-item>
        <a-form-item label="编码" field="roleCode">
          <a-input v-model.trim="form.roleCode" placeholder="请输入编码" :max-length="30" show-word-limit :disabled="isUpdate" />
        </a-form-item>
        <a-form-item label="权限字符" field="roleKey">
          <a-input v-model.trim="form.roleKey" placeholder="请输入权限字符" :max-length="30" show-word-limit :disabled="isUpdate" />
        </a-form-item>
        <a-form-item label="状态" field="status">
          <a-select v-model="form.status" placeholder="请选择状态">
            <a-option :value="0" label="正常" />
            <a-option :value="1" label="停用" />
          </a-select>
        </a-form-item>
        <a-form-item label="描述" field="remark">
          <a-textarea
            v-model.trim="form.remark"
            placeholder="请输入描述"
            show-word-limit
            :max-length="200"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </fieldset>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { type FormInstance, Message } from '@arco-design/web-vue'
import { useWindowSize } from '@vueuse/core'

import { useResetReactive } from '@/hooks'
import { addRoleNew, getRoleDetail, updateRoleNew } from '@/apis'

const emit = defineEmits<{
  (e: 'save-success'): void
}>()

const { width } = useWindowSize()

const dataId = ref('')
const visible = ref(false)
const isUpdate = computed(() => !!dataId.value)
const title = computed(() => (isUpdate.value ? '修改角色' : '新增角色'))
const formRef = ref<FormInstance>()

const rules: FormInstance['rules'] = {
  roleName: [{ required: true, message: '请输入角色名称' }],
  roleCode: [{ required: true, message: '请输入角色编码' }],
  roleKey: [{ required: true, message: '请输入角色权限字符' }],
}

const [form, resetForm] = useResetReactive({
  roleName: '',
  roleCode: '',
  roleKey: '',
  remark: '',
  status: 0,
})

// 重置
const reset = () => {
  formRef.value?.resetFields()
  resetForm()
}

// 保存
const save = async () => {
  const isInvalid = await formRef.value?.validate()
  if (isInvalid) return false
  try {
    const formData = {
      roleName: form.roleName,
      roleCode: form.roleCode,
      roleKey: form.roleKey,
      remark: form.remark,
      status: form.status,
    }
    if (isUpdate.value) {
      await updateRoleNew(dataId.value, formData)
      Message.success('修改成功')
    } else {
      await addRoleNew(formData)
      Message.success('新增成功')
    }
    emit('save-success')
    return true
  } catch (error) {
    return false
  }
}

// 新增
const onAdd = async () => {
  reset()
  dataId.value = ''
  visible.value = true
}

// 修改
const onUpdate = async (roleId: string) => {
  reset()
  dataId.value = roleId
  const { data } = await getRoleDetail(roleId)
  Object.assign(form, {
    roleName: data.roleName,
    roleCode: data.roleCode,
    roleKey: data.roleKey,
    remark: data.remark,
    status: Number(data.status),
  })
  visible.value = true
}

defineExpose({ onAdd, onUpdate })
</script>

<style scoped lang="scss">
fieldset {
  padding: 15px 15px 0 15px;
  margin-bottom: 15px;
  border: 1px solid var(--color-neutral-3);
  border-radius: 3px;
}
fieldset legend {
  color: rgb(var(--gray-10));
  padding: 2px 5px 2px 5px;
  border: 1px solid var(--color-neutral-3);
  border-radius: 3px;
}
</style>
