<script name="projectCollectionEnterBudgetInfo" setup>
import { ref, watch } from 'vue'
import store from '@/store'

const { budgetSourceOptions } = store.dictStore.globalDicts || {}
const props = defineProps({
    detail: {
      type: Object
    }
  }),
  formRef = ref(),
  moneyValidator = (rule, value, callback) => { // 金额校验
    if (!value) callback()
    if (!/^\d+(\.\d{1,6})?$/.test(value)) {
      callback('请输入正确格式，最多保留六位小数')
    } else if (value * 1 >= 100000000) {
      callback('请输入正确格式，小于100000000')
    } else {
      callback()
    }
  },
  formData = ref({}),
  rules = {
    declareAmount: [{ required: true, message: '请填写申报金额', trigger: 'blur' }, { validator: moneyValidator, trigger: 'blur' }],
    approvalAmount: [{ required: true, message: '请填写批复金额', trigger: 'blur' }, { validator: moneyValidator, trigger: 'blur' }],
    budgetSource: [{ required: true, message: '请选择预算来源', trigger: 'change' }],
    projectYear: [{ required: true, message: '请选择预算年度', trigger: 'blur' }]
  }
defineExpose({ formRef, formData })
watch(() => props.detail, val => {
  if (val) {
    formData.value = {
      declareAmount: val.declareAmount,
      approvalAmount: val.approvalAmount,
      budgetSource: val.budgetSource,
      projectYear: `${val.projectYear}`
    }
  }
})
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="top"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="40">
      <el-col :span="6">
        <el-form-item label="申报金额" prop="declareAmount">
          <el-input-number
            v-model="formData.declareAmount"
            class="input-amount"
            placeholder="请填写"
            :min="0.000001"
            :controls="false"
            @mousewheel.prevent
          >
            <template #suffix>万元</template>
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="批复金额" prop="approvalAmount">
          <el-input-number
            v-model="formData.approvalAmount"
            class="input-amount"
            placeholder="请填写"
            :min="0.000001"
            :controls="false"
            @mousewheel.prevent
          >
            <template #suffix>万元</template>
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预算来源" prop="budgetSource">
          <el-select
            v-model="formData.budgetSource"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(v,k) in budgetSourceOptions"
              :key="k"
              :label="v"
              :value="k*1"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预算年度" prop="projectYear">
          <el-date-picker
            v-model="formData.projectYear"
            type="year"
            placeholder="请选择"
            format="YYYY"
            value-format="YYYY"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

</template>
