<template>
  <div>
    <el-dialog :title="title" :visible.sync="isOpen" width="500px" append-to-body @close="cancel"
               :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="正样本数" prop="justSqmple">
          <el-input v-model="form.justSqmple" maxlength="8" placeholder="请输入正样本数"/>
        </el-form-item>
        <el-form-item label="负样本数" prop="loseSample">
          <el-input v-model="form.loseSample" maxlength="8" placeholder="请输入负样本数"/>
        </el-form-item>
        <el-form-item label="TP数量" prop="tpNum">
          <el-input v-model="form.tpNum" maxlength="8" placeholder="请输入TP数量"/>
        </el-form-item>
        <el-form-item label="TN数量" prop="tnNum">
          <el-input v-model="form.tnNum" maxlength="8" placeholder="请输入TN数量"/>
        </el-form-item>
        <el-form-item label="FP数量" prop="fpNum">
          <el-input v-model="form.fpNum" maxlength="8" placeholder="请输入FP数量"/>
        </el-form-item>
        <el-form-item label="FN数量" prop="fnNum">
          <el-input v-model="form.fnNum" maxlength="8" placeholder="请输入FN数量"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetails, addDetails, updateDetails } from '@/api/dataCenter/evaluateDetails'

export default {
  props: {
    open: { type: Boolean, required: true },
    getList: { type: Function, required: true },
    title: { type: String, required: true },
    evaluateId: { type: [Number, null], default: 0 },
    evaluateDetailId: { type: [Number, null], default: 0 }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('dialog-cancel')
      }
    }
  },
  data() {
    return {
      form: {},
      rules: {
        justSqmple: [
          { required: true, message: '请输入正样本数', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: 'blur' }
        ],
        loseSample: [
          { required: true, message: '请输入负样本数', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: 'blur' }
        ],
        tpNum: [
          { required: true, message: '请输入TP数量', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '只能输入正整数', trigger: 'blur' },
          { validator: this.validatePositiveSamples, trigger: 'blur' }
        ],
        fnNum: [
          { required: true, message: '请输入FN数量', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '只能输入正整数', trigger: 'blur' },
          { validator: this.validatePositiveSamples, trigger: 'blur' }
        ],
        tnNum: [
          { required: true, message: '请输入TN数量', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '只能输入正整数', trigger: 'blur' },
          { validator: this.validateNegativeSamples, trigger: 'blur' }
        ],
        fpNum: [
          { required: true, message: '请输入FP数量', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '只能输入正整数', trigger: 'blur' },
          { validator: this.validateNegativeSamples, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    isOpen(newVal) {
      if (newVal && this.evaluateDetailId) {
        getDetails(this.evaluateDetailId).then((res) => {
          this.form = res.data
        })
      }
    }
  },
  methods: {
    validatePositiveSamples(rule, value, callback) {
      console.log(this.form)
      const { tpNum, fnNum, justSqmple } = this.form

      // 转换为数值类型，避免字符串拼接导致的问题
      const tp = Number(tpNum)
      const fn = Number(fnNum)
      const just = Number(justSqmple)

      // 校验 TP + FN 是否等于正样本数
      if (tp + fn !== just) {
        callback(new Error('TP和FN之和必须等于正样本数'))
      } else {
        callback()
      }
    },

    validateNegativeSamples(rule, value, callback) {
      console.log(this.form)
      const { tnNum, fpNum, loseSample } = this.form

      // 转换为数值类型
      const tn = Number(tnNum)
      const fp = Number(fpNum)
      const lose = Number(loseSample)

      // 校验 TN + FP 是否等于负样本数
      if (tn + fp !== lose) {
        callback(new Error('FP和TN之和必须等于负样本数'))
      } else {
        callback()
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateDetails(this.form).then((res) => {
              this.$modal.msgSuccess('修改成功')
              this.isOpen = false
              this.getList()
            })
          } else {
            this.form.evaluateId = this.evaluateId
            addDetails(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.isOpen = false
              this.getList()
            })
          }
        }
      })
    },
    cancel() {
      this.isOpen = false
      this.resetForm()
    },
    resetForm() {
      this.form = {}
    }
  }
}
</script>


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