<template>
  <div class="visit-review-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 阅片 -->
      <el-tab-pane v-if="taskInfo" :label="$t('trials:reading:tabTitle:review')" name="read">
        <read-page ref="readPage" :reading-tool="readingTool" />
      </el-tab-pane>
      <!-- 报告 -->
      <el-tab-pane
        v-if="taskInfo && !taskInfo.IseCRFShowInDicomReading"
        :label="$t('trials:reading:tabTitle:report')"
        name="report"
      >
        <report-page
          v-if="taskInfo.CriterionType !== 0"
          ref="reportPage"
          @setReadingTaskState="setReadingTaskState"
        />
        <customize-report-page
          v-if="taskInfo.CriterionType === 0"
          ref="reportPage"
          @setReadingTaskState="setReadingTaskState"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ReadPage from './ReadPage'
import ReportPage from './ReportPage'
import CustomizeReportPage from './customize/ReportPage'
export default {
  name: 'VisitReview',
  components: {
    ReadPage,
    ReportPage,
    CustomizeReportPage
  },
  props: {
    readingTool: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 'read',
      taskInfo: null
    }
  },
  mounted() {
    this.taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
  },
  methods: {
    setReadingTaskState(state) {
      this.$refs['readPage'].setReadingTaskState(state)
    },
    handleClick(tab) {
      if (tab.name === 'report') {
        this.$refs['reportPage'].getReportInfo()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.visit-review-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 5px;

  ::v-deep .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-tabs__item {
      color: #fff;
    }

    .el-tabs__item.is-active {
      color: #428bca;
    }

    .el-tabs__item:hover {
      color: #428bca;
    }

    .el-tabs__header {
      height: 50px;
      margin: 0px;
    }

    .el-tabs__content {
      flex: 1;
      margin: 0px;
    }

    .el-tab-pane {
      height: 100%;
    }

  }
}
</style>
