<template>
  <el-form
    ref="revenusForm"
    size="small"
    label-width="170px"
    :rules="rules"
    :model="form"
  >
    <el-form-item label="Doctor ID: " prop="Id" style="position: relative">
      <el-input disabled />
      <span style="position: absolute;left: 10px;top: 50%;transform: translateY(-50%)">{{ form.ReviewerCode }}</span>
    </el-form-item>
    <el-form-item label="Name: " prop="Indication" style="position: relative">
      <el-input disabled />
      <span style="position: absolute;left: 10px;top: 50%;transform: translateY(-50%)">{{ form.LastName + form.FirstName }}</span>
    </el-form-item>
    <el-form-item label="Name CN: " prop="Indication" style="position: relative">
      <el-input disabled />
      <span style="position: absolute;left: 10px;top: 50%;transform: translateY(-50%)">{{ form.ChineseName }}</span>
    </el-form-item>
    <el-form-item label="Dispaly All: ">
      <el-switch v-model="isDispaly" />
    </el-form-item>
    <el-form-item
      label="Training ($): "
      prop="Training"
    >
      <el-input
        v-model="form.Training"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item label="Refresher Training ($): " prop="RefresherTraining">
      <el-input
        v-model="form.RefresherTraining"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item
      v-if="(!isDispaly && form.Expedited == 0) || isDispaly"
      label="Timepoint ($): "
      prop="Timepoint"
    >
      <el-input
        v-model="form.Timepoint"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>

    <el-form-item
      v-if="(!isDispaly && form.Expedited == 2) || isDispaly"
      label="Timepoint 48H ($): "
      prop="Timepoint48H"
    >
      <el-input
        v-model="form.Timepoint48H"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item
      v-if="(!isDispaly && form.Expedited == 1) || isDispaly"
      label="Timepoint 24H ($): "
      prop="Timepoint24H"
    >
      <el-input
        v-model="form.Timepoint24H"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item
      v-if="(!isDispaly && form.Expedited == 0 && form.ReviewMode == 'Double review with adjudication') || (isDispaly && form.ReviewMode == 'Double review with adjudication')"
      label="Adjudication ($): "
      prop="Adjudication"
    >
      <el-input
        v-model="form.Adjudication"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>

    <el-form-item
      v-if="(!isDispaly && form.Expedited == 2 && form.ReviewMode == 'Double review with adjudication') || (isDispaly && form.ReviewMode == 'Double review with adjudication')"
      label="Adjudication 48H ($): "
      prop="Adjudication48H"
    >
      <el-input
        v-model="form.Adjudication48H"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item
      v-if="(!isDispaly && form.Expedited == 1 && form.ReviewMode == 'Double review with adjudication') || (isDispaly && form.ReviewMode == 'Double review with adjudication')"
      label="Adjudication 24H ($): "
      prop="Adjudication24H"
    >
      <el-input
        v-model="form.Adjudication24H"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>
    <el-form-item label="Global ($): " prop="Global">
      <el-input
        v-model="form.Global"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>

    <el-form-item label="Downtime ($): " prop="Downtime">
      <el-input
        v-model="form.Downtime"
        type="number"
        oninput="this.value=this.value.replace(/[^\d.]/g,'');"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" :disabled="btnDisabled" @click="handleSave">Save</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { addOrUpdateEnroll } from '@/api/financials'
// const regx = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/
const regx = /^([1-9]\d*(\.\d+)?|0)$/
export default {
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        Training: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        RefresherTraining: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Timepoint: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Timepoint24H: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Timepoint48H: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Adjudication: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Adjudication24H: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Adjudication48H: [
          { required: true, trigger: 'blur' },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ],
        Global: [
          { required: true, trigger: ['blur', 'change'] },
          { pattern: regx, message: 'Please specify a number greater than 0' }
        ]
        // Downtime: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      isDispaly: false,
      btnDisabled: false
    }
  },
  methods: {
    handleSave() {
      this.$refs.revenusForm.validate(valid => {
        if (valid) {
          this.btnDisabled = true
          addOrUpdateEnroll(this.form).then(res => {
            if (res.IsSuccess) {
              this.$emit('getList', { TrialId: this.form.TrialId })
              this.$message.success('Updated successfully!')
              this.$emit('closeDialog')
            }
          })
        }
      })
    }
  }
}
</script>
