<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="ts" label="响应时间">
            </el-table-column>
            <el-table-column prop="reportTime" label="上报时间">
            </el-table-column>
            <el-table-column prop="logMessage" label="命令">
            </el-table-column>
            <el-table-column prop="reply" label="响应">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    {{scope.row.status=='OK'?'成功':'失败'}}
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-bottom: 20px;margin-top: 20px;" @current-change="paginationChange" background layout="pager" :total="total" />
    </div>
</template>

<style>
.el-table .warning-row {
    background: red;
    color: #FFF;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

<script setup>
import { getDeviceLogs } from '@/api/system/device'

const tableData = ref([])
const total = ref(0)

const params = ref({
    pageSize: 10,
    pageNum: 1
})

const props = defineProps({
  deviceNo :String
});

params.type = props.type

const tableRowClassName = ({
    row,
    rowIndex,
}) => {
    if (row.status == 'ERROR') {
        return 'warning-row'
    }
    return 'success-row'
}

const findDeviceLogs = () => {
    params.value.deviceNo = props.deviceNo
    getDeviceLogs(params.value).then(res => {
        tableData.value = res.rows
        total.value = res.total
    })
}

const paginationChange=(current)=>{
    params.value.pageNum = current
    findDeviceLogs()
}
findDeviceLogs()
</script>