<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">请录入病例信息</div>
      <div class="loginForm">
        <mt-field label="病例姓名" v-model="form.name"></mt-field>
        <mt-field disabled label="病例年龄" v-model="form.birthday" @click.native="$refs.birthdayPicker.open()">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field disabled label="病例性别" v-model="form.sex" @click.native="sexFlag=true">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="病例手机" v-model="form.phone" type="number"></mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">下一页</div>
      </div>
    </div>
    <mt-datetime-picker ref="birthdayPicker" type="date" v-model="form.birthday"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm = 'changeTime'
      :startDate = 'startDate'
      :endDate = 'endDate'
      @change = 'changeTime'
    >
    </mt-datetime-picker>
    <mt-picker @change="onValuesChange" v-if="sexFlag" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="sexFlag=false">确认</div>
    </mt-picker>
  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      MessageBox,
      DatetimePicker,
      Picker,
      Button
    },
    data() {
      return {
        form: {birthday:'',sex:''},
        sexFlag: false,
        slots: [{
          flex: 1,
          values: ['男', '女'],
          className: 'slot1',
          textAlign: 'center'
        }],
        startDate:new Date('1923-01-01'),
        endDate:new Date(this.$datetime.formatDate(new Date())),
      }
    },
    methods: {
      goPage() {
        this.$router.push('/regpatpro')
      },
      changeTime(value){
        this.form.birthday = this.$datetime.formatDate(value)
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.sex = picker.getSlotValue(0)
        } else {
          this.form.sex = "男"
        }
      },
      submit() {
        if (!this.form.name) {
          MessageBox({
            title: '提示',
            message: '请输入姓名?'
          })
          return
        }
        if (!this.form.birthday) {
          MessageBox({
            title: '提示',
            message: '请选择出生年月?'
          })
          return
        }
        if (!this.form.sex) {
          MessageBox({
            title: '提示',
            message: '请选择性别?'
          })
          return
        }
        if (!this.form.phone) {
          MessageBox({
            title: '提示',
            message: '请输入手机号?'
          })
          return
        }
        let params = this.form
        localStorage.setItem("patientCase", JSON.stringify(params))
        this.$api.regPatient(params).then(res => {
          if (!res.data.code) {
            this.goPage("/regpatpro")
          }
        })
      }
    },
    created() {
      console.log(this.endDate,222222222222)
    },
  }

</script>

<style scoped lang="scss">

</style>
