<template>
    <div class="app-container">
        <el-card style="margin-bottom: 6px">
            <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
                style="margin-bottom: -20px">
                <el-form-item label="设备名称" prop="deviceName">
                    <el-input v-model="queryParams.deviceName" clearable placeholder="设备名称" size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" size="mini" type="primary" @click="getList">{{ $t('search')
                    }}</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset')
                    }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="main-card">
            <el-table :border="false" :data="tableData" border style="width: 100%">
                <el-table-column align="center" label="设备名称" prop="deviceName" width="180px"></el-table-column>
                <el-table-column align="center" label="设备编号" prop="serialNumber" width="180px"></el-table-column>
                <el-table-column align="center" label="异常数据" prop="abnormalData"></el-table-column>
                <el-table-column align="center" label="创建时间" width="200px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                :total="total" @pagination="getList" />
        </el-card>
    </div>
</template>

<script>
import { getDeviceAbnormalList } from '@/api/iot/device';

export default {
    name: 'Index',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceName: null,
            },
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            getDeviceAbnormalList(this.queryParams).then((rp) => {
                this.tableData = rp.rows;
                this.total = rp.total;
            });
        },
        resetQuery() {
            this.queryParams.deviceName = null;
            this.queryParams.pageNum = 1;
            this.getList();
        },
    },
};
</script>

<style></style>
