<script name="safetyInput" setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance(),
  formData = ref({
    safetyInput: [{}]
  }),
  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()
    }
  },
  rules = {
    safetyInputTitle: [
      { required: true, message: '请输入投入项', trigger: 'blur' }
    ],
    safetyInputDescribe: [
      { required: true, message: '请输入内容描述', trigger: 'blur' }
    ],
    safetyInputAmount: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { validator: moneyValidator, trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      safetyInput: data.safetyInputDescribe ? JSON.parse(data.safetyInputDescribe) : [{}]
    }
  },
  // 添加
  add = () => {
    if (formData.value.safetyInput.length >= 10) {
      proxy.$message.warning('最多添加10项')
      return
    }
    formData.value.safetyInput.push({})
  },
  // 删除
  del = (index) => {
    formData.value.safetyInput.splice(index, 1)
  }
defineExpose({ validForm, formData, setFormData })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
  >
    <div
      v-for="(item,index) in formData.safetyInput"
      :key="index"
      style="background: #f5f8fa"
      class="p-8 mb-16 relative"
    >
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item
            label="投入项"
            :prop="`safetyInput[${index}].safetyInputTitle`"
            :rules="{
              required: true,
              message: '请输入',
            }"
          >
            <el-input
              v-model="formData.safetyInput[index].safetyInputTitle"
              placeholder="请输入"
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="内容描述"
            :prop="`safetyInput[${index}].safetyInputDescribe`"
            :rules="{
              required: true,
              message: '请输入',
            }"
          >
            <el-input
              v-model="formData.safetyInput[index].safetyInputDescribe"
              :rows="4"
              maxlength="2000"
              type="textarea"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="金额(万元)"
            :prop="`safetyInput[${index}].safetyInputDescribe`"
            :rules="{
              required: true,
              message: '请输入',
            }"
          >
            <el-input-number
              v-model="formData.safetyInput[index].safetyInputAmount"
              placeholder="请填写"
              :min="0"
              :controls="false"
              @mousewheel.prevent
            />
          </el-form-item>
        </el-col>
      </el-row>
      <span v-if="formData.safetyInput.length>1" class="text-danger absolute right-8 top-8 cursor-pointer" @click="del(index)">删除</span>
    </div>
    <el-button
      type="primary"
      icon="Plus"
      plain
      @click="add"
    >添加投入项</el-button>
  </el-form>
</template>

<style lang="less">
.el-upload-list{
  width: 100%;
}
</style>
