<template>
  <el-table :data="data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%; margin-top: 0">
    <el-table-column align="center" label="设备ID" min-width="100" prop="deviceId" />
    <el-table-column align="center" label="起始时间" min-width="200">
      <template #default="scope">
        {{ dayjs(new Date(+scope.row.startTime)).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="截止时间" min-width="200">
      <template #default="scope">
        {{ dayjs(new Date(+scope.row.endTime)).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>

    <el-table-column align="center" header-align="center" label="操作" min-width="100">
      <template #default="scope">
        <el-button :disabled="scope.row.disabled" plain size="small" type="success" @click="handlePass(scope.row)">补传 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import dayjs from 'dayjs';
import { sendCommand } from 'apis';
import { ElMessage } from 'element-plus';

defineProps({ data: Object });
const emit = defineEmits(['on-success']);

const contentHeight = ref(600);

/**
 * 发送补传指令
 * @param { Object } item
 * @returns {Promise<void>}
 */
async function handlePass(item) {
  try {
    await sendCommand({ ...item });
    ElMessage.success('发送成功');
    emit('on-success', item.uuid);
  } catch (error) {
    ElMessage.error(error.message || '发送补传指令失败');
  }
}
</script>
