<template lang='pug'>
    el-container(style="height:71.6vh")
        el-main.box_main(style="margin-top: 0 !important;")
            el-card()
                div.tableCard()
                    el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()")
                        el-form-item(label="")
                            el-input(v-model="dataForm.params" style="width:260px" placeholder="报警编号/报警名称/资源点名称/站点名称" clearable)
                        el-form-item(label="报警等级:")
                            el-select(v-model="dataForm.eventLevel" placeholder="请选择" clearable multiple)
                                el-option(label="特别重大" value=1)
                                el-option(label="重大" value=2)
                                el-option(label="一般" value=3)
                        el-form-item(v-if="systemType === '0'" label="报警类型:")
                            el-select(v-model="dataForm.eventType" style="width:150px" placeholder="请选择" clearable)
                                el-option(v-for="(item,index) in alarmOption" :label="item.eventName" :value="item.id" :key="index")
                        el-form-item(label="发生时间")
                            el-date-picker(v-model="dataForm.startTime" style="width:180px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" clearable)
                            font &nbsp;至&nbsp;
                            el-date-picker(v-model="dataForm.endTime" style="width:180px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" clearable)
                        el-button(@click="getDataList()" size='mini' icon="el-icon-search" type="primary") 查询
                        el-button(@click="reSet()" icon="el-icon-refresh-right" size='mini' type="primary") 重置
                        el-popover( placement="bottom" width="150")
                            el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;')  筛选
                            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}}
                drag-table( :data="dataList" :header="checkList"  :option="tableOption"  @getDataList="getDataList" v-loading="dataListLoading"  :operationNum="2"  :isShowOperate="true")
                    //- -- 插槽
                    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}}

                    template( slot='eventLevel' slot-scope="scope")
                        <div v-if='scope.row.eventLevel==1'><el-badge is-dot class="item1"></el-badge>特别重大</div>
                        <div v-if='scope.row.eventLevel==2'><el-badge is-dot class="item2"></el-badge>重大</div>
                        <div v-if='scope.row.eventLevel==3'><el-badge is-dot class="item3"></el-badge>一般</div>
                    template( slot='status' slot-scope="scope")
                        <div v-if='scope.row.status==3'><el-badge is-dot class="item4"></el-badge>已处理</div>
                    template( slot='eventNumber' slot-scope="scope")
                        font(:title="scope.row.eventNumber") {{scope.row.eventNumber}}
                    template( slot='occurrenceTime' slot-scope="scope")
                        font(:title="scope.row.occurrenceTime") {{scope.row.occurrenceTime}}
                    //- 操作项
                    template( slot-scope="scope" )
                        el-button(type="text" @click="disposeHandle(scope.row)" style="font-weight:400;font-family:Microsoft YaHei;font-size:14px;" v-if="isAuth('alarms:processed:info')") 详情
                        el-button(v-if="scope.row.systemId =='3a64b86b1a5dead8ff9d2ad913744e50' && scope.row.resourceType =='303310efddb34a2e9bf269bdff8a7dc5' && isAuth('alarms:processed:video')" size="text" type="success" @click="openHistoryVideo(scope.row)") 历史视频

        el-footer.box_footer
            el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
            dispose-info(v-if="disposeInfoVisible" ref="disposeInfo" @refreshdatalist="getDataList")
            history-video-info(v-if="historyVideoInfoVisible" ref="historyVideo" @refreshdatalist="getDataList")
</template>
<script>
    import DisposeInfo from './dispose-info'
    import HistoryVideoInfo from './history-video-info'
    import dragTable from '../../../components/tab'

    export default {
        data() {
            return {
                alarmOption: [],
                historyVideoInfoVisible: false,
                dataListLoading: false,
                disposeInfoVisible: false,
                systemType: '',
                dataForm: {},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                sort: '',
                order: '',
                checkList: [],
                tableHeader: [
                    { label: '站点名称', prop: 'stationName' },
                    { label: '报警编号', prop: 'eventNumber', width: 220, slot: true },
                    { label: '报警名称', prop: 'eventName' },
                    { label: '报警类型', prop: 'eventTypeName' },
                    { label: '报警等级', prop: 'eventLevel', slot: true, width: 120 },
                    { label: '资源点名称', prop: 'resourceName' },
                    { label: '发生时间', prop: 'occurrenceTime', slot: true },
                    { label: '发生地点', prop: 'occurrenceSite' },
                    { label: '处理状态', prop: 'status', slot: true, width: 120 }
                ],
                tableOption: {
                    border: false, //是否边框
                    maxHeight: 500 //高度
                }
            }
        },
        components: {
            DisposeInfo,
            HistoryVideoInfo,
            dragTable
        },
        watch: {
            totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
            let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
            //总页数小于当前页数则重新加载列表数据
            if (pages < this.pageIndex) {
                this.pageIndex = pages || 1
                this.getDataList()//获取表格数据的方法
            }
            }
        },
        created() {
            this.checkList = [...this.tableHeader]
            this.initEventType()
        },
        methods: {
            init(systemType) {
                this.systemType = systemType || ''
                this.getDataList()
            },
            initEventType() {
                this.$http({
                    url: this.$http.adornUrlAlarm(`/linkEvent/queryEventList`),
                    method: 'post',
                    data: {
                        stationId: localStorage.getItem('stationId')
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.alarmOption = data.list
                    }
                })
            },
            reSet () {
                this.pageIndex = 1
                this.dataForm = {}
                this.getDataList()
            },
            getDataList(sort, order) {
                if (sort === 'event_type_name' || sort === 'eventTypeName') {
                    sort = 'event_type'
                }
                if (sort === 'station_name' || sort === 'stationName') {
                    sort = 'station_id'
                }
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrlAlarm(`/alarmsInfo/list`),
                    method: 'post',
                    data: {
                        status: 3,
                        stationId: null,
                        params: this.dataForm.params,
                        levelList: this.dataForm.eventLevel,
                        startTime: this.dataForm.startTime,
                        endTime: this.dataForm.endTime,
                        eventType: this.dataForm.eventType,
                        systemId: this.systemType,
                        page: this.pageIndex,
                        rows: this.pageSize,
                        sort: sort,
                        order: order
                    }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.rows
                        this.totalPage = data.page.total
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            indexMethod(index) {
                return (this.pageIndex - 1) * this.pageSize + index + 1
            },
            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()
            },
            //处理
            disposeHandle(bean) {
                this.disposeInfoVisible = true
                this.$nextTick(() => {
                    this.$refs.disposeInfo.init(bean)
                })
            },
            //历史视频
            openHistoryVideo(bean) {
                // console.log(bean)
                this.historyVideoInfoVisible = true
                this.$nextTick(() => {
                    this.$refs.historyVideo.init(bean)
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .item1 {
        margin-top: 10px;
        margin-right: 5px;

        /deep/ .el-badge__content.is-dot {
            background-color: #FF3823 !important;
        }
    }

    .item2 {
        margin-top: 10px;
        margin-right: 5px;

        /deep/ .el-badge__content.is-dot {
            background-color: #E2A80C !important;
        }
    }

    .item3 {
        margin-top: 10px;
        margin-right: 5px;

        /deep/ .el-badge__content.is-dot {
            background-color: #21ACFC !important;
        }
    }

    .item4 {
        margin-top: 10px;
        margin-right: 5px;

        /deep/ .el-badge__content.is-dot {
            background-color: #21fc2c !important;
        }
    }
</style>
