<template>
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      :layout="formState.layout"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
    <a-form-item label="业务中断造成的损失"  name="factor1" :rules="[{ required: true, message: '请输入!' }]" >
        <a-input-number v-model:value="formState.factor1"  addon-after="万元" @change="calculateResult" />
      </a-form-item>

      <a-form-item label="客户流失造成的损失"  name="factor2" :rules="[{ required: true, message: '请输入!' }]" >
        <a-input-number v-model:value="formState.factor2"  addon-after="万元" @change="calculateResult" />
      </a-form-item>

      <a-form-item label="收入减少"  name="factor3" :rules="[{ required: true, message: '请输入!' }]" >
        <a-input-number v-model:value="formState.factor3"  addon-after="万元" @change="calculateResult" />
      </a-form-item>

      <a-form-item label="声誉影响造成的损失"  name="factor4" :rules="[{ required: true, message: '请输入!' }]" >
        <a-input-number v-model:value="formState.factor4"  addon-after="万元" @change="calculateResult" />
      </a-form-item>

      <a-form-item label="监管处罚造成的损失"  name="factor5" :rules="[{ required: true, message: '请输入!' }]" >
        <a-input-number v-model:value="formState.factor5"  addon-after="万元" @change="calculateResult" />
      </a-form-item>
  
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">计算</a-button>
        <a-button style="margin-left: 10px" @click="resetFactors">重置</a-button>
      </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  total: number | null;  // 改为number类型
  factor: number | null; // 改为number类型
  result: number | null; // 改为number类型
  factor1:number | null; 
  factor2:number | null; 
  factor3:number | null; 
  factor4:number | null; 
  factor5:number | null; 
}

const formState = reactive<FormState>({
  layout:'horizontal',
  total: null,
  factor: null,
  result: 0.0,
  factor1:null,
  factor2:null,
  factor3:null,
  factor4:null,
  factor5:null,
});

// 自动计算函数
const calculateResult = () => {
  if (formState.total !== null && formState.factor !== null) {
    formState.result = formState.total * formState.factor / 100;
  } else {
    formState.result = null;
  }
};

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const resetFactors = () => {
  formState.total = null;
  formState.factor1 = null;
  formState.factor2 = null;
  formState.factor3 = null;
  formState.factor4 = null;
  formState.factor5 = null;
  formState.result = null;
  calculateResult();
};
</script>