<template>
  <div v-loading="loading" class="history-chat">
    <el-tabs tab-position="left" type="card" @tab-click="clickTab">
      <el-tab-pane v-for="(item,index) in list" :key="item.Id">
        <span slot="label">
          {{ item.ChallengeCode }}
          <i v-show="!item.IsClosed" class="el-icon-message-solid" style="color:red" />
        </span>
        <div class="chat-wrapper">
          <div class="chat-content">
            <div v-for="record in item.DialogList" :key="record.Id">
              <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-if="!item.IsClosed" class="chat-message">
            <div class="message">
              <el-input :maxLength="$inputMax"
                v-model="newMessage"
                type="textarea"
                :rows="2"
              />
            </div>
            <div class="function">
              <!-- 申请重传 -->
              <el-button
                v-show="(item.ReuploadEnum === 0 || item.ReuploadEnum === 3) "
                v-hasPermi="['trials:trials-panel:visit:crc-upload:apply-reupload']"
                type="primary"
                :loading="applyBtnLoading"
                @click="handleCRCApplyReupload(item)"
              >
                {{ $t('trials:reuploadDicoms:button:applyReupload') }}
              </el-button>
              <!-- 重传 -->
              <el-button
                v-show="item.ReuploadEnum === 2"
                v-hasPermi="['trials:trials-panel:visit:crc-upload:reupload']"
                type="primary"
                :loading="uploadBtnLoading"
                @click="openUploadDialog(index)"
              >
                {{ $t('trials:reuploadDicoms:button:reupload') }}
              </el-button>
              <!-- 确认重传完成 -->
              <el-button
                v-show="item.ReuploadEnum === 2"
                v-hasPermi="['trials:trials-panel:visit:crc-upload:set-reupload-finished']"
                type="primary"
                :disabled="item.IsReuploaded"
                :loading="reuploadedFinishbtnLoading"
                @click="handleSetUploadFinished(index)"
              >
                {{ $t('trials:reuploadDicoms:button:reuploadFinished') }}
              </el-button>
              <!-- 发送 -->
              <el-button
                v-hasPermi="['trials:trials-panel:visit:crc-upload:send']"
                :disabled="newMessage===''"
                type="primary"
                :loading="btnLoading"
                @click="handleReply(item.Id,index)"
              >
                {{ $t('trials:reuploadDicoms:button:send') }}
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 上传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 class="base-modal-body" style="display: flex;flex-direction: column;">
        <el-tabs v-model="activeName" type="border-card" style="flex:1;">
          <!-- DICOM影像上传 -->
          <el-tab-pane
            :label="$t('trials:uploadedDicoms:tab:uploadDicoms')"
            name="dicom"
          >
            <upload-dicom-files :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.Id" @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" :allow-add-or-edit="true" :body-parts="bodyParts" :modalities="modalities" :subject-visit-id="data.Id" @getList="reFreshList" />
          </el-tab-pane>
          <!-- 临床数据采集 -->
          <el-tab-pane
            v-if="data.IsBaseLine && clinicalEnum>0"
            :label="$t('trials:uploadClinicalData:tab:uploadClinicalData')"
            name="clinical-data"
          >
            <upload-clinical-data v-if="activeName==='clinical-data'" :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.Id" :allow-add-or-edit="true" :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.Id" @closeDialog="closeClinicalDataSignDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { getCRCVisitChallengeAndDialog, verifyReuploadIsCanJump, addQCChallengeReply, cRCRequestReUpload } 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 './uploadDicomFiles'
