<template>
  <div v-loading="loading" class="chat-wrapper">
    <div class="chat-content">
      <div v-for="(record,index) in recordContent" :key="`${record.CreateTime}${index}`">
        <div :class="[!record.IsCurrentUser?'word':'word-my']">
          <img v-if="record.UserTypeEnumInt*1 === 14" :src="mimAvatar" alt="MIM">
          <img v-else :src="irAvatar" alt="IR">
          <div class="info">
            <p class="user-info">
              <span style="font-weight:700;">{{ record.CreateUserName }} </span>
              <span>({{ record.CreateTime }}) </span>
            </p>
            <div class="info-content">
              
              <template v-if="[14, 30].includes(record.UserTypeEnumInt) && record.Questioning">
                <div>
                  <!-- 您好，根据医学审核反馈，该阅片任务的评估有如下问题需要您确认或澄清： -->
                  {{ $t('trials:medicalFeedback:message:msg1') }}
                  <ol style="font-weight: bold;">
                    {{ record.Questioning }}
                  </ol>
                </div>
                <div v-if="record.FileList && record.FileList.length > 0" style="margin-top:10px;">
                  <!-- 本次医学审核相关截图（如适用）如下： -->
                  {{ $t('trials:medicalFeedback:message:msg2') }}
                  <ol>
                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;"> 
                      <viewer
                        v-if="file.ImagePath"
                        :ref="file.ImagePath"
                        style="margin:0 10px;"
                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
                      >
                        <el-button type="text" @click="previewImage(file.ImagePath)" style="width: 400px;white-space: normal; word-wrap: break-word;text-align: left;">
                          {{ file.FileName }}
                        </el-button>
                        <img
                          v-show="false"
                          crossorigin="anonymous"
                          :src="`${OSSclientConfig.basePath}${file.ImagePath}`"
                          alt="Image"
                        >
                      </viewer>
                    </li>
                  </ol>
                </div>
                <div style="margin-top:10px;">
                  <!-- 根据本项目《独立影像评估章程》的相关约定，该类问题医学审核建议为： -->
                  {{ $t('trials:medicalFeedback:message:msg3') }}
                  <ol>
                    <span class="word_highLight">{{ $fd('AuditAdvice', record.AuditAdviceEnum) }}</span>
                  </ol>
                </div>
                <div style="margin-top:10px;">
                  <!-- 为高效解决/处理以上全部医学反馈问题，麻烦您在对该阅片任务的评估准确复核后，明确是否认可医学反馈问题及结论。如不认可医学反馈，请逐条准确完整回复不认可的原因，非常感谢。 -->
                  {{ $t('trials:medicalFeedback:message:msg4') }}
                </div>
              </template>
              <template v-if="[14, 30].includes(record.UserTypeEnumInt) && record.MedicalDialogCloseEnum!== null">
                <div>{{ $t('trials:medicalFeedback:title:closeReasonEnum') }}{{ $fd('MedicalDialogCloseEnum',record.MedicalDialogCloseEnum) }}</div>
              </template>
              <template v-if="[14, 30].includes(record.UserTypeEnumInt) && record.Content">
                <div>{{ record.Content }}</div>
              </template>

              <template v-if="[13].includes(record.UserTypeEnumInt)">
                <div>
                  {{ $t('trials:medicalFeedback:title:isEndorse') }}{{ $fd('MedicalReviewDoctorUserIdea', record.DoctorUserIdeaEnum) }}
                </div>
                <div v-if="record.DoctorUserIdeaEnum===2"> {{ $t('trials:medicalFeedback:title:reason') }}{{ record.DisagreeReason }}</div>
                <div v-if="record.MedicalDialogCloseEnum!== null">
                  <!-- 是否申请重阅： -->
                  {{ $t('trials:medicalFeedback:title:isRequestReread') }}{{ $fd('YesOrNo', record.IsApplyHeavyReading) }}
                </div>
                <div v-if="record.FileList && record.FileList.length > 0" style="margin-top:5px;">
                  <!-- 本次医学审核相关截图（如适用）如下： -->
                  {{ $t('trials:medicalFeedback:message:msg5') }}
                  <ol>
                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;"> 
                      <viewer
                        v-if="file.ImagePath"
                        :ref="file.ImagePath"
                        style="margin:0 10px;"
                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
                      >
                        <el-button type="text" @click="previewImage(file.ImagePath)">
                          {{ file.FileName }}
                        </el-button>
                        <img
                          v-show="false"
                          crossorigin="anonymous"
                          :src="`${OSSclientConfig.basePath}${file.ImagePath}`"
                          alt="Image"
                        >
                      </viewer>
                    </li>
                  </ol>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="otherInfo && !otherInfo.IsClosedDialog && [14, 30].includes(userTypeEnumInt)"
      class="chat-message"
    >
      <div class="message">
        <el-input
          v-model="newMessage"
          type="textarea"
          :rows="2"
        />
      </div>
      <div class="function">
        <!-- 回复 -->
        <el-button
          :disabled="newMessage===''"
          type="primary"
          @click="handleReply"
        >
          {{ $t('trials:medicalFeedback:button:reply') }}
        </el-button>
        <!-- 关闭 -->
        <el-button
          type="primary"
          @click="handleCloseQc"
        >
          {{ $t('trials:medicalFeedback:button:close') }}
        </el-button>

      </div>
    </div>

    <div v-if="otherInfo && !otherInfo.IsClosedDialog && userTypeEnumInt === 13" class="chat-message">
      <div class="function">
        <!-- 回复 -->
        <el-button
          type="primary"
          @click="handleIRReply"
        >
          {{ $t('trials:medicalFeedback:button:reply') }}
        </el-button>

      </div>
    </div>

    <el-dialog
      v-if="irFeedbackForm.visible"
      :visible.sync="irFeedbackForm.visible"
      :close-on-click-modal="false"
      custom-class="base-dialog-wrapper"
      :title="irFeedbackForm.title"
      width="1200px"
      append-to-body
    >
      <FeedbackForm
        :task-medical-review-id="taskMedicalReviewId"
        :visit-task-id="visitTaskId"
        @getList="getMessageList"
        @close="irFeedbackForm.visible = false"
      />
    </el-dialog>
    
  </div>
