<template>
  <div class="clinical-data_content">
    <el-divider />

    <h4 style="margin:0">
      <!-- 提示： -->
      {{ $t('trials:readingPeriod:cd:title:tips') }}
    </h4>
    <h5>
      <!-- 当前访视/阅片期需要采集“临床数据名称”。请采集临床数据后，按照模板上传，并签名确认。 -->
      {{ $t('trials:readingPeriod:cd:title:tips1') }}
    </h5>
    <h5>
      {{ $t('trials:readingPeriod:cd:title:tips2') }}
    </h5>
    <div class="top">
      <!-- 预览 -->
      <el-button
        type="primary"
        icon="el-icon-view"
        size="small"
        :disabled="list.length===0"
        @click="handlePreview()"
      >
        {{ $t('trials:readingPeriod:cd:title:preview') }}
      </el-button>
      <!-- 添加 -->
      <el-button
        v-if="otherInfo.IsCanAddClinicalData && hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])"
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="handleAdd"
      >
        {{ $t('common:button:add') }}
      </el-button>
    </div>
    <div class="main">
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        style="width: 100%"
        height="500"
      >
        <el-table-column type="index" width="40" />
        <!-- 临床数据名称 -->
        <el-table-column
          prop="ClinicalDataSetName"
          :label="$t('trials:readingPeriod:cd:table:clinicalDataName')"
        />
        <!-- 数据级别 -->
        <el-table-column
          prop="ClinicalDataLevel"
          :label="$t('trials:readingPeriod:cd:table:dataLevel')"
        >
          <template slot-scope="scope">
            {{ $fd('ClinicalLevel',scope.row.ClinicalDataLevel) }}
          </template>
        </el-table-column>
        <!-- 传输方式 -->
        <el-table-column
          prop="ClinicalUploadType"
          :label="$t('trials:readingPeriod:cd:table:transferType')"
        >
          <template slot-scope="scope">
            {{ $fd('ClinicalUploadType',scope.row.ClinicalUploadType) }}
          </template>
        </el-table-column>
        <!-- 文件数量 -->
        <el-table-column
          prop="FileCount"
          :label="$t('trials:readingPeriod:cd:table:fileCount')"
        >
          <template slot-scope="scope">
            {{ scope.row.ClinicalUploadType === 0?'NA':scope.row.FileCount }}
          </template>
        </el-table-column>
        <!-- 阅片临床数据状态 -->
        <el-table-column
          prop="ReadingClinicalDataState"
          :label="$t('trials:readingPeriod:cd:title:cdStatus')"
          width="150"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ReadingClinicalDataState === 0" type="info">{{ $fd('ReadingClinicalDataState', scope.row.ReadingClinicalDataState) }}</el-tag>
            <el-tag v-if="scope.row.ReadingClinicalDataState === 1" type="danger">{{ $fd('ReadingClinicalDataState', scope.row.ReadingClinicalDataState) }}</el-tag>
            <el-tag v-if="scope.row.ReadingClinicalDataState === 2" type="primary">{{ $fd('ReadingClinicalDataState', scope.row.ReadingClinicalDataState) }}</el-tag>
            <el-tag v-if="scope.row.ReadingClinicalDataState === 3" type="warning">{{ $fd('ReadingClinicalDataState', scope.row.ReadingClinicalDataState) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common:action:action')"
          width="260"
        >
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-button
              circle
              :disabled="scope.row.ClinicalUploadType===1 && scope.row.FileCount === 0"
              :title="$t('trials:readingPeriod:cd:action:view')"
              icon="el-icon-view"
              @click="handlePreview(scope.row.Id)"
            />
            <!-- 编辑 -->
            <el-button
              v-hasPermi="['trials:trials-panel:subject:readingPeriod:edit']"
              circle
              :title="$t('trials:readingPeriod:cd:action:edit')"
              icon="el-icon-edit-outline"
              :disabled="scope.row.IsCRCUpload || scope.row.IsSign || scope.row.UploadRole === 0"
              @click="handleEdit(scope.row)"
            />
            <!-- 编辑 -->
            <el-button
              v-hasPermi="['trials:trials-panel:subject:readingPeriod:edit']"
              circle
              title="核查"
              icon="el-icon-s-claim"
              :disabled="scope.row.IsCRCUpload || scope.row.IsSign || scope.row.UploadRole === 0"
              @click="handleVerification(scope.row)"
            />
            <!-- 删除 -->
            <el-button
              v-hasPermi="['trials:trials-panel:subject:readingPeriod:edit']"
              circle
              :title="$t('trials:readingPeriod:cd:action:delete')"
              icon="el-icon-delete"
              :disabled="scope.row.IsCRCUpload || scope.row.IsSign || scope.row.UploadRole === 0"
              @click="handleDelete(scope.row)"
            />
            <!-- 签名 -->
            <!-- <el-button
              v-hasPermi="['trials:trials-panel:subject:readingPeriod:edit']"
              circle
              :title="$t('trials:readingPeriod:cd:action:sign')"
              icon="el-icon-edit"
              :disabled="scope.row.ReadingClinicalDataState !== 2 || scope.row.IsCRCUpload || scope.row.IsSign || scope.row.UploadRole === 0 || !scope.row.IsBlind || !scope.row.IsComplete"
              @click="handleSign(scope.row)"
            /> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或编辑 -->
      <el-dialog
        v-if="addOrUpdateCD.visible"
        :visible.sync="addOrUpdateCD.visible"
        :close-on-click-modal="false"
        :title="addOrUpdateCD.title"
        width="500px"
        append-to-body
        custom-class="base-dialog-wrapper"
      >
        <AddOrEditCD :trial-reading-criterion-id="trialReadingCriterionId" :data="currentData" @close="addOrUpdateCD.visible = false" @getList="getList" />
      </el-dialog>

      <!-- 核查 -->
      <el-dialog
        v-if="verification.visible"
        :visible.sync="verification.visible"
        :close-on-click-modal="false"
        :title="verification.title"
        width="600px"
        append-to-body
        custom-class="base-dialog-wrapper"
      >
        <Verification :data="currentData" @close="verification.visible = false" @getList="getList" @handlePreview="handlePreview" @sign="handleSign" />
      </el-dialog>

      <!-- 签名 -->
      <el-dialog
        v-if="signVisible"
        :visible.sync="signVisible"
        :close-on-click-modal="false"
        width="600px"
        custom-class="base-dialog-wrapper"
        append-to-body
      >
        <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" @closeDialog="closeSignDialog" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getReadingClinicalDataList, deleteReadingClinicalData, ReadClinicalDataSign } from '@/api/trials'
import AddOrEditCD from './AddOrEditCD'
import Verification from './Verification'
import SignForm from '@/views/trials/components/newSignForm'
import const_ from '@/const/sign-code'
import { getToken } from '@/utils/auth'
export default {
  name: 'ClinicalData',
  components: { AddOrEditCD, SignForm, Verification },
  props: {
    trialReadingCriterionId: {
      type: String,
      default() { return '' }
    },
    data: {
      type: Object,
      default() { return {} }
    }
  },
  data() {
    return {
      loading: false,
      searchData: {},
      list: [],
      total: 0,
      dialogVisible: false,
      addOrUpdateCD: { title: '', visible: false },
      verification: { title: '', visible: false },
      currentData: {},
      signCode: '',
      currentUser: zzSessionStorage.getItem('userName'),
      signVisible: false,
      otherInfo: {}
    }
  },
  mounted() {
    console.log(this.data)
    this.getList()
  },
  methods: {
    getList() {
      this.searchData.ReadingId = this.data.Id
      this.searchData.SubjectId = this.data.SubjectId
      this.searchData.IsVisit = this.data.IsVisit
      this.searchData.TrialId = this.data.TrialId
      this.searchData.IsBaseLine = this.data.IsBaseLine
      this.searchData.TrialReadingCriterionId = this.trialReadingCriterionId
      this.loading = true
      getReadingClinicalDataList(this.searchData).then(res => {
        this.list = res.Result
        this.otherInfo = res.OtherInfo
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleAdd() {
      this.currentData = Object.assign({}, { TrialId: this.data.TrialId, ReadingId: this.data.Id, IsVisit: this.data.IsVisit, SubjectId: this.data.SubjectId, IsBaseLine: this.data.IsBaseLine })
      this.addOrUpdateCD.title = this.$t('common:button:new')
      this.addOrUpdateCD.visible = true
    },
    handleEdit(row) {
      this.currentData = { ...row }
      this.currentData.TrialId = this.data.TrialId
      this.currentData.SubjectId = this.data.SubjectId
      this.currentData.ReadingId = this.data.Id
      this.currentData.IsVisit = this.data.IsVisit
      this.currentData.IsBaseLine = this.data.IsBaseLine
      this.addOrUpdateCD.title = this.$t('common:button:edit')
      this.addOrUpdateCD.visible = true
    },
    handleVerification(row) {
      this.currentData = { ...row }
      this.currentData.TrialId = this.data.TrialId
      this.currentData.SubjectId = this.data.SubjectId
      this.currentData.ReadingId = this.data.Id
      this.currentData.IsVisit = this.data.IsVisit
      this.currentData.IsBaseLine = this.data.IsBaseLine
      this.verification.title = this.$t('trials:readingPeriod:cd:title:cdCheck') // '核查'
      this.verification.visible = true
    },
    handleDelete(row) {
      this.$confirm(this.$t('trials:readingPeriod:cd:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          deleteReadingClinicalData(row.Id)
            .then(res => {
              this.loading = false
              if (res.IsSuccess) {
                this.getList()
                this.$message.success(this.$t('common:message:deletedSuccessfully'))
              }
            }).catch(() => { this.loading = false })
        }).catch(() => {})
    },
    handleSign() {
      // this.currentData = { ...row }
      const { CDQualityConfirmation } = const_.processSignature
      this.signCode = CDQualityConfirmation
      this.signVisible = true
    },
    signConfirm(signInfo) {
      this.loading = true
      const params = {
        data: {
          readingClinicalDataId: this.currentData.Id,
          TrialReadingCriterionId: this.trialReadingCriterionId
        },
        signInfo: signInfo
      }
      ReadClinicalDataSign(params).then(res => {
        this.loading = false
        if (res.IsSuccess) {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          this.$refs['signForm'].btnLoading = false

          this.signVisible = false

          this.getList()
          this.$nextTick(() => { this.verification.visible = false })
        }
      }).catch(_ => {
        this.loading = false
        this.$refs['signForm'].btnLoading = false
      })
    },
    // 关闭签名框并设置确认状态
    closeSignDialog(isSign, signInfo) {
      if (isSign) {
        this.signConfirm(signInfo)
      } else {
        this.signVisible = false
      }
    },
    handlePreview(readingClinicalDataId) {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/clinicalData?subjectId=${this.data.SubjectId}&trialId=${this.data.TrialId}&readingId=${this.data.Id}&readingClinicalDataId=${readingClinicalDataId || ''}&TokenKey=${token}`
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.clinical-data_content{
  .top{
    text-align: right;
  }
  >>>.el-divider--horizontal{
    margin: 10px;
  }
}
</style>
