<template>
    <div class="dictionary">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="数据来源:">
                <el-cascader
                    placeholder="请选择数据来源"
                    @change="sourceChange"
                    :options="deviceTree"
                    :show-all-levels="false"
                    :props="{ checkStrictly: true }"
                    clearable
                ></el-cascader>
            </el-form-item>
            <el-form-item label="级别:">
                <el-select v-model="formInline.level" placeholder="请选择级别" clearable>
                    <el-option
                        v-for="item in rankOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <timepicker ref="timepk" :interval="3"></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"
            style="width: 100%"
            :data="tableData"
            height="calc(100vh - 280px)"
            border
            v-loading="loading"
        >
            <el-table-column prop="engineeringName" label="工程名称" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
            <el-table-column prop="equipmentName" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="showName" label="事件描述" align="center"></el-table-column>
            <!--            <el-table-column prop="tagName" label="级别" align="center">-->
            <!--            </el-table-column>-->
            <el-table-column prop="startTime" label="发生时刻" align="center" min-width="150px"></el-table-column>
            <!--            <el-table-column prop="date2" label="结束时间" align="center">-->
            <!--            </el-table-column>-->
            <!-- <el-table-column label="操作" width="220px" fixed="right" >
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit">绑定治理指标</el-button>
                </template>
            </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>
    </div>
</template>

<script>
import timepicker from '@/views/components/TimePicker/index4.vue'
import { queryEventpage } from '@/api/app/log'

export default {
    components: { timepicker },
    data() {
        return {
            loading: false,
            formInline: {
                deviceId: '',
                endTime: '',
                engineeringid: '',
                eventIds: [],
                level: '',
                pageNum: 1,
                pageSize: 50,
                projectId: '',
                startTime: '',
                status: '',
                target: [],
                type: 1,
                userId: ''
            },
            total: 0,
            rankOptions: [
                {
                    value: '1',
                    label: '1级'
                },
                {
                    value: '2',
                    label: '2级'
                },
                {
                    value: '3',
                    label: '3级'
                }
            ],
            tableData: [],
            tagList: []
        }
    },
    props: {
        deviceTree: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    computed: {},
    mounted() {
        this.$tools.getDictData('app_event').then(res => {
            this.tagList = res
            console.log(this.tagList)
        })
        this.queryData()
    },
    methods: {
        sourceChange(e) {
            console.log(e)
            this.formInline.engineeringid = e[0] || ''
            this.formInline.projectId = e[1] || ''
            this.formInline.deviceId = e[2] || ''
        },
        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()
        },
        queryData() {
            this.loading = true
            this.formInline.startTime = this.$refs.timepk.timeValue[0]
            this.formInline.endTime = this.$refs.timepk.timeValue[1]
            queryEventpage(this.formInline).then(res => {
                console.log(res)
                this.loading = false
                if (res.code === 'A0000') {
                    this.tableData = res.data.records.map(item => {
                        return {
                            tagName: this.tagList.find(item2 => item2.code === item.tag)
                                ? this.tagList.find(item2 => item2.code === item.tag).name
                                : item.tag,
                            ...item
                        }
                    })
                    this.total = res.data.total
                }
            })
        },
        onSubmit() {
            console.log('submit!')
        },
        del() {
            this.$confirm('确定删除该字段吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        }
    }
}
</script>
<style lang="scss"></style>
