<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.authUserId" label="关联用户">
        {{handleTypeByValue(particularsData.authUserId,authUserIdOption)}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.userName" label="姓名">
        {{particularsData.userName}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.gender" label="性别">
        {{particularsData.gender}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.age" label="年龄">
        {{particularsData.age}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.marriage" label="婚姻">
        {{particularsData.marriage}}
      </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.birthPlace" label="出生地">
        {{particularsData.birthPlace}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.presentAddress" label="现住址">
        {{particularsData.presentAddress}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.workUnit" label="工作单位">
        {{particularsData.workUnit}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.idCardNum" label="身份证号">
        {{particularsData.idCardNum}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.phoneNum" label="电话">
        {{particularsData.phoneNum}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.admittedTime" label="入院时间">
        {{particularsData.admittedTime}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.recordTime" label="记录时间">
        {{particularsData.recordTime}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.allergicCondition" label="过敏状况">
        {{particularsData.allergicCondition}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.historyNarrative" label="病史叙述">
        {{particularsData.historyNarrative}}
      </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
      width="50%"
      height="50%"
      :visible="viewRichTextVisible"
      :footer="null" @cancel="viewRichTextVisible = false">
      <div v-html="richText"></div>
    </a-modal>
  </a-modal>
</template>
<script>
import baseUtils from '@/utils/baseUtils'
export default {
  name: 'ItemParticulars',
  components: {baseUtils},
  data () {
    return {
      authUserIdOption:[],
      richText:``,
      viewRichTextVisible:false,
      previewImageVisible:false,
      previewImageUrl:false,
      particularsData:{
        authUserId:'',
        userName:'',
        gender:'',
        age:'',
        marriage:'',
        nation:'',
        occupation:'',
        birthPlace:'',
        presentAddress:'',
        workUnit:'',
        idCardNum:'',
        phoneNum:'',
        admittedTime:'',
        recordTime:'',
        allergicCondition:'',
        historyNarrative:'',
      },
      particularsVisible:false
    }
  },
  props: {

  },
  computed: {

  },
  methods: {
    async showRichText(data){
      this.richText = data
      this.viewRichTextVisible = true
    },
    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 = {
        authUserId:'',
        userName:'',
        gender:'',
        age:'',
        marriage:'',
        nation:'',
        occupation:'',
        birthPlace:'',
        presentAddress:'',
        workUnit:'',
        idCardNum:'',
        phoneNum:'',
        admittedTime:'',
        recordTime:'',
        allergicCondition:'',
        historyNarrative:'',
      },
      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>
.rich-text-view{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  word-wrap: break-word;
  word-break: break-all;
  .rich-text{
    width: 100%;
    height: 1000px;
    word-break:break-all;
    word-warp:break-word;
    border: 2px solid #dc2828;
  }
}
</style>
