<template>
    <div class="history bg-white">
        <div class="ant-advanced-search-form">
            <a-form layout="inline" :form="queryParam">
                <a-row :gutter="24">
                   
                    <a-col :span="4" >
                        <a-form-item label="类型">
                        <a-select :default-value="0" style="width: 100px" @change="handleChange">
                            类型：
                            <a-select-option :value="0">
                                全部
                            </a-select-option>
                            <a-select-option :value="1">
                                报警
                            </a-select-option>
                            <a-select-option :value="2">
                                巡检
                            </a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item class="ageInput" label="告警时间">
                            <a-range-picker
                                @change="onTimeChange"
                                v-model="time"
                                format="YYYY-MM-DD HH:mm:ss"
                                :show-time="{defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],}"
                            >
                                <a-icon slot="suffixIcon" type="calendar"/>
                            </a-range-picker>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10" style="text-align: right">
                        <a-button type="primary" @click="handleSearch">搜索</a-button>
                        <a-button style="margin-left: 15px" @click="reset">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetalarmLog"
        >
          <span slot="pics" slot-scope="text" style="width:auto">

          <template>
              <span v-if="text.pics" style="height:100%;">
                  <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
                      <viewer :images="text.pics">
                         <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
                              :key="index"/>
                      </viewer>
                  </happy-scroll>
              </span>
              <span v-else>
                  暂无图片
              </span>
          </template>

          </span>
            <span slot="status" slot-scope="text">
              <span :style="text.status == 1 ?' color:red': ''">
                 {{ text.status == null ? ' ' : text.status == 0 ? '正常' : '告警' }}
              </span>
          </span>
            <span slot="videoPath1" slot-scope="text">
              <a-button type="link" @click="showModel(text)">
                  查看视频
              </a-button>
              
          </span>

        </a-table>
        <Model
            :visible.sync="visible"
            :vid1.sync="vid1"
            :vid2.sync="vid2"
            @close="closeModel"
        />
    </div>
</template>
<script>
import {imgUrl, videoUrl} from "@/api/importExcel";
import Model from "./model.vue"
import moment from 'moment';
export default {
    name: "alarmLog",
    data() {
        return {
            queryParam: {
                startTime: moment().subtract(1, "weeks").format('YYYY-MM-DD HH:mm:ss'), //当前时间的前一个星期时间
                endTime: moment().format('YYYY-MM-DD HH:mm:ss')
            },
            time:[],
            pageNum: 1,
            pageSize: 10,
            data: [],
            pagination: {
                total: 0,
                defaultPageSize: 10, // 默认每页显示数量
                current:1,
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger: true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            imgUrl: imgUrl,
            columns: [
                {
                    title: '序号',
                    // dataIndex: 'id',
                    customRender: (text, record, index) => {
                        return (
                            (record.pageNumber - 1) * 10 + index + 1
                        )
                    }
                },
                {
                    title: "情况说明",
                    dataIndex: "warmName",
                },
                {
                    title: "类型",
                    dataIndex: "typeName",
                },
                {
                    title: "告警时间",
                    dataIndex: "startTime",
                },
                {
                    title: "设备编码",
                    dataIndex: "deviceCode",
                }
            ],
            visible: false,
            vid1: '',
            vid2: '',
            streetList:[]
        }
    },
    mounted() {
        this.getStreetList()
        this.handleGetalarmLog()
        console.log(this.imgUrl)
    },
    methods: {
        moment,
        range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        },
        getStreetList(){
            this.$api.httpApi.getStreetList({
                data: {
                    pageNum:0,
                    pageSize:0,
                }
            }).then(res => {
                this.streetList = res.data.list;
            }).catch(err => {

            });
        },
        handleChange(value) {
            console.log(`selected ${value}`);
            this.queryParam.type=value
        },
        handleSearch() {
            console.log(this.queryParam)
            this.handleGetalarmLog()

        },
        handleGetalarmLog(pagination) {
            console.log(pagination)
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        request() {
            this.$api.httpApi.warnList({
                data: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    ...this.queryParam
                }
            }).then(res => {
                const pagination = { ...this.pagination };
                pagination.total = res.data.total;
                this.data = res.data.list;
                this.pagination = pagination;
                res.data.list.forEach((value,index) => {
                    value.pageNumber = this.pagination.current
                });
            }).catch(err => {

            });
        },
        onTimeChange(date, dateString) {
            this.handleReset()
            console.log(date)
            console.log(date[0].format('YYYY-MM-DD HH:mm:ss'))
            this.queryParam.startTime = date[0].format('YYYY-MM-DD HH:mm:ss')
            this.queryParam.endTime = date[1].format('YYYY-MM-DD HH:mm:ss')
        },
        handleReset() {
            this.queryParam.startTime = ""
            this.queryParam.endTime = ""
        },
        reset() {
            this.queryParam.startTime = moment().subtract(1, "weeks").format('YYYY-MM-DD HH:mm:ss'), //当前时间的前一个星期时间
            this.queryParam.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
            this.queryParam.streetId = 0
            this.time = []
            this.handleGetalarmLog()
        },
        showModel(text) {
        
            this.visible = true
            this.vid1 = videoUrl + text.videoPath1;
            this.vid2 = videoUrl + text.videoPath2;
            console.log(this.vid1)
        },
        closeModel(visible, data) {
            this.visible = visible
            this.vid1 = data
        },
    },
    components: {
        Model
    }
};
</script>

<style lang="scss" scoped>
    .history {
        padding: 24px;
    }
    .ant-drawer-content-wrapper {
        height: auto !important;
    }

    .ant-drawer-body {
        text-align: center;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        width: 100%;
    }

    .historyImg {
        width: 80px;
        height:auto;
        margin: 5px;
    }
</style>
