<template>
  <div class="siteResearch-wrapper">
    <el-row>
      <el-col :span="12">
        <!-- 中心调研 -->
        <h3>{{ $t('trials:workbench:title:pendingSiteResearch') }}</h3>
      </el-col>
      <el-col :span="12" style="text-align:right;">
        <h3>
          <Pagination class="page" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" layout="total, sizes, prev, pager, next" :background="false" style="display: inline-block;" @pagination="getList" />
          <!-- 重置 -->
          <el-button icon="el-icon-refresh-left" circle :title="$t('common:button:reset')" size="small" @click="handleReset" />
        </h3>
      </el-col>
    </el-row>
    <el-table
      ref="siteResearchList"
      v-loading="listLoading"
      :data="list"
      :show-header="true"
      v-adaptive="{bottomOffset:45}"
      height="100"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />
      <!-- 项目编号 -->
      <el-table-column
        :label="$t('trials:workbench:table:trialId')"
        prop="TrialCode"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 试验名称 -->
      <el-table-column
        :label="$t('trials:workbench:table:experimentName')"
        prop="ExperimentName"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 研究方案号 -->
      <el-table-column
        :label="$t('trials:workbench:table:researchNo')"
        prop="ResearchProgramNo"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 待审批中心数量 -->
      <el-table-column
        :label="$t('trials:pendingSiteResearch:table:siteCount')"
        prop="ApprovalRequiredSiteCount"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        :label="$t('common:action:action')"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit-outline"
            circle
            :disabled="!!~trialIdList.indexOf(scope.row.TrialId) || isSignSystemDoc"
            :title="$t('trials:pendingSiteResearch:action:audit')"
            @click="handleAudit(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSiteSurveyApprovalList } from '@/api/trials'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
  return {
    pageIndex: 1,
    pageSize: 20,
    asc: true,
    sortField: ''
  }
}
export default {
  name: 'SiteResearch',
  components: { Pagination },
  props: {
    trialIdList: {
      type: Array,
      default() { return [] }
    },
    isSignSystemDoc: {
      type: Boolean,
      default() { return false }
    }
  },
  data() {
    return {
      listLoading: false,
      list: [],
      listQuery: searchDataDefault(),
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getSiteSurveyApprovalList(this.listQuery).then(res => {
        this.listLoading = false
        this.total = res.Result.TotalCount
        this.list = res.Result.CurrentPageData
      }).catch(() => { this.listLoading = false })
    },
    handleAudit(row) {
      this.$router.push({ path: `/trials/trials-panel/attachments/site-research?trialId=${row.Id}&trialCode=${row.TrialCode}&researchProgramNo=${row.ResearchProgramNo}` })
    },
    handleReset() {
      this.listQuery = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.siteResearchList.clearSort()
      })
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.asc = true
      } else {
        this.listQuery.asc = false
      }
      this.listQuery.sortField = column.prop
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.siteResearch-wrapper{
  height: 100%;
}

</style>
