<template>
    <el-container style="padding:0px;height:77vh;">
        <el-header style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;'>
            <span class="title-bold title-left-color">告警类型维护</span>
            <el-popover placement="bottom" width="150">
                <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools"
                    style='float:right;transform:translateY(6px)'>筛选</el-button>
                <el-checkbox-group v-model="checkList">
                    <el-col :span="24">
                        <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index">
                            <span>{{item.label}}</span>
                        </el-checkbox>
                    </el-col>
                </el-checkbox-group>
            </el-popover>
        </el-header>
        <el-main class="box_main" style="padding:0px;">
            <el-card>
                <div class="tableCard">
                    <drag-table :data="tableData" :header="checkList" :option="tableOption" @getDataList="getDataList"
                        v-loading="loading" :isShowOperate="false">
                        <el-table-column slot="fixed" fixed prop="" label="序号" header-align="center" align="center"
                            width=80>
                            <template slot-scope="scope">
                                <span>{{scope.$index+(pageIndex - 1) * pageSize + 1}}</span>
                            </template>
                        </el-table-column>

                        <template slot='level' slot-scope="scope">
                            <font v-if="scope.row.level === 1">特别重大</font>
                            <font v-if="scope.row.level === 2">重大</font>
                            <font v-if="scope.row.level === 3">一般</font>
                        </template>

                    </drag-table>
                </div>
            </el-card>
        </el-main>
        <el-footer>
            <el-pagination background @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </el-footer>
    </el-container>
</template>

<script>
import dragTable from '../../components/tab'

    export default {
        data() {
            return {
                loading: true,
                tableData: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                sort: '',
                order: '',
                paramLevel: 1,
                checkList: [],
                tableHeader: [
                    { label: '告警类型名称', prop: 'name' },
                    { label: '告警类型等级', prop: 'level', slot: true },
                    { label: '阈值', prop: 'sysvalue' }
                ],
                tableOption: {
                    border: false, //是否边框
                    maxHeight: 500 //高度
                }
            }
        },
        watch: {
            totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
                let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
                //总页数小于当前页数则重新加载列表数据
                if (pages < this.pageIndex) {
                    this.pageIndex = pages || 1
                    this.getDataList()//获取表格数据的方法
                }
            }
        },
        components: {
            dragTable
        },
        created() {
            this.checkList = [...this.tableHeader]
            this.getDataList()
        },
        methods: {
            sortChange(column) {
                if (column.order === 'descending') {
                    this.order = 'desc'
                } else {
                    this.order = 'asc'
                }
                if (column.column.columnKey) {
                    this.sort = column.column.columnKey
                } else {
                    this.sort = column.prop
                }
                this.getDataList()
            },
            getDataList(sort, order) {
                this.$http({
                    url: this.$http.adornUrl(`/eqAlarmType/list`),
                    method: 'post',
                    data: {
                        stationId: localStorage.getItem('stationId'),
                        page: this.pageIndex,
                        rows: this.pageSize,
                        sort: sort,
                        order: order
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.tableData = data.page.rows
                        this.totalPage = data.page.total
                    } else {
                        this.tableData = []
                        this.totalPage = 0
                    }
                    this.loading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            }
        }
    }

</script>

<style lang='scss' scoped>
</style>
