<template>
  <div v-loading="loading" class="chat-wrapper">
    <div class="chat-content">
      <div v-for="(record,index) in recordContent" :key="index">
        <div v-if="!record.IsCurrentUser" class="word">
          <!-- <img :src="record.headUrl"> -->
          <img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
          <img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
          <img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
          <img v-else-if="record.UserTypeEnum*1 === 3" :src="qcAvatar" alt="QC">
          <div class="info">
            <p class="user-info">
              <span style="font-weight:700;">{{ record.CreateUserName }} </span>
              <span>({{ record.CreateTime }}) </span>
            </p>
            <div class="info-content" v-html="record.TalkContent" />
          </div>
        </div>

        <div v-else class="word-my">
          <div class="info">
            <p class="user-info">
              <span style="font-weight:700;">{{ record.CreateUserName }} </span>
              <span>({{ record.CreateTime }}) </span>
            </p>
            <div class="info-content" v-html="record.TalkContent" />
          </div>
          <!-- <img :src="record.headUrl"> -->
          <img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
          <img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
          <img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
          <img v-else-if="record.UserTypeEnum*1 === 3" :src="qcAvatar" alt="QC">
        </div>
      </div>
    </div>
    <div
      v-show="showNewMessage"
      v-if="hasPermi(['trials:trials-panel:visit:crc-upload:send'])"
      class="chat-message"
    >
      <div class="message">
        <el-input
          v-model="newMessage"
          type="textarea"
          :rows="2"
        />
      </div>
      <div class="function">
        <!-- 申请重传 -->
        <el-button
          v-show="ReuploadEnum === 0 || ReuploadEnum === 3"
          v-hasPermi="['trials:trials-panel:visit:crc-upload:apply-reupload']"
          type="primary"
          @click="handleCRCApplyReupload"
        >
          {{ $t('trials:crcQuestion:button:applyReupload') }}
        </el-button>
        <!-- 重传 -->
        <el-button
          v-show="ReuploadEnum === 2"
          v-hasPermi="['trials:trials-panel:visit:crc-upload:reupload']"
          type="primary"
          :loading="uploadBtnLoading"
          @click="openUploadDialog"
        >
          {{ $t('trials:crcQuestion:button:reupload') }}
        </el-button>
        <!-- 确认重传完成 -->
        <el-button
          v-show=" ReuploadEnum === 2"
          v-hasPermi="['trials:trials-panel:visit:crc-upload:set-reupload-finished']"
          type="primary"
          @click="handleSetUploadFinished"
        >
          {{ $t('trials:crcQuestion:button:reuploadCompleted') }}
        </el-button>
        <!-- 发送 -->
        <el-button
          v-hasPermi="['trials:trials-panel:visit:crc-upload:send']"
          :disabled="newMessage===''"
          type="primary"
          :loading="btnLoading"
          @click="handleReply"
        >
          {{ $t('trials:crcQuestion:button:send') }}
        </el-button>
        <!-- 关闭 -->
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="close"
        >
          {{ $t('trials:crcQuestion:button:close') }}
        </el-button>
      </div>
    </div>

    <!-- 上传Dicom/非Dicom文件 -->
    <el-dialog
      v-if="uploadVisible"
      :visible.sync="uploadVisible"
      :fullscreen="true"
      append-to-body
      custom-class="upload-dialog"
    >
      <span slot="title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <label style="float: left;margin-right:10px;">Upload: </label>
          <el-breadcrumb-item v-show="trialCode">{{ trialCode }}</el-breadcrumb-item>
          <el-breadcrumb-item v-show="data.TrialSiteCode">{{ data.TrialSiteCode }}</el-breadcrumb-item>
          <el-breadcrumb-item v-show="data.SubjectCode">{{ data.SubjectCode }}</el-breadcrumb-item>
          <el-breadcrumb-item v-show="data.VisitName">{{ `${data.VisitName} (${data.VisitNum})` }}</el-breadcrumb-item>
        </el-breadcrumb>
      </span>
      <div>
        <el-tabs v-model="activeName" type="border-card">
          <!-- DICOM影像上传 -->
          <el-tab-pane :label="$t('trials:uploadedDicoms:tab:uploadDicoms')" name="dicom">
            <upload-dicom-files v-if="uploadVisible" :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.SubjectVisitId" @close="closeUpload" @getList="reFreshList" />
          </el-tab-pane>
          <!-- 非DICOM影像上传 -->
          <el-tab-pane :label="$t('trials:uploadNonDicoms:tab:uploadNonDicoms')" name="non-dicom">
            <upload-non-dicom-files v-if="activeName==='non-dicom'" :data="data" :site-id="data.SiteId" :subject-id="data.SubjectId" :allow-add-or-edit="true" :body-parts="bodyParts" :modalities="modalities" :subject-visit-id="data.SubjectVisitId" @getList="reFreshList" />
          </el-tab-pane>
          <!-- 临床数据采集 -->
          <el-tab-pane v-if="clinicalEnum>0" :label="$t('trials:uploadClinicalData:tab:uploadClinicalData')" name="clinical-data">
            <upload-clinical-data v-if="activeName==='clinical-data'" :allow-add-or-edit="true" :data="data" :subject-visit-id="data.SubjectVisitId" :enum-type="clinicalEnum" @getList="reFreshList" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 临床数据签名框 -->
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <div slot="title">
        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
      </div>
      <SignForm ref="signForm" :sign-code-enum="signCode" :subject-visit-id="data.SubjectVisitId" @closeDialog="closeReuploadFinishedDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { getQCChallengeDialogList, addQCChallengeReply, cRCRequestReUpload, verifyReuploadIsCanJump } from '@/api/trials'
