<template>
  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
      <el-table-column align="center" label="开始时间" min-width="200">
        <template #default="scope">
          {{ dayjs(+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(+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="150">
        <template #default="scope">
          <StatusTagPending :type="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="类型" min-width="150">
        <template #default="scope">
          <span v-if="scope.row && scope.row.type && PENDING_TYPE[scope.row.type]">{{ PENDING_TYPE[scope.row.type].text }}</span>
        </template>
      </el-table-column>
    </el-table>
  </template>
</template>

<script setup>
import { defineProps, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { PENDING_TYPE } from '@/config/config';

defineProps({ data: Object });

const contentHeight = ref(600);

onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight.value = winHeight - 150;
});
</script>
