<template>
  <div class="page flex justify-around">
    <el-table
      :data="tableData"
      style="width: 100%; height: 90%"
      size="large"
      align="center"
    >
      <el-table-column
        prop="name"
        :label="$t('keyMangage.name')"
        width="220"
        align="center"
      />

      <el-table-column
        prop="status"
        :label="$t('keyMangage.status')"
        width="220"
        align="center"
      >
        <template #default="scope">
          <span
            :style="1 * scope.row.status ? 'color: #ff0000' : 'color: #36db43'"
            >{{ getStatus(scope.row.status) }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        :label="$t('keyMangage.operations')"
        width="220"
        align="center"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="showDetail(scope.row.id)"
            >{{ $t("keyMangage.check") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<!-- videoType==1为竖,==2为横 -->
<script setup>
//#region  导入
import { linkEmits } from "element-plus";
import { getCurrentInstance } from "vue";

import { keyListApi } from "@/api_mangage/key";

import { useI18n } from "vue-i18n";

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const tableData = ref([]);

const showDetail = (id) => {
  router.push({
    path: "/keyCheck",
    query: {
      id,
    },
  });
};

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getStatus = (val) => {
  return val * 1 ? "失效" : "正常";
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  getKeyListFunc(pageNum.value, pageSize.value);
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  getKeyListFunc(pageNum.value, pageSize.value);
};

const getKeyListFunc = async (PageNum, PageSize) => {
  try {
    const res = await keyListApi(PageNum, PageSize);
    console.log(res, "res");
    tableData.value = res.data.list;
    total.value = res.data.total * 1;
  } catch (error) {
    console.log(error, "err");
  }
};

onMounted(() => {
  getKeyListFunc(1, 10);
});
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 80px);
  // height: calc(100vh - 80px);
  background-color: #ffffff;
  border-radius: 30px 0 0 0;
  overflow: hidden;
  padding: 10vh;
  .pagination {
    position: fixed;
    left: 55%;
    bottom: 8vh;
    transform: translateX(-50%);
    border-radius: 5px;
    padding: 10px 20px;
    z-index: 99;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      background-color: #b8b8b873;
    }
  }
}
</style>
