<template>
  <el-tabs class="data-sync-tabs" type="border-card" tab-position="left" v-model="activeTab" >
    <!-- 检查列表 -->
    <el-tab-pane :label="$t('trials:data-sync:label:studyList')" name="study">
      <StudyList v-if="activeTab === 'study'"/>
    </el-tab-pane>
    <!-- 其他 -->
    <el-tab-pane :label="$t('trials:data-sync:label:otherList')" name="other">
      <el-tabs v-if="activeTab === 'other'" class="detail-tabs" v-model="tabInfo.activeTab" @tab-click="handleDetailTabClick">
        <!-- 文件级别 -->
        <el-tab-pane :label="$t('trials:data-sync:label:fileList')" name="file">
          <FileList
            v-if="tabInfo.activeTab === 'file'"
            :dataFileType="2"
            @openTaskTable="openTaskTable"
          />
        </el-tab-pane>
        <!-- 任务级别 -->
        <el-tab-pane :label="$t('trials:data-sync:label:taskList')" name="task">
          <TaskList 
            v-if="tabInfo.activeTab === 'task'" 
            :rowInfo="tabInfo.currentRow"
            :fileUploadRecordId="fileUploadRecordId"
            :path="path"
          />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import StudyList from './components/StudyList'
import FileList from './components/FileList'
import TaskList from './components/TaskList'
export default {
  name: 'DataSync',
  components: {
    StudyList,
    FileList,
    TaskList
  },
  data(){
    return {
      activeTab: 'study',
      tabInfo: {
        activeTab: 'file',
        currentRow: {}
      },
      fileUploadRecordId: '',
      path: ''
    }
  },
  methods: {
    openTaskTable(obj) {
      this.tabInfo.currentRow = obj || {}
      this.fileUploadRecordId = obj.Id
      this.path = obj.Path
      this.tabInfo.activeTab = 'task'
    },
    handleDetailTabClick(tab) {
      const name = tab.name
      if (name === 'file') {
        this.fileUploadRecordId = ''
        this.path = ''
      }
    },
  }
}
</script>
<style lang="scss">
.data-sync-tabs{
  height: 100%;
  background-color: #fff;
  > .el-tabs__header {
    height: 100%;
  }
  > .el-tabs__content {
    height: 100%;
    padding: 0px;
    overflow: auto;
  }
  > .el-tabs__content > .el-tab-pane {
    height: 100%;
  }
}
.detail-dialog {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .el-dialog__header {
    flex: 0 0 auto;
    padding-bottom: 0px;
  }

  .el-dialog__body {
    padding-top: 10px;
    flex: 1 1 auto;
    overflow: hidden;
  }

  &.is-fullscreen {
    .el-dialog__body {
      margin-top: 10px;
      height: calc(100% - 80px);
    }
  }
}
.detail-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  .el-tabs__header {
    flex: 0 0 auto;
    margin: 0 0 8px;
  }
  .el-tabs__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .el-tab-pane {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}
</style>
