<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"
      >
        <dicomFile
          v-if="activeName === 'dicom'"
          :SubjectId="SubjectId"
          :SubjectCode="SubjectCode"
          :Criterion="Criterion"
          :TaskId="VisitTaskId"
          :isUpload.sync="isUpload"
          :isReadingTaskViewInOrder="isReadingTaskViewInOrder"
        />
      </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"
        />
      </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,
    },
    SubjectId: {
      type: String,
      default: '',
    },
    SubjectCode: {
      type: String,
      default: '',
    },
    Criterion: {
      type: Object,
      default: () => {
        return {}
      },
    },
    VisitTaskId: {
      type: String,
      default: '',
    },
    isReadingTaskViewInOrder: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      title: '',
      activeName: 'dicom',
      isUpload: false,
    }
  },
  mounted() {
    this.title = `Upload Images：${this.SubjectCode}（${this.Criterion.TrialReadingCriterionName}）`
    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>