<template>
  <el-dialog :visible.sync="visible" :fullscreen="true" :close-on-click-modal="false" :before-close="beforeClose"
    :append-to-body="true" class="uploadDicomAndNonedicom">
    <span slot="title">{{ title }}</span>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane :label="$t('uploadDicomAndNonedicom:label:dicom')" name="dicom" v-if="!IsImageSegment">
        <dicomFile v-if="activeName === 'dicom'" :SubjectId="SubjectId" :SubjectCode="SubjectCode"
          :Criterion="Criterion" :TaskId="VisitTaskId" :isUpload.sync="isUpload"
          :isReadingTaskViewInOrder="isReadingTaskViewInOrder" :IsImageSegment="IsImageSegment" :forbid="forbid"
          :isReading="isReading" />
      </el-tab-pane>
      <el-tab-pane :label="$t('uploadDicomAndNonedicom:label:nonedicom')" name="nonedicom">
        <nonedicomFile v-if="activeName === 'nonedicom'" :SubjectId="SubjectId" :SubjectCode="SubjectCode"
          :Criterion="Criterion" :VisitTaskId="VisitTaskId" :isUpload.sync="isUpload" :IsImageSegment="IsImageSegment"
          :isReadingTaskViewInOrder="isReadingTaskViewInOrder" :forbid="forbid" :isReading="isReading" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import dicomFile from './dicomFile.vue'
import nonedicomFile from './nonedicomFile.vue'
import store from '@/store'
export default {
  name: 'uploadDicomAndNonedicom',
  components: { dicomFile, nonedicomFile },
  props: {
    visible: {
      required: true,
      type: Boolean,
      default: false,
    },
    forbid: {
      type: Boolean,
      default: false,
    },
    SubjectId: {
      type: String,
      default: '',
    },
    SubjectCode: {
      type: String,
      default: '',
    },
    Criterion: {
      type: Object,
      default: () => {
        return {}
      },
    },
    VisitTaskId: {
      type: String,
      default: '',
    },
    isReadingTaskViewInOrder: {
      type: Number,
      default: 0,
    },
    IsImageSegment: {
      type: Boolean,
      default: false,
    },
    isReading: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      title: '',
      activeName: 'dicom',
      isUpload: false,
    }
  },
  watch: {
    IsImageSegment() {
      if (this.IsImageSegment) this.activeName = 'nonedicom'
    }
  },
  mounted() {
    this.title = `Upload Images：${this.SubjectCode}（${this.Criterion.TrialReadingCriterionName}）`
    if (this.IsImageSegment) this.title = `Upload Images：${this.SubjectCode}`
    if (this.isReadingTaskViewInOrder === 0) this.title = ''
    if (this.IsImageSegment) this.activeName = 'nonedicom'
    store.dispatch('trials/setUnLock', true)
  },
  methods: {
    beforeClose() {
      if (
        this.$route.path !== '/trials/trials-panel/reading/readingTask' &&
        this.isUpload
      ) {
        return window.location.reload()
      }
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
}

.uploadDicomAndNonedicom {
  ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
    color: #909399;
  }

  ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #428bca;
    background-color: #fff;
    border-right-color: #dcdfe6;
    border-left-color: #dcdfe6;
  }
}
</style>