<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>
        <mt-field disabled label="注射时间t0" placeholder="请选择注射时间" v-model="form.zssjt0"
          @click.native="$refs.t0Picker.open()">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="基础活性%" placeholder="请输入基础活性(2位小数)" v-model="form.jchx"></mt-field>
        <mt-field label="注射后半小时内活性%" placeholder="请输入半小时内活性%" v-model="form.zs30hx"></mt-field>
        <mt-field disabled label="采血时间t1" placeholder="请输入采血时间t1" v-model="form.cxsjt1"
          @click.native="$refs.t1Picker.open()">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="t1点活性%" placeholder="请输入t1点活性%(2位小数)" v-model="form.t1hx"></mt-field>
        <mt-field disabled label="采血时间t2" placeholder="请输入采血时间t2" v-model="form.cxsjt2"
          @click.native="$refs.t2Picker.open()">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="t2点活性%" placeholder="请输入t2点活性%(2位小数)" v-model="form.t2hx"></mt-field>
        <mt-field disabled label="采血时间t3" placeholder="请输入采血时间t3" v-model="form.cxsjt3"
          @click.native="$refs.t3Picker.open()">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="t3点活性%" placeholder="请输入t3点活性%(2位小数)" v-model="form.t3hx"></mt-field>
      </div>
      <div class="diagForm">
        <div class="formTitle">血友病治疗方案</div>
        <mt-field label="预防谷活性" type="number" placeholder="请输入预防谷活性(2位小数)" v-model="form.yfghx"></mt-field>
        <mt-field 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} 日" @confirm='changeTime0'
      :endDate = 'endDate'
      >
    </mt-datetime-picker>
    <!-- 采血时间t1 -->
    <mt-datetime-picker ref="t1Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{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} 日" @confirm='changeTime2'
      :endDate = 'endDate'
      >
    </mt-datetime-picker>
    <!-- 采血时间t3 -->
    <mt-datetime-picker ref="t3Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{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: ['每周2次', '每周3次', '每天1次', '每2天1次', '每3天1次'],
          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 = "每周2次"
        }
      },
      submit() {
        if (!this.form.bltz) {
          MessageBox({
            title: '提示',
            message: '请输入病例体重'
          })
          return
        }
        if (!this.form.zsjl) {
          MessageBox({
            title: '提示',
            message: '请输入注射剂量?'
          })
          return
        }
        if (!this.form.zssjt0) {
          MessageBox({
            title: '提示',
            message: '请选择注射时间t0?'
          })
          return
        }
        // if (!this.form.jchx) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请输入手机号?'
        //   })
        //   return
        // }
        if (!this.form.zs30hx) {
          MessageBox({
            title: '提示',
            message: '请输入注射后半小时内活性?'
          })
          return
        }
        if (!this.form.cxsjt1) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t1?'
          })
          return
        }
        if (!this.form.t1hx) {
          MessageBox({
            title: '提示',
            message: '请输入t1点活性?'
          })
          return
        }
        if (!this.form.cxsjt2) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t2?'
          })
          return
        }
        if (!this.form.t2hx) {
          MessageBox({
            title: '提示',
            message: '请输入t2点活性?'
          })
          return
        }
        if (!this.form.cxsjt3) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t3?'
          })
          return
        }
        if (!this.form.t3hx) {
          MessageBox({
            title: '提示',
            message: '请输入t3点活性?'
          })
          return
        }
        if (!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: 100%;

    .content {
      height: 90%;
    }
  }

</style>
