<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="total"
        :rules="[{ required: true, message: '请输入' }]"
      >
        <a-input-number 
          v-model:value="formState.total"  
          addon-after="万元"
          @change="calculateResult" 
        />
      </a-form-item>
  
      <a-form-item
        label="系数"
        name="factor"
        :rules="[{ required: true, message: '请输入!' }]"
      >
        <a-input-number 
          v-model:value="formState.factor"  
          addon-after="%"
          @change="calculateResult"
        />
      </a-form-item>

      <a-form-item
        label="科技风险准备金"
        name="result"
        :rules="[{ required: false }]"
      >
      
        <a-tag color="processing">{{ formState.result }}万元</a-tag>
      </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类型
}

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

// 自动计算函数
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.factor = null;
  formState.result = null;
  calculateResult();
};
</script>