<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">FVIII药代动力学检测</div>
      <div class="diagForm">
        <mt-field label="病例体重(kg)" placeholder="整数或1位小数" type="number" v-model="form.bltz"></mt-field>
        <mt-field label="注射剂量" placeholder="请输入整数" v-model="form.zsjl" type="number"></mt-field>
        <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.zssjt0"
            @click.native="$refs.t0Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>注射时间t<sub>0</sub></span>
        </div>
        <mt-field label="基础活性%" placeholder="请输入2位小数" v-model="form.jchx"></mt-field>
        <mt-field label="注射后半小时内活性%" placeholder="请输入2位小数" type="number" v-model="form.zs30hx"></mt-field>
        <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt1"
            @click.native="$refs.t1Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>1</sub></span>
        </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t1hx" type="number"></mt-field>
          <span>t<sub>1</sub>点活性%</span>
        </div>
        <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt2"
            @click.native="$refs.t2Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>2</sub></span>
        </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t2hx" type="number"></mt-field>
          <span>t<sub>2</sub>点活性%</span>
        </div>
        <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt3"
            @click.native="$refs.t3Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>3</sub></span>
        </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t3hx" type="number"></mt-field>
          <span>t<sub>3</sub>点活性%</span>
        </div>
      </div>
      <div class="diagForm">
        <div class="formTitle">血友病治疗方案</div>
        <mt-field label="预防谷活性" type="number" placeholder="请输入整数" v-model="form.yfghx"></mt-field>
        <mt-field class="inputDisable" disabled label="注射频次" placeholder="请选择" v-model="form.zspc"
          @click.native="mfreqFlag=true">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">提交</div>
      </div>
    </div>
    <!-- 注射时间t0 -->
    <mt-datetime-picker ref="t0Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime0' :endDate='endDate'>
    </mt-datetime-picker>
    <!-- 采血时间t1 -->
    <mt-datetime-picker ref="t1Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime1' :endDate='endDate'>
    </mt-datetime-picker>
    <!-- 采血时间t2 -->
    <mt-datetime-picker ref="t2Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime2' :endDate='endDate'>
    </mt-datetime-picker>
    <!-- 采血时间t3 -->
    <mt-datetime-picker ref="t3Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime3' :endDate='endDate'>
    </mt-datetime-picker>
    <!-- 注射频次 -->
    <mt-picker @change="onValuesChange1" v-if="mfreqFlag" :slots="slots1" ref="sexPicker1" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mfreqFlag=false">确认</div>
    </mt-picker>
  </div>
</template>

