<template>
  <div class="work-container">
    <el-tabs v-model="activeTab" stretch>
      <el-tab-pane label="预约" name="appointment">
        <bookingList :work="true" @selectBookingList="selectBookingList"></bookingList>
      </el-tab-pane>
      <el-tab-pane label="非预约" name="nonAppointment">
        <el-form :model="nonAppointmentForm" :rules="formRules" ref="nonAppointmentForm" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="nonAppointmentForm.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="nonAppointmentForm.age" type="number" max="150" min="0"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="nonAppointmentForm.gender" placeholder="请选择">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="nonAppointmentForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="nonAppointmentForm.idCard" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input v-model="nonAppointmentForm.nativePlace" placeholder="请输入籍贯"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="button-group">
      <el-button type="primary" @click="handleSubmit">确认</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import bookingList from "@/components/bookingList.vue"
import { timeProcessing } from "@/utils/myMethod"
export default {
  name:'Booking',
  components: {
    bookingList
  },
  data() {
    return {
      activeTab: 'nonAppointmentForm',
      selectedRows: null,
      nonAppointmentForm: {},
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        idCard: [
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.nonAppointmentForm = this.$store.getters.patientInfo
  },
  methods: {
    selectBookingList(val) {
      this.selectedRows = val;
    },
    handleSubmit() {
      if (this.activeTab === 'appointment') {
        if (this.selectedRows) {
          let param = {
            ...this.selectedRows,
            phone: null,
            idCard: null,
            nativePlace: null
          }
          this.$store.dispatch('updatePatientInfo', param)
          this.$emit('handleCloseBooking')
        } else {
          this.$message.error('请选择预约记录')
          return
        }
      } else {
        this.$refs.nonAppointmentForm.validate(valid => {
          if (!valid) {
            this.$message.error('请填写完整表单')
            return
          }
          this.nonAppointmentForm.bkBkTime = timeProcessing()
          this.$store.dispatch('updatePatientInfo', this.nonAppointmentForm)
          this.$emit('handleCloseBooking')
        })
      }
    },
    handleCancel(){
      this.$emit('handleCloseBooking')
    }
  }
}
</script>

<style scoped>
.work-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}
</style>
