<template>
  <div class="historical-record-content">

    <el-tabs v-model="activeName" type="border-card" tab-position="left" @tab-click="handleClick">

      <el-tab-pane v-for="item in list" :key="item.Id" :name="item.Id">
        <span slot="label">
          <span>{{ `${item.UserName}(${$fd('ResearchRecord', item.State)})` }}</span>
        </span>
        <ResearchForm v-if="tabs.includes(item.Id)" :trial-site-survey-id="item.Id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getTrialSiteSurveySelectList } from '@/api/trials'
import ResearchForm from './ResearchForm'
export default {
  name: 'HistoricalRecord',
  components: { ResearchForm },
  props: {
    trialId: {
      type: String,
      required: true
    },
    siteId: {
      type: String,
      required: true
    },
    trialSiteSurveyId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      activeName: '',
      tabs: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取非Dicom检查信息
    getList() {
      this.loading = true
      var param = {
        trialId: this.trialId,
        siteId: this.siteId,
        trialSiteSurveyId: this.trialSiteSurveyId
      }
      getTrialSiteSurveySelectList(param).then(res => {
        this.list = res.Result
        if (this.list.length > 0) {
          this.activeName = this.list[0].Id
          this.tabs.push(this.activeName)
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleClick(tab) {
      if (!this.tabs.includes(tab.name)) {
        this.tabs.push(tab.name)
      }
    }
  }
}
</script>
<style lang="scss">
.historical-record-content{
  height: 100%;
  ::-webkit-scrollbar {
    width: 8px;
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .el-tabs{
    height: 100%;
    .el-tabs__content,.el-tabs__header{
      height:100%;
    }
    .el-tab-pane{
      height: 100%;
      overflow-y: auto;
    }
  }
  .el-tabs--left .el-tabs__nav.is-left, .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left, .el-tabs--right .el-tabs__nav.is-right {
    height: 100%;
    overflow-y: auto;
  }
  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }

}
</style>