import { setReuploadFinished } from '@/api/trials/visit'
import adminAvatar from '@/assets/Admin.png'
import pmAvatar from '@/assets/PM.png'
import crcAvatar from '@/assets/CRC.png'
import qcAvatar from '@/assets/QC.png'
import UploadDicomFiles from '@/views/trials/trials-panel/visit/crc-upload/components/uploadDicomFiles2'
import UploadNonDicomFiles from '@/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles'
import UploadClinicalData from '@/views/trials/trials-panel/visit/crc-upload/components/uploadClinicalData'
import SignForm from '@/views/trials/components/newSignForm'
import dicomStore from '@/utils/dicom-store'
import const_ from '@/const/sign-code'
export default {
  name: 'ChatForm',
  components: { UploadDicomFiles, UploadNonDicomFiles, UploadClinicalData, SignForm },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    bodyParts: {
      type: String,
      default: ''
    },
    modalities: {
      type: String,
      default: ''
    },
    signText: {
      type: String,
      default: ''
    },
    clinicalEnum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      recordContent: [],
      newMessage: '',
      showNewMessage: false,
      loading: false,
      btnLoading: false,
      userId: zzSessionStorage.getItem('userId'),
      adminAvatar,
      pmAvatar,
      crcAvatar,
      qcAvatar,
      trialCode: this.$route.query.trialCode,
      needReUpload: false,
      uploadVisible: false,
      setUploadLoading: false,
      activeName: 'dicom',
      isReuploaded: false,
      currentUser: zzSessionStorage.getItem('userName'),
      signVisible: false,
      signCode: '',
      ReuploadEnum: 0,
      trialId: '',
      uploadBtnLoading: false

    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.$set(this.data, 'TrialId', this.$route.query.trialId)
    if (!this.data.IsClosed) {
      this.showNewMessage = true
    }
    this.ReuploadEnum = this.data.ReuploadEnum * 1
    this.getMessageList()
  },
  methods: {
    // 初始化聊天信息
    getMessageList() {
      var recordContent = []
      var contents = []
      if (this.data.Content && this.data.Content.indexOf('|') !== -1) {
        contents = this.data.Content.split('|')
      } else if (this.data.Content && this.data.Content !== '') {
        contents.push(this.data.Content)
      }

      var li = contents.map(content => { return `<li>${content}</li>` })
      const content = `
                        <div>${this.$t('trials:qcQuality:dialog:qcContent')}
                        <ol>
                        ${li.join('')}
                        </ol>
                        </div>
                        <p>
                        ${this.$t('trials:qcQuality:dialogTips:tip')}
                        </p>
                        <p style='color:red'>${this.$t('trials:qcQuality:dialog:deadline')}: ${this.data.DeadlineTime ? this.data.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}</p>`
      const userId = zzSessionStorage.getItem('userId')
      recordContent.push(
        {
          IsCurrentUser: this.data.CreateUserId === userId,
          TalkContent: content,
          CreateTime: this.data.CreateTime,
          CreateUserName: this.data.CreateUserName,
          CreateUserId: this.data.CreateUserId,
          UserTypeEnum: this.data.UserTypeEnum
        }
      )
      this.data.DialogList.forEach(element => {
        recordContent.push(element)
      })
      this.recordContent = recordContent
      this.setScrollHeight()
    },
    addMessage(newMsg) {
      this.recordContent.push(newMsg)
      this.setScrollHeight()
    },
    getMessageList2() {
      this.loading = true
      var recordContent = []
      var contents = []
      if (this.data.Content && this.data.Content.indexOf('|') !== -1) {
        contents = this.data.Content.split('|')
      } else if (this.data.Content && this.data.Content !== '') {
        contents.push(this.data.Content)
      }

      var li = contents.map(content => { return `<li>${content}</li>` })
      const content = `
                        <div>${this.$t('trials:qcQuality:dialog:qcContent')}
                        <ol>
                        ${li.join('')}
                        </ol>
                        </div>
                        <p>
                        ${this.$t('trials:qcQuality:dialogTips:tip')}
                        </p>
                        <p style='color:red'>${this.$t('trials:qcQuality:dialog:deadline')}: ${this.data.DeadlineTime ? this.data.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}</p>`
      const userId = zzSessionStorage.getItem('userId')
      recordContent.push(
        {
          IsCurrentUser: this.data.CreateUserId === userId,
          TalkContent: content,
          CreateTime: this.data.CreateTime,
          CreateUserName: this.data.CreateUserName,
          CreateUserId: this.data.CreateUserId,
          UserTypeEnum: this.data.UserTypeEnum
        }
      )
      getQCChallengeDialogList(this.data.Id).then(res => {
        this.loading = false
        res.Result.forEach(element => {
          recordContent.push(element)
        })
        this.recordContent = recordContent
        this.setScrollHeight()
      }).catch(() => {
        this.loading = false
      })
    },
    setScrollHeight() {
      setTimeout(() => {
        var container = document.querySelectorAll('.chat-content')[0]
        container.scrollTop = container.scrollHeight
      }, 100)
    },
    // 回复质疑
    handleReply() {
      if (!this.newMessage) return
      this.btnLoading = true
      var params = {
        talkContent: this.newMessage,
        qcChallengeId: this.data.Id,
        subjectVisitId: this.data.SubjectVisitId
      }
      addQCChallengeReply(this.trialId, params).then(res => {
        this.btnLoading = false
        if (res.IsSuccess) {
          // this.getMessageList()
          this.newMessage = ''
          this.reFreshList()
        }
      }).catch(() => { this.btnLoading = false })
    },
    // 打开重传框
    openUploadDialog() {
      const qcChallengeId = this.data.Id
      if (!qcChallengeId) return
      this.uploadBtnLoading = true
      verifyReuploadIsCanJump(this.trialId, qcChallengeId).then(res => {
        this.uploadBtnLoading = false
        if (res.IsSuccess) {
          dicomStore.studyList = []
          this.uploadVisible = true
        }
      }).catch(() => {
        // this.getMessageList()

        this.$emit('getDialogList')
        this.uploadBtnLoading = false
      })
    },
    close() {
      this.$emit('close')
    },
    // 刷新父组件列表
    reFreshList() {
      this.$emit('getDialogList')
    },
    // 关闭上传弹框
    closeUpload() {
      this.uploadVisible = true
    },
    // CRC申请重传
    handleCRCApplyReupload() {
      this.$confirm(this.$t('trials:crcQuestion:message:applyReupload'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          cRCRequestReUpload(this.trialId, this.data.SubjectVisitId, this.data.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.ReuploadEnum = 1
                this.$message.success(this.$t('common:message:savedSuccessfully'))
                // this.getMessageList()
                this.reFreshList()
              }
              this.loading = false
            }).catch(() => { this.loading = false })
        }).catch(() => {})
    },
    // 设置重传完成
    handleSetUploadFinished() {
      // 签名认证
      if (this.clinicalEnum > 0 && this.data.IsBaseLine) {
        const { ClinicalDataConfirmation } = const_.processSignature
        this.signCode = ClinicalDataConfirmation
        this.signVisible = true
      } else {
        this.$confirm(this.$t('trials:crcQuestion:message:reuploadConfirm'), {
          type: 'warning',
          distinguishCancelAndClose: true
        })
          .then(() => {
            this.setReuploadFinished()
          }).catch(() => {})
      }
    },
    setReuploadFinished(signInfo) {
      this.loading = true
      var params = {
        data: {
          QcChallengeId: this.data.Id,
          TrialId: this.trialId,
          SetOrCancel: true
        },
        signInfo: signInfo
      }
      setReuploadFinished(params)
        .then(res => {
          if (signInfo) {
            this.$refs['signForm'].btnLoading = false
            this.signVisible = false
          }
          this.loading = false
          if (res.IsSuccess) {
            this.ReuploadEnum = 3
            this.$message.success(this.$t('common:message:savedSuccessfully'))

            // this.getMessageList()
            this.reFreshList()
          }
        }).catch(() => {
          this.loading = false
          this.$refs['signForm'].btnLoading = false
        })
    },
    // 关闭重传完成签名弹窗
    closeReuploadFinishedDialog(isSign, signInfo) {
      if (isSign) {
        this.setReuploadFinished(signInfo)
      } else {
        this.signVisible = false
      }
    }
  }

}

</script>
<style lang="scss">
.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-my{
      display: flex;
      justify-content: flex-end;
      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;
        }
      }
    }
  }
  .chat-message{
    padding: 0 50px;
    .function{
      margin-top: 10px;
      text-align: right;
    }
  }
  ol{
    margin: 5px;
    padding: 0px 10px;
  }
}
</style>