<script>
  import {
    Field,
    MessageBox,
    Toast
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      MessageBox,
      Toast
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        mfreqFlag: false,
        form: {
          jchx: 1,
          zssjt0: '',
          cxsjt1: '',
          cxsjt2: '',
          cxsjt3: ''
        },
        slots1: [{
          flex: 1,
          values: this.$const.zspc,
          className: 'slot1',
          textAlign: 'center'
        }],
        endDate: new Date(this.$datetime.formatDateTime(new Date())),
      }
    },
    methods: {
      goPage() {
        this.$router.push('/diagcalcshow')
      },
      changeTime0(value) {
        this.form.zssjt0 = this.$datetime.formatDateTime(value)
      },
      changeTime1(value) {
        this.form.cxsjt1 = this.$datetime.formatDateTime(value)
      },
      changeTime2(value) {
        this.form.cxsjt2 = this.$datetime.formatDateTime(value)
      },
      changeTime3(value) {
        this.form.cxsjt3 = this.$datetime.formatDateTime(value)
      },
      onValuesChange1(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.zspc = picker.getSlotValue(0)
        } else {
          this.form.zspc = this.$const.zspc[0]
        }
      },
      submit() {
        if (!this.form.bltz) {
          MessageBox({
            title: '提示',
            message: '请输入病例体重'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat1(this.form.bltz)) {
            MessageBox({
              title: '提示',
              message: '病例体重请输入整数或1位小数'
            })
            return
          }
        }
        if (!this.form.zsjl) {
          MessageBox({
            title: '提示',
            message: '请输入注射剂量'
          })
          return
        } else {
          if (!this.$recheck.checkInt(this.form.zsjl)) {
            MessageBox({
              title: '提示',
              message: '注射剂量请输入整数'
            })
            return
          }
        }
        if (!this.form.zssjt0) {
          MessageBox({
            title: '提示',
            message: '请选择注射时间t<sub>0</sub>'
          })
          return
        }
        if (!this.$recheck.checkIntFloat12(this.form.jchx)) {
          MessageBox({
            title: '提示',
            message: '请输入整数或2位小数?'
          })
          return
        }
        if (!this.form.zs30hx) {
          MessageBox({
            title: '提示',
            message: '请输入注射后半小时内活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.zs30hx)) {
            MessageBox({
              title: '提示',
              message: '注射后半小时内活性请输入整数或2位小数'
            })
            return
          }
        }
        if (!this.form.cxsjt1) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t<sub>1</sub>'
          })
          return
        }
        if (!this.form.t1hx) {
          MessageBox({
            title: '提示',
            message: '请输入t<sub>1</sub>点活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.t1hx)) {
            MessageBox({
              title: '提示',
              message: 't<sub>1</sub>点活性请输入整数或2位小数'
            })
            return
          }
        }
        if (!this.form.cxsjt2) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t<sub>2</sub>'
          })
          return
        }
        if (!this.form.t2hx) {
          MessageBox({
            title: '提示',
            message: '请输入t<sub>2</sub>点活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.t2hx)) {
            MessageBox({
              title: '提示',
              message: 't<sub>2</sub>点活性请输入整数或2位小数'
            })
            return
          }
        }
        if (!this.form.cxsjt3) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t<sub>3</sub>'
          })
          return
        }
        if (!this.form.t3hx) {
          MessageBox({
            title: '提示',
            message: '请输入t<sub>3</sub>点活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.t3hx)) {
            MessageBox({
              title: '提示',
              message: 't<sub>3</sub>点活性请输入整数或2位小数'
            })
            return
          }
        }
        if (!this.form.yfghx) {
          MessageBox({
            title: '提示',
            message: '请输入预防谷活性'
          })
          return
        } else {
          if (!this.$recheck.checkInt(this.form.yfghx)) {
            MessageBox({
              title: '提示',
              message: '预防谷活性请输入整数'
            })
            return
          }
        }
        if (!this.form.zspc) {
          MessageBox({
            title: '提示',
            message: '请选择注射频次'
          })
          return
        }
        MessageBox.confirm('请您再次确认录入信息是否有误?').then(action => {
          let params = this.form
          let patientCase = localStorage.getItem("patientCase")
          if (patientCase) {
            patientCase = JSON.parse(patientCase)
            Object.keys(patientCase).forEach(function (item) {
              console.log(item)
              params[item] = patientCase[item]
            })
          } else {
            patientCase = params
            this.goPage("/regpatinfo")
          }
          this.$api.regPatientCase(params).then(res => {
            if (!res.data.code) {
              let id = res.data.data.id
              localStorage.removeItem("patientCase")
              this.$router.push({
                path: 'diagcalcshow',
                query: {
                  id: id
                }
              })
            } else {
              Toast(res.data.message)
            }
          })
        });


      }
    }
  }

</script>

<style scoped lang="scss">
  .diagForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      color: #2882F4;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #2882F4;
      font-weight: bold;
    }

    .mint-field {
      border: 1px solid #ccc;
      border-radius: 50px;
      margin-top: 1rem;
    }

    .mint-cell {
      min-height: 2rem;
    }
  }

  .container {
    height: 100vh;

    .content {
      height: 100vh;
    }
  }

  .numSubTitle {
    position: relative;

    span {
      position: absolute;
      left: 25px;
      top: 5px;
    }
  }

  /deep/ .numSubTitle .mint-field-core {
    margin-left: 105px;
  }

</style>
