<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">注射打卡</div>
      <div class="loginForm">
        <mt-field class="inputDisable" disabled label="产品选择" v-model="form.mpro"
          @click.native="mproFlag=true;mfreqFlag=false" placeholder="请选择使用的产品">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <!-- <mt-field class="inputDisable" disabled label="注射频次" v-model="form.mfreq" @click.native="mfreqFlag=true;mproFlag=false" placeholder="请选择使用的剂量">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field> -->
        <mt-field label="注射剂量" placeholder="整数" type="number" v-model="form.mdose"></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>注射时间</span>
        </div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">确定并提交</div>
        <div class="jbbtn" @click="$router.go(-1)">返回</div>
      </div>
    </div>
    <mt-picker @change="onValuesChange" v-if="mproFlag" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mproFlag=false">确认</div>
    </mt-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>
    <!-- 注射时间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'
      :startDate='startDate'
      @touchmove.native.stop.prevent>
    </mt-datetime-picker>
  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      MessageBox
    },
    data() {
      return {
        form: {zssjt0:''},
        mproFlag: false,
        mfreqFlag: false,
        proList: [],
        startDate:new Date(this.$datetime.formatDateTime(new Date("2022-01-01 00:00:00"))),
        endDate: new Date(this.$datetime.formatDateTime(new Date())),
        slots: [{
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }],
        slots1: [{
          flex: 1,
          values: this.$const.mfreq,
          className: 'slot1',
          textAlign: 'center'
        }]
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      changeTime0(value) {
        this.form.zssjt0 = this.$datetime.formatDateTime(value)
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mpro = picker.getSlotValue(0)
        } else {
          this.form.mpro = this.slots[0].values[0]
        }
      },
      onValuesChange1(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mfreq = picker.getSlotValue(0)
        } else {
          this.form.mfreq = this.$const.mfreq[0]
        }
      },
      submit() {
        if (!this.form.mpro) {
          MessageBox({
            title: '提示',
            message: '请选择产品'
          })
          return
        }
        if (!this.form.mdose) {
          MessageBox({
            title: '提示',
            message: '请输入注射剂量'
          })
          return
        } else {
          if (!this.$recheck.checkInt(this.form.mdose)) {
            MessageBox({
              title: '提示',
              message: '注射剂量请输入整数'
            })
            return
          }
        }
        if (!this.form.zssjt0) {
          MessageBox({
            title: '提示',
            message: '请选择注射时间'
          })
          return
        }
        let params = this.form
        this.$api.regPatientRecords(params).then(res => {
          if (!res.data.code) {
            this.goPage("/patclockinsuc")
          }
        })
      }
    },
    created() {
      let _this = this
      this.$api.getPatientProList().then(res => {
        _this.slots[0].values = res.data.data
      })
    },
  }

</script>

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

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

    .mint-cell {
      min-height: 2.12rem;
    }
  }
  .numSubTitle {
    position: relative;

    span {
      position: absolute;
      left: 25px;
      top: 15px;
    }
  }
  /deep/ .numSubTitle .mint-field-core {
    margin-left: 105px;
  }

</style>
