<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>任務(wù)名稱(chēng)</th>
          <th>剩余時(shí)間</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>{{ task.name }}</td>
          <td>{{ task.remainingTime }} 秒</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted } from 'vue';

const tasks = reactive([
  { id: 1, name: '任務(wù)A', remainingTime: 60 },
  { id: 2, name: '任務(wù)B', remainingTime: 120 },
  { id: 3, name: '任務(wù)C', remainingTime: 180 },
]);

let intervalId;

onMounted(() => {
  intervalId = setInterval(() => {
    tasks.forEach(task => {
      if (task.remainingTime > 0) {
        task.remainingTime -= 1;
      }
    });
  }, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 審核時(shí)間列 -->
      <el-table-column
        label="審核時(shí)間"
        align="center"
        prop="appointmentReviewTime"
        :formatter="dateFormatter"
        width="170px"
      />

      <!-- 還柜時(shí)間列 -->
      <el-table-column
        label="還柜時(shí)間"
        align="center"
        prop="appointmentEndTime"
        :formatter="dateFormatter"
        width="170px"
      />

      <!-- 倒計(jì)時(shí)列 -->
      <el-table-column label="倒計(jì)時(shí)" align="center" width="170px">
        <template #default="scope">
          <span>{{ formatCountdown(scope.row.appointmentEndTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    // 表格數(shù)據(jù)，appointmentEndTime 是固定的時(shí)間
    const tableData = ref([
      {
        appointmentReviewTime: '2024-09-20 12:00:00',
        appointmentEndTime: '2024-09-20 14:00:00' // 固定時(shí)間
      },
      {
        appointmentReviewTime: '2024-09-21 15:00:00',
        appointmentEndTime: '2024-09-21 17:00:00' // 固定時(shí)間
      }
    ]);

    // 倒計(jì)時(shí)格式化函數(shù)
    const formatCountdown = (endTime) => {
      const now = new Date().getTime();
      const endTimestamp = new Date(endTime).getTime();
      const remainingTime = endTimestamp - now;

      // 如果已過(guò)期，返回 "已結(jié)束"
      if (remainingTime <= 0) {
        return '已結(jié)束';
      }

      const hours = Math.floor(remainingTime / (1000 * 60 * 60));
      const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

      return `${hours}小時(shí) ${minutes}分鐘 ${seconds}秒`;
    };

    // 使用 setInterval 動(dòng)態(tài)更新倒計(jì)時(shí)
    const intervalId = ref(null);
    onMounted(() => {
      intervalId.value = setInterval(() => {
        // 強(qiáng)制觸發(fā)視圖更新
        tableData.value = [...tableData.value];
      }, 1000);
    });

    // 清除計(jì)時(shí)器
    onBeforeUnmount(() => {
      clearInterval(intervalId.value);
    });

    return {
      tableData,
      formatCountdown
    };
  }
};
</script>

const formatCountdown = (endTime) => {
  const now = new Date().getTime();
  const endTimestamp = new Date(endTime).getTime();
  const remainingTime = endTimestamp - now;

  // 如果已過(guò)期，返回 "已過(guò)期" 并標(biāo)記為需要重新預(yù)約
  if (remainingTime <= 0) {
    return { text: '已過(guò)期', isExpired: true };
  }

  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  // 分時(shí)秒的格式化
  return { text: `${hours}小時(shí) ${minutes}分鐘 ${seconds}秒`, isExpired: false };
};

<el-table-column label="還柜剩余時(shí)間" align="center" width="155px">
  <template #default="scope">
    <span>{{ formatCountdown(scope.row.appointmentEndTime).text }}</span>
  </template>
</el-table-column>

<el-button
  link
  type="primary"
  @click="showRejectionReason(scope.row.id)"
  v-if="scope.row.appointmentEndTime !== null && formatCountdown(scope.row.appointmentEndTime).isExpired"
  v-hasPermi="['dangerous:appointment-commission:query']"
>
  重新預(yù)約
</el-button>

// 倒計(jì)時(shí)格式化函數(shù)
const formatCountdown = (endTime,id) => {
  const now = new Date().getTime();
  const endTimestamp = new Date(endTime).getTime();
  const remainingTime = endTimestamp - now;

  // 設(shè)置一個(gè)容忍時(shí)間范圍（例如，1秒）
  const tolerance = 1000; // 1秒

  
  // 當(dāng)時(shí)間接近到達(dá)時(shí)，發(fā)送請(qǐng)求到后端更新?tīng)顟B(tài)
  if (remainingTime <= tolerance && remainingTime > 0) {
    console.log(1); // 確保能夠輸出
  }

  // 如果已過(guò)期，返回 "已過(guò)期" 并標(biāo)記為需要重新預(yù)約
  if (remainingTime < 0) {
    return { text: '已過(guò)期', isExpired: true };
  }

  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  // 分時(shí)秒的格式化
  return { text: `${hours}小時(shí) ${minutes}分鐘 ${seconds}秒`, isExpired: false };
};