<script setup>
import { onMounted , ref } from "vue";

import { getAuthList } from '@/api';
import router from "@/router";

const authList = ref([]);

onMounted(async()=>{
  let res = await getAuthList();
  if(res.code===200){
    authList.value = res.data;
  }
})

const handleEdit = (user_id)=>{
  router.push({path:'/card',query:{user_id: user_id}});
}

</script>

<template>
  <div class="getauth page">
    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
      <template #title>
        <h5 class="text-white mb-1"><strong>代客編輯商務卡片</strong></h5>
      </template>
      <template #left>
        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
      </template>
    </van-nav-bar>

    <div class="content">
      <van-cell-group inset>
        <table id="auth-list">
          <thead>
            <tr>
              <th>授權會員</th>
              <th>授權時間</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="v of authList" :key="v.id">
              <td>{{v.user_id}}</td>
              <td>{{v.auth_time}}</td>
              <td @click="handleEdit(v.user_id)">編輯</td>
            </tr>
          </tbody>
        </table>
      </van-cell-group>
    </div>
  </div>
</template>

<style src="@/assets/css/main.css"></style>

<style lang="less" scoped>
  table#auth-list{
    width: 100%;
    thead th{
      color: #fff;
      background-color: #4a677d;
    }
    tr:nth-child(even){
      background-color: #f2f2f2;
    }
    th,td{
      padding: 5px 10px;
    }
  }
</style>