<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">请选择患者使用产品</div>
      <div class="loginForm">
        <mt-field placeholder="请选择产品" class="inputDisable" disabled label="产品选择" v-model="form.mpro" @click.native="mproFlag=true;mfreqFlag=false">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field placeholder="请选择注射频次" class="inputDisable" disabled label="注射频次" v-model="form.mfreq" @click.native="mfreqFlag=true;mproFlag=false">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
      </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>
  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      MessageBox
    },
    data() {
      return {
        form: {},
        mproFlag: false,
        mfreqFlag: false,
        slots: [{
          flex: 1,
          values: this.$const.mprolist,
          className: 'slot1',
          textAlign: 'center'
        }],
        slots1: [{
          flex: 1,
          values: this.$const.mfreq,
          className: 'slot1',
          textAlign: 'center'
        }]
      }
    },
    methods: {
      goPage() {
        this.$router.push('/diagcalc')
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mpro = picker.getSlotValue(0)
        } else {
          this.form.mpro = "人血FVIII"
        }
      },
      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.mfreq) {
          MessageBox({
            title: '提示',
            message: '请选择注射频次?'
          })
          return
        }
        let params = this.form
        let patientCase = localStorage.getItem("patientCase")
        if(patientCase){
          patientCase = JSON.parse(patientCase)
          patientCase.mpro = params.mpro
          patientCase.mfreq = params.mfreq
        }else{
          patientCase = params
        }
        localStorage.setItem("patientCase",JSON.stringify(patientCase))
        this.goPage("/diagcalc")
      }
    }
  }

</script>

<style scoped lang="scss">

</style>