import UploadNonDicomFiles from './uploadNonDicomFiles'
import UploadClinicalData from './uploadClinicalData'
import SignForm from '@/views/trials/components/newSignForm'
import dicomStore from '@/utils/dicom-store'
import const_ from '@/const/sign-code'
export default {
  name: 'HistoryChat',
  components: { UploadDicomFiles, UploadNonDicomFiles, UploadClinicalData, SignForm },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    bodyParts: {
      type: String,
      default: ''
    },
    modalities: {
      type: String,
      default: ''
    },
    clinicalEnum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      btnLoading: false,
      newMessage: '',
      userId: zzSessionStorage.getItem('userId'),
      trialCode: this.$route.query.trialCode,
      adminAvatar,
      pmAvatar,
      crcAvatar,
      qcAvatar,
      uploadVisible: false,
      activeName: 'dicom',
      currentChallengeIndex: null,
      signVisible: false,
      signCode: '',
      currentUser: zzSessionStorage.getItem('userName'),
      trialId: this.$route.query.trialId,
      uploadBtnLoading: false,
      applyBtnLoading: false,
      reuploadedFinishbtnLoading: false
    }
  },
  mounted() {
    this.initChat()
  },
  methods: {
    clickTab(tab) {
      this.setScrollHeight(tab.index * 1)
    },
    // 初始化聊天记录
    initChat(index) {
      var list = []
      this.loading = true
      getCRCVisitChallengeAndDialog(this.data.Id, this.data.QCProcessEnum).then(res => {
        res.Result.forEach(item => {
          var contents = []
          if (item.Content && item.Content.indexOf('|') !== -1) {
            contents = item.Content.split('|')
          } else if (item.Content && item.Content !== '') {
            contents.push(item.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')}: ${item.DeadlineTime ? item.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}</p>`
          const userId = zzSessionStorage.getItem('userId')
          var recordContent = []
          recordContent.push(
            {
              IsCurrentUser: item.CreateUserId === userId,
              TalkContent: content,
              CreateTime: item.CreateTime,
              CreateUserName: item.CreateUserName,
              CreateUserId: item.CreateUserId,
              UserTypeEnum: item.UserTypeEnum

            }
          )
          recordContent.push(...item.DialogList)
          list.push({ Id: item.Id, ChallengeCode: item.ChallengeCode, IsClosed: item.IsClosed, ReuploadEnum: item.ReuploadEnum * 1, DialogList: recordContent, Content: item.Content, DeadlineTime: item.DeadlineTime, IsOverTime: item.IsOverTime })
          this.list = Object.assign({}, list)
          this.loading = false
          this.setScrollHeight(index || 0)
        })
      }).catch(() => { this.loading = false })
    },
    setScrollHeight(index) {
      setTimeout(() => {
        var container = document.querySelectorAll('.chat-content')[index]
        container.scrollTop = container.scrollHeight
      }, 100)
    },
    // 回复质疑
    handleReply(qcChallengeId, index) {
      if (!this.newMessage) return
      this.btnLoading = true
      var params = {
        talkContent: this.newMessage,
        qcChallengeId: qcChallengeId,
        subjectVisitId: this.data.Id
      }
      addQCChallengeReply(this.data.TrialId, params).then(res => {
        if (res.IsSuccess) {
          // this.list[index].DialogList.push({ IsCurrentUser: true, TalkContent: this.newMessage, CreateTime: res.Result.CreateTime, CreateUserName: res.Result.CreateUserName, CreateUserId: res.Result.CreateUserId, UserTypeEnum: res.Result.UserTypeEnum })
          this.initChat(index)
          this.newMessage = ''
        }
        this.btnLoading = false
      }).catch(() => { this.btnLoading = false })
    },
    // 打开上传弹窗
    openUploadDialog(index) {
      const qcChallengeId = this.list[index].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.initChat(index)
        this.$emit('getList')
        this.uploadBtnLoading = false
      })
    },
    // 关闭重传弹框
    closeUpload() {
      this.uploadVisible = false
    },
    // 刷新父组件列表
    reFreshList() {
      this.$emit('getList')
    },
    // 设置重传完成
    handleSetUploadFinished(index) {
      if (this.clinicalEnum > 0 && this.data.IsBaseLine) {
        this.currentChallengeIndex = index
        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.currentChallengeIndex = index
            this.setReuploadFinished()
          }).catch(() => {})
      }
    },
    setReuploadFinished(signInfo) {
      this.loading = true
      var item = Object.assign({}, this.list[this.currentChallengeIndex])
      var params = {
        data: {
          QcChallengeId: item.Id,
          TrialId: this.trialId,
          SetOrCancel: true
        },
        signInfo: signInfo
      }
      this.loading = true
      this.reuploadedFinishbtnLoading = true
      setReuploadFinished(params)
        .then(res => {
          this.loading = false
          this.reuploadedFinishbtnLoading = false
          if (res.IsSuccess) {
            if (signInfo) {
              this.$refs['signForm'].btnLoading = false
              this.signVisible = false
            }
            this.list[this.currentChallengeIndex].ReuploadEnum = 3
            this.initChat()
            // this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.reFreshList()
          }
        }).catch(() => {
          this.loading = false
          this.reuploadedFinishbtnLoading = false
          this.$refs['signForm'].btnLoading = false
        })
    },
    // 关闭临床数据签名弹窗
    closeClinicalDataSignDialog(isSign, signInfo) {
      if (isSign) {
        this.setReuploadFinished(signInfo)
      } else {
        this.signVisible = false
      }
    },
    // crc申请重传
    handleCRCApplyReupload(item) {
      this.$confirm(this.$t('trials:crcQuestion:message:applyReupload'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.applyBtnLoading = true
          cRCRequestReUpload(this.trialId, this.data.Id, item.Id)
            .then(res => {
              this.applyBtnLoading = false
              if (res.IsSuccess) {
                item.ReuploadEnum = 1
                this.initChat()
                // this.$message.success(this.$t('common:message:savedSuccessfully'))
                this.$forceUpdate()
                this.reFreshList()
              }
            }).catch(() => { this.applyBtnLoading = false })
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.history-chat{
  height: 500px;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  >>>.el-tabs{
    >>>.el-tabs__header{
      width: 100px;
      margin-right: 10px;
      height: 500px;
      overflow-y: auto;
    }
    >>>.el-tabs__content{
      margin-right: 10px;
      height: 500px;
      width: calc(100%-120px);
      overflow-y: auto;
    }
    .chat-wrapper{
      background-color: #f5f7fa;
      height: 500px;
      display: flex;
      flex-direction: column !important;
      overflow: hidden;
      .chat-content{
        width:100%;
        padding: 20px;
        // height: 400px;
        overflow-y: auto;
        flex: 1;
        .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{
        height: 100px;
        padding: 0 50px;
        .function{
          margin-top: 10px;
          text-align: right;
        }
      }
      ol{
        margin: 5px;
        padding: 0px 10px;
      }
    }

  }

}
</style>
