<template>
  <BasicDialog ref="basicDialogRef" title="物资领用通知" @refresh="refreshFormData">
    <template #form>
      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
        <template #noticeScope>
          <el-radio-group v-model="ruleFormData.noticeScope">
            <el-radio v-for="item in notifyRangeOptions" :key="item.value" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </template>
      </BasicForm>
    </template>
    <template #footer>
      <el-button @click="basicDialogRef?.closeDialog">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </BasicDialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ElMessage, ElRadioGroup, ElRadio } from 'element-plus';
  import BasicDialog from '@/components/BasicDialog.vue';
  import BasicForm from '@/components/BasicForm.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { NOTIFY_DEPARTMENT_FORM_CONFIG, NOTIFY_DEPARTMENT_FORM_DATA, NOTIFY_DEPARTMENT_FORM_RULES } from '../config';
  import { NOTIFY_RANGE, NOTIFY_RANGE_OPTIONS } from '../constant';
  import { notifySupplyRequestDetail } from '@/api/emergency-supplier';

  const emits = defineEmits<{
    (e: 'success'): void;
  }>();

  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  const tmpDetailId = ref<number | undefined>(undefined);

  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook(
    NOTIFY_DEPARTMENT_FORM_CONFIG,
    NOTIFY_DEPARTMENT_FORM_DATA,
    NOTIFY_DEPARTMENT_FORM_RULES,
  );

  const notifyRangeOptions = ref<{ label: string; value: number }[]>(NOTIFY_RANGE_OPTIONS);

  // 打开对话框
  const openDialog = (id: number) => {
    tmpDetailId.value = id;
    basicDialogRef.value?.openDialog();
  };

  // 提交表单
  const handleSubmit = async () => {
    const validate = await basicFormRef.value?.validateForm();
    if (!validate) return;

    if (!tmpDetailId.value) {
      ElMessage.error('缺少必要参数');
      return;
    }

    try {
      await notifySupplyRequestDetail({
        detailId: tmpDetailId.value,
        noticeScope: ruleFormData.noticeScope,
        requestTime: ruleFormData.requestTime,
        requestLocation: ruleFormData.requestLocation,
      });
      ElMessage.success('通知成功');
      basicDialogRef.value?.closeDialog();
      // 清理数据
      tmpDetailId.value = undefined;
      ruleFormData.noticeScope = NOTIFY_RANGE.ALL;
      ruleFormData.requestTime = '';
      ruleFormData.requestLocation = '';
      // 触发父组件刷新列表
      emits('success');
    } catch (error) {
      console.error('通知失败:', error);
      ElMessage.error('通知失败');
    }
  };

  // 刷新表单数据（在对话框打开时调用，用于清除验证状态）
  const refreshFormData = () => {
    basicFormRef.value?.clearValidate();
  };

  defineExpose({
    openDialog,
  });
</script>

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