<template>
  <a-modal
    v-model="particularsVisible"
    :centered="true"
    :keyboard="false"
    :footer="null"
    :width="1000"
    height="auto"
    @cancel="handleCancelClick">
    <a-descriptions title="健康档案信息详细信息" layout="vertical" :column="5" bordered>
      <a-descriptions-item v-if="particularsData.gender" label="性别">
        {{handleTypeByValue(particularsData.gender,genderOptions)}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.birthday" label="生日">
        {{particularsData.birthday}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.realName" label="真实姓名">
        {{particularsData.realName}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.nation" label="民族">
        {{particularsData.nation}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.occupation" label="职业">
        {{particularsData.occupation}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.address" label="住址">
        {{particularsData.address}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.idCardNum" label="身份证号">
        {{particularsData.idCardNum}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.contactsName" label="联系人姓名">
        {{particularsData.contactsName}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.contactsPhone" label="联系人电话">
        {{particularsData.contactsPhone}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.temperature" label="体温">
        {{particularsData.temperature}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.stature" label="身高">
        {{particularsData.stature}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.respiratoryRate" label="呼吸频率">
        {{particularsData.respiratoryRate}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.pulse" label="脉率">
        {{particularsData.pulse}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.weight" label="体重">
        {{particularsData.weight}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.leftBloodPressure" label="左侧血压">
        {{particularsData.leftBloodPressure}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.rightBloodPressure" label="右侧血压">
        {{particularsData.rightBloodPressure}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.residenceType" label="常住类型">
        {{handleTypeByValue(particularsData.residenceType,residenceTypeOptions)}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.authUserId" label="关联人员">
        {{handleTypeByValue(particularsData.authUserId,authUserIdOption)}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.beginTime" label="开始时间">
        {{particularsData.beginTime}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.endTime" label="结束时间">
        {{particularsData.endTime}}
      </a-descriptions-item>
    </a-descriptions>
    <a-modal :visible="previewImageVisible" :footer="null" @cancel="handleImagePreviewCancel">
      <img alt="example" style="width: 100%" :src="previewImageUrl" />
    </a-modal>
  </a-modal>
</template>
<script>

  import baseUtils from '@/utils/baseUtils'
export default {
  name: 'ItemParticulars',
  components: {baseUtils},
  data () {
    return {
      genderOptions:this.$commonConstants.genderOptions,
      residenceTypeOptions:this.$commonConstants.residenceTypeOptions,
      authUserIdOption:[],
      previewImageVisible:false,
      previewImageUrl:false,
      particularsData:{
        gender:'',
        birthday:'',
        realName:'',
        nation:'',
        occupation:'',
        address:'',
        idCardNum:'',
        contactsName:'',
        contactsPhone:'',
        temperature:'',
        stature:'',
        respiratoryRate:'',
        pulse:'',
        weight:'',
        leftBloodPressure:'',
        rightBloodPressure:'',
        residenceType:'',
        authUserId:'',
        beginTime:'',
        endTime:'',
      },
      particularsVisible:false
    }
  },
  props: {

  },
  computed: {

  },
  methods: {
    async showParticulars(data){
      this.particularsData = {...data}
      this.particularsVisible = true
      await this.setOtherData();
    },
    async setOtherData(){
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
      console.log('this.particularsData:'+JSON.stringify(this.particularsData))
    },
    handleTypeByValue(value,optionList){
      if(baseUtils.isNull(value)){
        return '无'
      }
      if(!optionList || !optionList.length >0){
        return '';
      }
      let resultList  =
              optionList.filter(item => item.value == value);
      console.log(JSON.stringify(resultList))
      if(resultList && resultList.length > 0){
        return resultList[0].text;
      }else{
        return '无'
      }
    },
    handleImagePreviewCancel(){
      this.previewImageVisible = false
      this.previewImageUrl = ''
    },
    handleCancelClick () {
      this.particularsData = {
        gender:'',
        birthday:'',
        realName:'',
        nation:'',
        occupation:'',
        address:'',
        idCardNum:'',
        contactsName:'',
        contactsPhone:'',
        temperature:'',
        stature:'',
        respiratoryRate:'',
        pulse:'',
        weight:'',
        leftBloodPressure:'',
        rightBloodPressure:'',
        residenceType:'',
        authUserId:'',
        beginTime:'',
        endTime:'',
      },
      this.particularsVisible = false
    },
    //打开通知栏
    openNotification(object) {
      const key = `open${Date.now()}`;
      this.$notification.open({
        message: '通知',
        description:
        object.profile,
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small',
              },
              on: {
                click: () => this.$notification.close(key),
              },
            },
            '好的',
          );
        },
        key,
        onClose: close,
      });
    }
  },
  watch: {

   }
  }
</script>
<style lang="less" scoped>
  .title_text{
    white-space:normal;
    word-break:break-all;
    word-warp:break-word;
  }
</style>
