<template>
  <div class="full-container-p24">
    <div class="mb30">
      <el-button-group class="mr30">
        <el-button
          :type="type == 1 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 1), getCertList()"
        >
          当月
        </el-button>
        <el-button
          :type="type == 2 ? 'primary' : ''"
          @click="(currentPage = 1), (type = 2), getCertList()"
        >
          下月
        </el-button>
      </el-button-group>
    </div>
    <el-table :data="tableData" stripe style="width: 1000px">
      <el-table-column align="center" type="index" label="序号" width="60" />
      <el-table-column
        align="center"
        prop="shipname"
        label="船名"
        width="180"
      />
      <el-table-column
        align="center"
        prop="shipOwnerName"
        label="船东姓名"
        width="180"
      />
      <el-table-column
        align="center"
        prop="shipOwnerPhone"
        label="手机号"
        width="180"
      />
      <el-table-column
        align="center"
        prop="endValidTime"
        label="有效期"
        width="180"
      />
      <el-table-column align="center" label="详情" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            text
            @click="goToDetail(scope.row.shipCode)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="df aic jcfe mt40 mr20">
      <el-pagination
        :current-page="currentPage"
        @current-change="pageChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";
const route = useRoute();
let type = ref(1);
let certType = ref(1);
let tableData = ref([]);
let total = ref(0);
let currentPage = ref(1);

async function getCertList() {
  let { data } = await api.getCertList({
    type: type.value,
    certType: 5,
    currentPage: currentPage.value,
    size: 10,
  });
  if (data.status == 0) {
    total.value = data.total;
    tableData.value = data.result;
  } else {
    total.value = 0;
    tableData.value = [];
  }
}
function pageChange(e) {
  currentPage.value = e;
  getCertList();
}
function goToDetail(shipCode) {
  router.push({
    path: "/shipManage/shipDetail",
    query: {
      shipCode,
    },
  });
}

onMounted(() => {
  getCertList();
});
</script>

<style scoped></style>