</template>
<script>
import { getMedicalReviewDialog, sendMedicalReviewDialog } from '@/api/trials'
import FeedbackForm from '@/views/trials/trials-panel/reading/medical-feedback/components/FeedbackForm'
import mimAvatar from '@/assets/MIM.png'
import irAvatar from '@/assets/IR.png'
export default {
  name: 'ChatForm',
  components: {
    FeedbackForm
  },
  props: {
    taskMedicalReviewId: {
      type: String,
      required: true
    },
    visitTaskId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      recordContent: [],
      newMessage: '',
      showNewMessage: false,
      loading: false,
      userId: zzSessionStorage.getItem('userId'),
      mimAvatar,
      irAvatar,
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      ReuploadEnum: 0,
      trialId: this.$route.query.trialId,
      currentUserId: zzSessionStorage.getItem('userId'),
      otherInfo: {},
      previewDialog: false,
      imagePath: '',
      irFeedbackForm: { visible: false, title: '' }
    }
  },
  mounted() {
    this.getMessageList()
  },
  methods: {
    // 初始化聊天信息
    async getMessageList() {
      try {
        this.loading = true
        var param = {
          taskMedicalReviewId: this.taskMedicalReviewId
        }
        let res = await getMedicalReviewDialog(param)
        this.otherInfo = res.OtherInfo
        this.recordContent = res.Result
        this.setScrollHeight()
        this.loading = false
      } catch(e) {
        console.log(e)
        this.loading = false
      }
    },
    setScrollHeight() {
      setTimeout(() => {
        var container = document.querySelectorAll('.chat-content')[0]
        if (container && container.scrollHeight) {
          container.scrollTop = container.scrollHeight
        }
      }, 100)
    },
    // 回复质疑
    handleReply() {
      if (!this.newMessage) return
      var param = {
        taskMedicalReviewId: this.taskMedicalReviewId,
        content: this.newMessage
      }
      this.loading = true
      sendMedicalReviewDialog(param).then(res => {
        this.loading = false
        if (res.IsSuccess) {
          this.newMessage = ''
          this.getMessageList()
        }
      }).catch(() => { this.loading = false })
    },
    handleCloseQc() {
      this.$emit('handleCloseReply')
    },
    previewImage(path) {
      this.imagePath = `${path}`
      this.previewDialog = true
      this.$refs[path][0].$viewer.show()
    },
    handleIRReply() {
      // '反馈'
      this.irFeedbackForm.title = this.$t('trials:medicalFeedback:title:feedback')

      this.irFeedbackForm.visible = true
    }
  }

}

</script>
<style lang="scss" scoped>
.chat-wrapper{
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .chat-content{
    width:100%;
    padding: 20px;
    height: 500px;
    overflow-y: auto;
    .word{
      display: flex;
      margin-bottom: 20px;
      img{
        width:40px;
        height: 40px;
        border-radius: 50%;
      }
      .info{
        margin-left: 10px;
        .user-info{
          font-size: 12px;
          color:rgba(51,51,51,0.8);
          margin:0;
          height: 20px;
          line-height: 20px;
          margin-top: -5px;
        }
        .info-content{
          padding: 10px;
          font-size: 14px;
          background-color: #ebeef5;
          position: relative;
          margin-top: 8px;
        }
        .info-content::before{
          position: absolute;
          left: -8px;
          top: 8px;
          content: '';
          border-right: 10px solid #ebeef5;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
        }
        .word_highLight{
          color: red;
        }
      }
    }
    .word-my{
      display: flex;
      justify-content: flex-start;
      flex-direction: row-reverse;
      margin-bottom: 20px;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .info{
        width: 90%;
        margin-left: 10px;
        text-align: right;
        .user-info{
          font-size: 12px;
          color: rgba(51,51,51,0.8);
          margin: 0;
          height: 20px;
          line-height: 20px;
          margin-top: -5px;
          margin-right: 10px;
        }
        .info-content{
          position: relative;
          max-width: 70%;
          padding: 10px;
          font-size: 14px;
          float: right;
          margin-right: 10px;
          margin-top: 8px;
          background-color: #7574d9;
          color: #fff;
          text-align: left;
        }
        .info-content::after{
          position: absolute;
          right: -8px;
          top: 8px;
          content: '';
          border-left: 10px solid #7574d9;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
        }
        .word_highLight{
          color: yellow;
        }
      }
      ::v-deep .el-button--text{
        color: #d0d0d0;
      }
    }
  }
  .chat-message{
    padding: 0 50px;
    .function{
      margin-top: 10px;
      text-align: right;
    }
  }
  ol{
    margin: 5px;
    padding: 0px 10px;
    counter-reset: num;
    li{
      counter-increment: num;
      // list-style:none;
    }
  }
  ol.example{counter-reset: num;}
  ol.example li{counter-increment: num; list-style:none;}
}
</style>
