<template>
    <div class="page justify-around">
  
      <el-table
        :data="tableData"
        style="width: 100%; height: 90%"
        size="large"
        align="center"
        border
      >
        <el-table-column
          prop="serviceId"
          label="接入方编码"
          align="center">
          <template #default="scope">
            <el-button type="primary" text @click="getDetail(scope.row.serviceId)">{{ scope.row.serviceId }}</el-button>
          </template>
        </el-table-column>
  
        <el-table-column
          prop="videoTime"
          label="视频时长"
          align="center"
        />
        <el-table-column
          prop="videoUrl"
          label="视频链接"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        >
          <template #default="scope">
            {{ getDate(scope.row.createTime) }}
          </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 { videoListApi  } from '@/apis/home.js'
  
  import { useI18n } from "vue-i18n";
  
  import dayjs from "dayjs";
  
  import { useRoute, useRouter } from "vue-router";
  
  const route = useRoute();
  const router = useRouter();
  
  const tableData = ref([]);
  
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
  const getDate = (val) => {
    return dayjs(Number(val)).format("YYYY-MM-DD");
  };
  
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getBusinessListFunc(pageNum.value, pageSize.value);
  };
  
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    getBusinessListFunc(pageNum.value, pageSize.value);
  };
  
  const getBusinessListFunc = async (PageNum, PageSize) => {
    try {
      const res = await videoListApi(PageNum, PageSize);
      console.log(res, "res");
      tableData.value = res.data.list;
      total.value = res.data.total * 1;
    } catch (error) {
      console.log(error, "err");
    }
  };

  //查看详情
  function getDetail(id) {
    router.push({
    path: "/apiManage",
    query: {
      id,
    },
  });
  }
  onMounted(() => {
    getBusinessListFunc(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;
    .addbtn {
      margin-bottom: 2vh;
    }
    .formData {
      padding: 5vh 3vh;
    }
  
    .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>
  