<template>
  <div class="uspreason-form">
    <el-dialog
      v-model="state.visible"
      destroy-on-close
      :title="title"
      draggable
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" size="default">
        <div class="form-section">
          <el-row :gutter="25">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="原因类型" prop="revokeType">
                <el-select v-model="form.revokeType" placeholder="请选择原因类型" style="width: 100%">
                  <el-option
                    v-for="item in state.revokeTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="原因描述" prop="revokeReason">
                <el-input
                  v-model="form.revokeReason"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入原因描述"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default" :loading="state.loading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineExpose, onMounted } from 'vue'
import { RevokeReasonApi } from '/@/api/admin/revoke-reason'
import type {
  RevokeReasonPageInput,
  RevokeReasonOutput,
  RevokeReasonPageDto,
  RevokeTypeEnumItem,
  RevokeReasonDto
} from '/@/api/types/RevokeType'
import eventBus from '/@/utils/mitt'

const props = defineProps<{ title: string }>()
const emit = defineEmits(['ok'])
const formRef = ref()
const state = reactive({
  visible: false,
  loading: false,
  revokeTypeOptions: [] as RevokeTypeEnumItem[]
})

const form = reactive<RevokeReasonDto>({
  revokeReason: '',
  revokeType: '',
  isDown: false,
  id: 0
})

const rules = {
  revokeReason: [{ required: true, message: '请输入原因描述', trigger: 'blur' }],
  revokeType: [{ required: true, message: '请选择类型', trigger: 'change' }]
}

// 获取撤回类型枚举列表
const getRevokeTypeOptions = async () => {
  try {
    const res = await new RevokeReasonApi().getRevokeTypeEnumList()
    if (res?.success && res.data) {
      state.revokeTypeOptions = res.data
    }
  } catch (error) {
    console.error('获取撤回类型枚举列表失败:', error)
  }
}

function open(row?: Partial<RevokeReasonDto>) {
  if (row) {
    Object.assign(form, row)
  } else {
    Object.assign(form, { revokeReason: '', revokeType: '', isDown: false, id: 0 })
  }
  state.visible = true
}

function onCancel() {
  state.visible = false
}

function onSubmit() {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) return
    state.loading = true
    try {
      if (form.id) {
        await new RevokeReasonApi().update(form)
      } else {
        await new RevokeReasonApi().add(form)
      }
      state.visible = false
      eventBus.emit('refreshUspReason')
    } finally {
      state.loading = false
    }
  })
}

onMounted(() => {
  getRevokeTypeOptions()
})

defineExpose({ open })
</script>

<style lang="scss" scoped>
.form-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-switch__label) {
  font-size: 13px;
}

:deep(.el-textarea__inner) {
  resize: none;
}
</style>
