<template>
  <div>
    <el-table
      v-loading="loading"
      :data="list"
      stripe
      height="455"
    >
      <el-table-column type="index" width="40" />
      <!-- 中心编号 -->
      <el-table-column
        prop="TrialSiteCode"
        :label="$t('trials:linkedRP:table:siteCode')"
      />
      <!-- 受试者编号 -->
      <el-table-column
        prop="SubjectCode"
        :label="$t('trials:linkedRP:table:subjectCode')"
      />
      <!-- 截止访视 -->
      <el-table-column
        prop="SubjectVisitName"
        :label="$t('trials:linkedRP:table:expirationVisit')"
      />
      <!-- 最晚拍片日期 -->
      <el-table-column
        prop="LatestScanDate"
        :label="$t('trials:linkedRP:table:latestScanDate')"
      >
        <template slot-scope="scope">
          {{ scope.row.LatestScanDate?moment(scope.row.LatestScanDate).format('YYYY-MM-DD'):'' }}
        </template>
      </el-table-column>
      <!-- 截止日期 -->
      <el-table-column
        prop="ExpirationDate"
        :label="$t('trials:linkedRP:table:expirationDate')"
      >
        <template slot-scope="scope">
          {{ scope.row.ExpirationDate?moment(scope.row.ExpirationDate).format('YYYY-MM-DD'):'' }}
        </template>
      </el-table-column>
      <!-- 阅片期名称 -->
      <el-table-column
        prop="ReadingPeriodName"
        :label="$t('trials:linkedRP:table:readingName')"
      />
      <!-- 生效时间 -->
      <el-table-column
        prop="EffectOfTime"
        :label="$t('trials:linkedRP:table:effectiveTime')"
      />
    </el-table>
    <!-- 分页组件 -->
    <div style="text-align:right;">
      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
    </div>
  </div>

</template>
<script>
import { getPreviewTheReadingPlanList } from '@/api/trials'
import Pagination from '@/components/Pagination'
import moment from 'moment'
const searchDataDefault = () => {
  return {
    ReadingPeriodSetId: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'RelationPRList',
  components: { Pagination },
  props: {
    trialReadingCriterionId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() { return {} }
    }
  },
  data() {
    return {
      searchData: searchDataDefault(),
      loading: false,
      list: [],
      total: 0,
      moment
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.searchData.ReadingPeriodSetId = this.data.Id
      this.searchData.TrialReadingCriterionId = this.trialReadingCriterionId
      this.loading = true
      getPreviewTheReadingPlanList(this.searchData).then(res => {
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
        this.loading = false
      }).catch(() => { this.loading = false })
    }
  }
}
</script>
