<template>
<message-bubble :isMine=isMine :message=message>
  <div class="custom-element-wrapper">
    <span v-if="payload.data === 'startInquiry'" class="text"   >
      {{text}}
    </span>
    <span v-if="payload.data === 'finishInquiry'" class="text"   >
      {{text}}
    </span>
    <span v-if="payload.data === 'prescribe'" class="text"   >
      处方单
    </span>
    <span v-if="payload.data === 'follow'" class="text" @click="openFollow(payload)"   >
      随访单
    </span>
    <span v-if="payload.data === 'report'" class="text"   >
      问诊报告单
    </span>
    <span v-if="payload.data === 'drugReport'" class="text" @click="openDrugReport(payload)"  >
      用药报告单
    </span>
    <span v-else    >
      {{text}}
    </span>
    <el-drawer  :append-to-body="true" :with-header="false" size="75%" :title="show.title" :visible.sync="show.open">
      <followDetails  v-if="show.type==1"    ref="followDetails" />
      <drugReportDetails    v-if="show.type==2"  ref="drugReportDetails" />
    </el-drawer>
  </div>
</message-bubble>
</template>

<script>
import { mapState } from 'vuex'
import MessageBubble from '../message-bubble'
import followDetails from '@/views/components/follow/followDetails.vue';
import drugReportDetails from '@/views/components/drugReport/drugReportDetails.vue';
export default {
  name: 'CustomElement',
  props: {
    payload: {
      type: Object,
      required: true
    },
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean
    }
  },
  data() {
    return {
      show:{
        open:false,
        type:0,
        title:""
      },
    }
  },
  components: {
    MessageBubble,
    followDetails,
    drugReportDetails
  },
  computed: {
    ...mapState({
      currentUserProfile: state => state.imuser.currentUserProfile
    }),
    text() {
      return this.translateCustomMessage(this.payload)
    },
  },
  methods: {
    openFollow(data){
      var that=this;
      var followId=JSON.parse(data.extension).followId;
      this.show.open=true;
      this.show.type=1;
      this.show.title="随访单"
      setTimeout(() => {
        that.$refs.followDetails.getDetails(followId,"随访单");
      }, 500);
    },
    openDrugReport(data){
      var that=this;
      var reportId=data.description;
      this.show.open=true;
      this.show.type=2;
      this.show.title="用药报告单"
      setTimeout(() => {
        that.$refs.drugReportDetails.getDetails(reportId);
      }, 500);
    },
    translateCustomMessage(payload) {
      let videoPayload = {}
      try{
        videoPayload = JSON.parse(payload.data)
      } catch(e) {
        videoPayload = {}
      }
      if (payload.data === 'group_create') {
        return `${payload.extension}`
      }
      if (videoPayload.roomId) {
        videoPayload.roomId = videoPayload.roomId.toString()
        videoPayload.isFromGroupLive = 1
        return videoPayload
      }
      if(payload.text) {
        return payload.text
      }else{
        var obj=JSON.parse(payload.extension);
        return obj.title
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.text
  font-weight bold
.title
  font-size 16px
  font-weight 600
  padding-bottom 10px
.survey
  background-color white
  color black
  padding 20px
  display flex
  flex-direction column
.suggestion
  padding-top 10px
  font-size 14px
</style>
