<template>
    <Page>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="设备名称">
                <el-input v-model="formInline.searchValue" placeholder="请输入设备名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            highlight-current-row
            header-cell-class-name="table_header"
            border
            style="width: 100%"
            :data="tableData"
            height="calc(100vh - 225px)"
            v-loading="loading"
        >
            <el-table-column prop="devName" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="operatorName" label="操作用户" align="center"></el-table-column>
            <el-table-column prop="processName" label="操作内容" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
        </el-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :current-page="formInline.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        ></el-pagination>
    </Page>
</template>

<script>
import { queryDebugLog } from '@/api/app/device'
import timepicker from '@/views/components/TimePicker/index4'

export default {
    name: 'GovernLogOperation',
    components: {
        timepicker
    },
    data() {
        return {
            interval: 3,
            total: '',
            formInline: {
                searchBeginTime: '',
                searchEndTime: '',
                searchState: 0,
                searchValue: '',
                sortBy: '',
                orderBy: '',
                pageNum: 1,
                pageSize: 50
            },
            loading: false,
            tableData: []
            //tabHeight: 'calc(100vh - 255px)',
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem('appheight') - 95
        }
    },
    mounted() {
        this.queryData()
    },
    methods: {
        processText(process) {
            let str = ''
            // 1 2 3 4
            switch (process) {
                case '1':
                    str = '设备登记'
                    break
                case '2':
                    str = '功能调试'
                    break
                case '3':
                    str = '出厂调试'
                    break
                case '4':
                    str = '设备注册'
                    break
                default:
                    str = '未知'
                    break
            }
            return str
        },
        queryData() {
            this.loading = true
            this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
            this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
            queryDebugLog(this.formInline).then(res => {
                if (res.code == 'A0000') {
                    this.total = res.data.total
                    this.tableData = res.data.records.map(item => {
                        return {
                            ...item,
                            processName: this.processText(item.process),
                            endTime: item.endTime || '-'
                        }
                    })
                }
                this.loading = false
            })
        },
        onSubmit() {
            console.log('submit!')
        },
        pageChange(e) {
            console.log('pageChange!')
            console.log(e)
            this.formInline.pageNum = e
            this.queryData()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.queryData()
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: $hoverf !important;
    color: #000 !important;
}
</style>
