<template>
  <div class="raise-scale-container">
    <el-card class="patient-info">
      <div slot="header" class="clearfix">
        <span>患者信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="changePatient">
          选择患者
        </el-button>
      </div>
      <div class="compact-info">
        <div class="info-line">
          <span class="info-label">患者：</span>
          <span>{{ patientInfo.name }} ({{ patientInfo.gender == 0 ? '男' : '女' }}, {{ patientInfo.age }}岁)</span>
        </div>
        <div class="info-line">
          <span class="info-label">手机：</span>
          <span>{{ patientInfo.phone || '-' }}</span>
        </div>
        <div class="info-line">
          <span class="info-label">身份证：</span>
          <span>{{ patientInfo.idCard || '-' }}</span>
        </div>
        <div class="info-line">
          <span class="info-label">预约号：</span>
          <span>{{ patientInfo.bookingId }}</span>
          <span class="info-divider">|</span>
          <span class="info-label">时间：</span>
          <span>{{ patientInfo.bkBkTime }}</span>
          <span class="info-divider">|</span>
          <span class="info-label">籍贯：</span>
          <span>{{ patientInfo.nativePlace || '-' }}</span>
        </div>
        <div class="info-line">
          <span class="info-label">身高：</span>
          <span>{{ patientInfo.height || '-' }}cm</span>
          <span class="info-divider">|</span>
          <span class="info-label">体重：</span>
          <span>{{ patientInfo.weight || '-' }}kg</span>
        </div>
      </div>
      <el-col :span="24" style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="getBodyData">
          获取身高体重数据
        </el-button>
      </el-col>
    </el-card>

    <el-dialog
      :visible.sync="showBookingDialog"
      fullscreen
      title="更换患者"
      :show-close="true"
      :close-on-click-modal="false"
      :modal="false"
    >
      <booking @handleCloseBooking="handleCloseBooking" />
    </el-dialog>
  </div>
</template>

<script>
import { quickMMeasure } from '@/api/bluetoothScale'
import { mapState } from 'vuex';
import booking from '@/components/booking.vue'
export default {
  name: 'RaiseTheScale',
  components: {
    booking
  },
  data() {
    return {
      showBookingDialog: false
    }
  },
  computed: {
    ...mapState({
      patientInfo: (state) => state.patientInfo
    })
  },
  methods: {
    //获取升高体重称的数据
    getBodyData() {
      if(this.patientInfo.gender == null && this.patientInfo.name == null){
        this.$message.error('请先选择患者')
        return
      }
      
      let param = {
        isBooking: this.patientInfo.bookingId ? true : false,
        bookingId: this.patientInfo.bookingId || 1,//预约ID
        gender: this.patientInfo.gender,//性别
        age: this.patientInfo.age,//年龄
        deviceAddress: null,//设备地址
        timeout: null,//测量超时时间
      }
      quickMMeasure(param).then(res => {
        if (res.code == 200) {
          let patientInfo = {
            ... this.patientInfo
          }
          patientInfo.height = res.data.height
          patientInfo.weight = res.data.weight
          this.$store.dispatch('updatePatientInfo', patientInfo)
          this.$message.success(`测量成功：身高: ${this.patientInfo.height}cm, 体重: ${this.patientInfo.weight}kg`)
        }
      })
    },
    // 更换患者
    changePatient() {
      this.showBookingDialog = true
    },
    handleCloseBooking() {
      this.showBookingDialog = false
    },
    handleSubmit() {
      if (this.patientInfo.height <= 0 || this.patientInfo.weight <= 0) {
        this.$message.error('请先获取身高和体重数据')
        return
      }
      this.$emit('next-step', this.patientInfo)
    }
  }
}
</script>

<style scoped>

.patient-info {
  margin-bottom: 20px;
}

.compact-info {
  font-size: 14px;
  line-height: 1.8;
}

.info-line {
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-label {
  color: #666;
  font-weight: 500;
  margin-right: 4px;
}

.info-divider {
  color: #ddd;
  margin: 0 8px;
}
</style>
