<template>
  <div class="component-box-wrapper__fullscreen">
    <div style="font-size: 18px; margin-bottom: 20px">身份信息</div>
    <div style="position: fixed; top: 12px; right: 12px">
      <el-button type="primary" icon="Plus" @click="zoomInIdCard" circle title="放大"></el-button>
      <el-button type="primary" icon="Refresh" @click="resetIdCard" circle title="还原"></el-button>
      <el-button type="danger" icon="Close" @click="closeIdCard" circle title="关闭"></el-button>
    </div>
    <div class="his-info-box">
      <span>HIS信息</span>
      <span>姓名：{{ patient.name }}</span>
      <span>性别：{{ patient.sex === 1 ? '男' : '女' }}</span>
      <span>出生日期：{{ patient.birthDate }}</span>
      <span>身份证：{{ patient.socialNo }}</span>
    </div>
    <img id="idCardImg" :style="idCardImgStyle" :src="identifyImageFile" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getIdCardInfo } from '@/api/inpatient/patient'
export default {
  props: {
    patNo: {
      type: String,
      required: true,
    },
    times: {
      type: Number,
      required: true,
    },
  },
  emits: ['close'],
  setup(props, ctx) {
    const patient = ref({})
    const identifyImageFile = ref('')
    const idCardImgStyle = ref({
      width: '684.8px',
      height: '432px',
      borderRadius: '4px',
      w: 684.8,
      h: 432,
    })
    const zoomInIdCard = () => {
      idCardImgStyle.value.w = idCardImgStyle.value.w * 1.2
      idCardImgStyle.value.h = idCardImgStyle.value.h * 1.2
      idCardImgStyle.value.width = idCardImgStyle.value.w + 'px'
      idCardImgStyle.value.height = idCardImgStyle.value.h + 'px'
    }
    const resetIdCard = () => {
      idCardImgStyle.value.w = 684.8
      idCardImgStyle.value.h = 432
      idCardImgStyle.value.width = '684.8px'
      idCardImgStyle.value.height = '432px'
    }
    const closeIdCard = () => {
      identifyImageFile.value = null
      resetIdCard()
      ctx.emit('close')
    }
    const checkIdInfo = () => {
      getIdCardInfo(props.patNo, props.times)
        .then((res) => {
          patient.value = res.patient
          identifyImageFile.value = 'data:image/png;base64,' + res.idCard.fileSfz
        })
        .catch(() => {
          ctx.emit('close')
        })
    }
    onMounted(() => {
      checkIdInfo()
    })
    return {
      patient,
      identifyImageFile,
      idCardImgStyle,
      zoomInIdCard,
      resetIdCard,
      closeIdCard,
    }
  },
}
</script>

<style scoped>
.affix-container {
}
.his-info-box {
  font-size: 15px;
  margin-bottom: 20px;
}
.his-info-box > span {
  font-weight: bold;
  padding: 8px 12px;
  background: gray;
  color: white;
  border-right: 1px solid white;
}
</style>
