<template>
  <div class="visit-review-container">
    <el-tabs
      v-model="activeName"
    >
      <!-- 阅片 -->
      <el-tab-pane
        v-if="taskInfo"
        :label="$t('trials:reading:tabTitle:review')"
        name="read"
      >
        <read-page />
      </el-tab-pane>
      <!-- 报告 -->
      <el-tab-pane
        v-if="taskInfo && !taskInfo.IseCRFShowInDicomReading"
        :label="$t('trials:reading:tabTitle:report')"
        name="report"
      >
        <report-page v-if="activeName === 'report'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ReadPage from './components/ReadPage'
import ReportPage from './components/ReportPage'
export default {
  name: 'VisitReview',
  components: {
    ReadPage,
    ReportPage
  },
  data() {
    return {
      activeName: 'read',
      taskInfo: null
    }
  },
  mounted() {
    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
  }
}
</script>
<style lang="scss" scoped>
  .visit-review-container {
    height: 100vh;
    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>
