<template>
  <div class="dialog-wrap">
    <el-dialog title="用药情况" v-model:visible="showDialog">
      <el-form :model="formChosedMedical" ref="choseMed" :rules="rules">
        <el-form-item
          label="药物名称"
          :label-width="formLabelWidth"
          prop="medicinesName"
        >
          <el-input
            v-model:value="formChosedMedical.medicinesName"
            autocomplete="off"
            placeholder="请输入药物名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用法"
          :label-width="formLabelWidth"
          prop="dosageDay"
        >
          <el-input
            v-model:value="formChosedMedical.dosageDay"
            type="number"
            autocomplete="off"
            placeholder="请输入每日几次"
          >
            <template v-slot:append>次/日</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="用量"
          :label-width="formLabelWidth"
          prop="dosageNum"
        >
          <el-input
            v-model:value="formChosedMedical.dosageNum"
            autocomplete="off"
            placeholder="请输入每次用量"
            maxlength="30"
          >
            <template v-slot:append>每次</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="confirmSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import { checkIsInteger } from '@/utils/followup/followupUtils/checkField'
export default {
  data() {
    var checkRange = (rule, value, callback) => {
      // let min,max;
      let val = Number(value)
      if (val >= 0 && val <= 5) {
        callback()
      } else {
        callback(new Error(`输入范围0~5`))
      }
    }
    return {
      showDialog: true,
      formLabelWidth: '120px',
      formChosedMedical: {
        medicinesName: '', // 药物名称
        dosageDay: '', // 每日次数
        dosageNum: '', // 每次的剂量
      },
      rules: {
        medicinesName: [
          { required: true, message: '请输入药物名称', trigger: 'change' },
        ],
        dosageDay: [
          { required: true, message: '请输入每日几次', trigger: ['change'] },
          { validator: checkIsInteger, trigger: 'change' },
          { validator: checkRange, trigger: 'change' },
        ],
        dosageNum: [
          { required: true, message: '请输入每次用量', trigger: 'change' },
        ],
      },
    }
  },
  watch: {
    showDialog(val) {
      $emit(this, 'closeDialog', val)
    },
  },
  methods: {
    closeDialog() {
      $emit(this, 'closeDialog', false)
    },
    confirmSubmit() {
      this.$refs['choseMed'].validate((valid) => {
        if (valid) {
          $emit(this, 'closeDialog', false)
          $emit(this, 'setMedication', this.formChosedMedical)
        }
      })
    },
  },
  emits: ['closeDialog', 'setMedication'],
}
</script>
