<template>
  <basic-container
    class="management"
    style="margin-bottom:30px;"
  >
    <el-select
      v-model="value"
      filterable
      style="float:right;width:300px;"
      placeholder="请选择"
      @change="projectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.projectName"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-table
      :data="tableData"
      class="tableList"
      style="width: 100%;"
    >
      <el-table-column
        prop="projectName"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="personalCount"
        label="个人证书（个）"
      >
      </el-table-column>
      <el-table-column
        prop="enterpriseCount"
        label="企业证书（个）"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="see(scope.row.contractId)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float:right"
      background
      class="martop10 marbottom10"
      layout="prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageindex"
      :page-size="pagesize"
    >
    </el-pagination>
  </basic-container>
</template>
<script>
import { queryProjectList, } from "@/api/certificate/list";
import { singPfxManagementPage, } from "@/api/certificate/management";
export default {
  data () {
    return {
      options: [],
      value: '',
      tableData: [{}],
      total: 0,
      pageindex: 1,
      pagesize: 10,
    }
  },
  methods: {
    //#region
    projectChange () {//项目名称选择
      this.singPfxManagementPage()
    },
    async queryProjectList () {
      const { data: res } = await queryProjectList();
      if (res.code == 200) {
        this.options = res.data
      }
    },
    async singPfxManagementPage () {
      const { data: res } = await singPfxManagementPage({
        current: this.pageindex,
        size: this.pagesize,
        projectId: this.value,
      });
      if (res.code == 200) {
        this.tableData = res.data.records
        this.total = res.data.total
      }
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.singPfxManagementPage()
    },
    handleCurrentChange (val) {
      this.pageindex = val
      this.singPfxManagementPage()
    },
    //#endregion

    //#region
    see (contractId) {
      this.$router.push({
        path: '/certificate/management/see',
        query: {
          contractId
        }
      })
    },
    //#endregion
  },
  created () {
    this.queryProjectList()
    this.singPfxManagementPage()
  }
}
</script>

<style lang="scss" scoped>
.management {
  .tableList {
    ::v-deep th.el-table__cell {
      font-size: 16px !important;
    }
  }
}
</style>
