<template>
<table v-if="show">
  <thead>
    <tr>
      <th>序号</th>
      <th>经度</th>
      <th>纬度</th>
    </tr>
  </thead>
  <tbody id="point-list">
    <tr v-for="item, index in point.items" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ item ? item.lng : ''}}</td>
      <td>{{ item ? item.lat : ''}}</td>
    </tr>
  </tbody>
</table>
</template>

<script setup>
import { computed } from 'vue'
import { usePointStore } from '../stores/point'

const point = usePointStore()
const show  = computed(() => point.index)
</script>

<style scoped>
table {
  color: #FFFFFF;
  background-color: #242424;
  padding: 10px;
  border-radius: 7px;
  border-collapse: separate;
  border-spacing: 2px;
}

table th:first-child {
  width: 60px;
}

table th:not(:first-child) {
  width: 120px;
}

table thead tr {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(even) {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(odd) {
  background-color: rgba(84, 84, 84, 0.25);
}

table th, table td {
  padding: 3px 5px;
}
</style>
