<template>
  <el-dialog top="30px" class="number-manage" append-to-body :visible.sync="visible" width="50%" :title="title" :before-close="closeDialog">
    <el-form ref="addPatientForm" :rules="dataRule" size="small" :model="form" label-width="90px">
      <el-form-item required label="选择患者:" prop="patientId">
        <el-input v-model="form.patientId" :readonly="isEdit" suffix-icon="el-icon-search" placeholder="请输入登记号" @change="searchPatient" />
      </el-form-item>
      <div v-if="patientInfo" class="patientDetail">
        <div style="font-size: 16px;font-weight: bold">患者信息</div>
        <div class="detailItem">
          <div>登记号：{{ patientInfo.patientId }}</div>
          <div>电话：{{ patientInfo.patientPhone }}</div>
        </div>
        <div class="detailItem">
          <div>姓名：{{ patientInfo.patientName }}</div>
          <div>性别：{{ patientInfo.patientSex }}</div>
          <div>生日：{{ $moment(patientInfo.patientBirthday).format('YYYY-MM-DD') }}</div>
          <div v-if="patientInfo.patientAge">年龄：{{ patientInfo.patientAge }}</div>
          <div v-if="patientInfo.source">来源：{{ patientInfo.source }}</div>
        </div>
      </div>
      <el-form-item label="负责医生:">
        <el-col :span="10">
          <el-select v-model="form.doctorId" placeholder="请选择" @change="selectDoctor">
            <el-option
              v-for="item in doctorList"
              :key="item.employeeId"
              :label="item.realName"
              :value="item.employeeId"
            />
          </el-select>
        </el-col>
        <el-col :span="11" style="display: flex;align-items: center">
          <span style="margin-right: 6px;margin-bottom: 3px">来源:</span>
          <el-radio-group v-model="form.source">
            <el-radio label="门诊" />
            <el-radio label="住院" />
            <el-radio label="会诊" />
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
      <div style="display: flex;padding:0 0 20px 0">
        <el-col :span="10" style="display: flex;align-items: center">
          <div class="addLabel">眼别:</div>
          <el-radio v-model="form.eyeType" label="OD">OD
          </el-radio>
          <el-radio v-model="form.eyeType" label="OS">OS
          </el-radio>
          <el-radio v-model="form.eyeType" label="OU">OU
          </el-radio>
        </el-col>
      </div>
      <div style="display: flex;padding:0 0 20px 0px">
        <el-col :span="24" style="display: flex;align-items: center">
          <div class="addLabel">项目:</div>
          <el-checkbox-group v-model="form.project">
            <el-checkbox v-for="(item,index) in projectList" :key="index" :label="item" />
            <el-checkbox label="其他" />
            <el-input v-model="form.otherProject" class="otherProject" size="small" placeholder="" style="width: 125px;" />
          </el-checkbox-group>
        </el-col>
      </div>
      <div style="display: flex;padding:0 0 20px 0px">
        <el-col :span="24" style="display: flex;align-items: center">
          <div class="addLabel">准备工作:</div>
          <el-checkbox-group v-model="form.preparation">
            <el-checkbox label="医嘱已开" />
            <el-checkbox label="散瞳" />
            <el-checkbox label="表麻" />
            <el-checkbox label="全身检查完成" />
            <el-checkbox label="缩瞳" />
          </el-checkbox-group>
        </el-col>
      </div>
      <el-form-item label="预约时间:" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker v-model="form.date1" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" @change="orderDateChange" />
          </el-form-item>
        </el-col>
        <el-col class="line" style="text-align: center" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-select
              v-model="form.date2"
              :picker-options="{
                start: startTime,
                step: step,
                end: endTime
              }"
              placeholder="选择时间"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="handleSave">保存</el-button>
      <el-button size="small" @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  name: 'AddPatientOrder',
  props: {
    title: {
      type: String,
      default: '新增预约'
    },
    patientDetail: {
      type: Object
    },
    morOrAft: {
      type: Number
    },
    orderDetail: {
      type: Object
    },
    project: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      patientInfo: null,
      form: {
        patientId: '',
        source: '',
        project: [],
        preparation: [],
        doctorName: '',
        remark: '',
        doctorId: '',
        eyeType: '',
        otherProject: '',
        date1: '',
        date2: ''
      },
      startTime: '08:30',
      step: '00:15',
      endTime: '18:00',
      projectList: [],
      doctorList: []
    }
  },
  computed: {
    dataRule() {
      return {
        patientId: [
          { required: true, message: '请选择患者' }
        ],
        date1: [
          { required: true, message: '请选择日期' }
        ],
        date2: [
          { required: true, message: '请选择时间' }
        ]
      }
    }
  },
  created() {
    this.getDoctorList()
    this.getProjectList()
  },
  mounted() {
    if (this.patientDetail) {
      this.form.patientId = this.patientDetail.patientId
      this.form.doctorId = this.patientDetail.doctorId
      this.form.doctorName = this.patientDetail.doctorName
      this.form.eyeType = this.patientDetail.eyeType
      this.form.project = this.patientDetail.project && this.patientDetail.project.split(',') || []
      this.form.preparation = this.patientDetail.preparation && this.patientDetail.preparation.split(',') || []
      this.form.remark = this.patientDetail.remark
      this.form.otherProject = this.patientDetail.otherProject
      this.form.source = this.patientDetail.source
      if (this.patientDetail.appointDate) {
        this.form.date1 = this.patientDetail.appointDate.split(' ')[0]
        this.form.date2 = this.patientDetail.appointDate.split(' ')[1].substring(0, 5)
      }
      this.patientInfo = this.patientDetail
    }
    if (this.orderDetail) {
      this.form.date1 = this.orderDetail.date
      if (this.morOrAft === 1) {
        this.startTime = this.orderDetail.workTimeAm || '08:00'
        this.endTime = '12:00'
        this.step = `00:${this.orderDetail.timeInterval}`
      } else {
        this.startTime = this.orderDetail.workTimePm
        this.step = `00:${this.orderDetail.timeInterval}`
        this.endTime = '18:00'
      }
    }
  },
  methods: {
    init() {
      this.visible = true
    },
    // 查询患者
    searchPatient(val) {
      this.$http.get('/appoint/getPatientInfo', { params: { patientId: val }}).then((data) => {
        if (data.data.data.list.length) {
          this.patientInfo = data.data.data.list[0]
        } else {
          this.patientInfo = null
        }
      })
    },
    // 日期修改不限制预约时间
    orderDateChange(value) {
      if (this.orderDetail.date !== value) {
        this.endTime = '18:00'
      }
    },
    // 获取医生列表
    getDoctorList() {
      this.$http.get('/sys/user', { params: { position: '门诊医师' }}).then(data => {
        this.doctorList = data.data.data
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    getProjectList() {
      this.$http.get('/appoint/getAppiontProJectDict').then(data => {
        this.projectList = data.data.data
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 选择医生
    selectDoctor(val) {
      const curDoctor = this.doctorList.find(item => item.employeeId === val)
      this.form.doctorName = curDoctor.realName
    },
    // 确认提交
    handleSave() {
      this.$refs.addPatientForm.validate((valid) => {
        if (!valid) {
          return false
        }
        const project = this.form.project.join(',')
        const preparation = this.form.preparation.join(',')
        if (!this.isEdit) {
          const params = {
            appointDate: `${this.form.date1} ${this.form.date2}:00`,
            patientName: this.patientInfo.patientName,
            jzNumber: this.patientInfo.jzNumber,
            appointSource: this.patientInfo.source,
            itemId: this.project.itemId,
            itemName: this.project.itemName,
            ...this.form
          }
          params.project = project
          params.preparation = preparation
          this.$http.post('/appoint/saveAppointInfo', params).then(res => {
            if (res.data.code !== 0) {
              return this.$message.error(res.data.msg)
            }
            this.$message.success('添加成功')
            this.$emit('updateAppoint')
            // this.visible = false
          })
        } else {
          const params = {
            appointDate: `${this.form.date1} ${this.form.date2}:00`,
            patientName: this.patientDetail.patientName,
            id: this.patientDetail.id,
            itemId: this.patientDetail.itemId,
            ...this.form
          }
          params.project = project
          params.preparation = preparation
          this.$http.post('/appoint/updateAppointInfo', params).then(() => {
            this.$message.success('修改成功')
            this.$emit('updateAppoint')
            // this.visible = false
          })
        }
      })
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.radioItem{
  user-select: none;
  cursor: pointer;
  margin:0 8px;
  display: flex;
}
.addLabel{
  width: 80px;
  text-align: right;
  margin-right: 10px
}
input{
  -webkit-appearance: checkbox !important;
  margin-right: 5px !important;
}
::v-deep .el-form-item__label{
  font-size: 14px;
}
::v-deep .el-form-item{
  margin-bottom: 16px;
}
::v-deep .el-radio{
  margin-right: 8px;
}
::v-deep .el-checkbox{
  margin-right: 12px;
}
.otherProject{
  ::v-deep .el-input__inner{
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #ccc !important;
  }
}
.patientDetail{
  border: 1px solid #6EB1FF;
  border-radius:  8px;
  background: #E8F5FF;
  padding: 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  margin-bottom: 22px;
}
.detailItem{
  display:flex;
  margin: 8px 0;
  div{
    margin-right: 20px;
  }
}
</style>

