<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.recorderId" label="记录者">
        {{handleTypeByValue(particularsData.recorderId,authUserIdOption)}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.monitorSubject" label="监测要素名称">
        {{particularsData.monitorSubject}}
      </a-descriptions-item>
      <a-descriptions-item v-if="particularsData.resultValue" label="结果值">
        {{particularsData.resultValue}}
      </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:'',
        recorderId:'',
        monitorSubject:'',
        resultValue:'',
      },
      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:'',
        recorderId:'',
        monitorSubject:'',
        resultValue:'',
      },
      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>
