<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" class="demo-form-inline form">
                    <el-form-item>
                        <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="eventreports">查询</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="exportEvent" icon="el-icon-download">导出</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="closeHandle">
                            条件筛选
                            <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class="container" id="container">
                    <i @click="closeHandle" class="el-icon-circle-close coles"></i>
                    <el-form :inline="true" :model="form" label-width="90px" class="">
                        <Area @click="handleNodeClick" ref="area"></Area>
                        <el-form-item label="统计类型:">
                            <el-radio-group v-model="form.comFlag">
                                <el-radio-button label="1">在线</el-radio-button>
                                <el-radio-button label="0">离线</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="筛选:">
                            <el-input v-model="form.searchValue" placeholder="筛选数据" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="触发类型:">
                            <el-select v-model.trim="form.waveType" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in triggerType"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>

                <template>
                    <vxe-table
                        stripe
                        :data="eventreportsData"
                        :height="height"
                        border
                        :row-config="{ isCurrent: true, isHover: true }"
                        style="width: 100%"
                        header-cell-class-name="table_header"
                        highlight-current-row
                        ref="Statistics"
                        :sort-config="{
                            trigger: 'cell',
                            sortMethod: sortJ
                        }"
                        class="xshou"
                    >
                        <!-- @selection-change="handleSelectionChange" -->
                        <!-- <vxe-table-column type="checkbox"    align="center" width="55"> </vxe-table-column> -->
                        <!-- <vxe-table-column type="seq" title="序号" align="center" width="80"> -->
                        <!-- <template scope="scope">
                <span>{{
                  (form.pageNum - 1) * form.pageSize + scope.$index + 1
                }}</span>
              </template> -->
                        <!-- </vxe-table-column> -->
                        <vxe-table-column field="number" title="序号" width="70" align="center">
                            <template v-slot="row">
                                <span>{{ (form.pageNum - 1) * form.pageSize + row.seq }}</span>
                            </template>
                        </vxe-table-column>
                        <template v-for="(item, index) in tableHeadereventreport">
                            <vxe-table-column
                                v-if="item.prop == 'featureAmplitude'"
                                :field="item.prop"
                                :title="item.label"
                                align="center"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                            >
                                <template slot-scope="scope">
                                    {{ (scope.row.featureAmplitude * 100).toFixed(2) }}
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                v-else-if="item.prop == 'persistTime'"
                                :field="item.prop"
                                align="center"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                            >
                                <template slot-scope="scope">
                                    {{ (scope.row.persistTime / 1000).toFixed(2) }}
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                v-else-if="item.prop == 'startTime'"
                                :field="item.prop"
                                align="center"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.startTime.replace('T', ' ') }}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                v-else-if="item.prop == 'severity'"
                                :field="item.prop"
                                align="center"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.severity < 0 ? '/' : scope.row.severity }}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                v-else-if="item.prop == 'eventType'"
                                :field="item.prop"
                                align="center"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                                :formatter="formatter"
                            ></vxe-table-column>
                            <vxe-table-column
                                v-else
                                align="center"
                                :field="item.prop"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                                :show-overflow="true"
                            ></vxe-table-column>
                        </template>
                    </vxe-table>
                    <el-pagination
                        class="mt10"
                        align="right"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                    <!-- <el-pagination
            background
              :current-page="form.pageNum"
            :pageSizes="[10, 20, 30, 40, 50, 100]"
            :pageSize="form.pageSize"
            :total="total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          >  </el-pagination> -->
                </template>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getEventReport } from '@/api/regionReport'
import Timeinterval from '@/views/components/TimePicker/index4'
import { deptTree } from '@/api/admin/dept'
import Area from '@/views/components/Area/Area.vue'

// import { dictypeData } from "@/api/user";
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: { Timeinterval, Area },
    data() {
        return {
            vh: '',
            title: '',
            total: 0,
            view: false,
            form: {
                pageNum: 1,
                pageSize: 20,
                comFlag: '1',
                monitorFlag: 0,
                powerFlag: 1,
                serverName: 'event-boot',
                waveType: '',
                searchValue: '',
                searchBeginTime: '',
                searchEndTime: '',
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                statisticalType: {}
            },
            ruleForm: {
                time: '', //统计时间
                value: '',
                props: '',
                // valueId: null,
                valueTitle: '',
                accordion: false,
                defaultExpandedKey: [],
                options: [],
                default: {
                    value: 'id',
                    children: 'children',
                    label: 'name'
                }
            },
            Num: 0,
            height: null,
            isLoading: false,
            triggerType: [
                { value: '0', label: '扰动' },
                { value: '1', label: '暂降' },
                { value: '2', label: '暂升' },
                { value: '3', label: '中断' },
                { value: '4', label: '其他' },
                { value: '5', label: '录波' }
            ],
            //未建档非线性用户录入及查询数据表头
            tableHeadereventreport: [
                {
                    sortable: true,
                    prop: 'startTime',
                    label: '暂态事件发生时刻',
                    width: '150'
                },
                { sortable: false, prop: 'gdName', label: '供电公司', width: '80' },
                { sortable: false, prop: 'subName', label: '变电站', width: '80' },
                { sortable: false, prop: 'ip', label: '网络参数', width: '80' },
                { sortable: false, prop: 'lineName', label: '监测点', width: '80' },
                { sortable: false, prop: 'eventType', label: '触发类型', width: '80' },
                {
                    sortable: false,
                    prop: 'advanceType',
                    label: '暂态类型',
                    width: '80'
                },
                {
                    sortable: false,
                    prop: 'advanceReason',
                    label: '暂态原因',
                    width: '80'
                },
                {
                    sortable: true,
                    prop: 'voltageScale',
                    label: '电压等级',
                    width: '100'
                },
                {
                    sortable: true,
                    prop: 'featureAmplitude',
                    label: '暂降(骤升)幅值(%)',
                    width: '140'
                },
                {
                    sortable: true,
                    prop: 'duration',
                    label: '持续时间(s)',
                    width: '100'
                },
                { sortable: true, prop: 'severity', label: '严重度', width: '80' }
            ],
            eventreportsData: [],
            multipleSelection: [] //工单生成多选device: ""
        }
    },
    created() {
        this.info()
        // this.dictionaries();
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$emit('loading', true)

        setTimeout(() => {
            this.eventreports()
        }, 500)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 158
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        sortJ({ data, sortList }) {
            const { property, order } = sortList[0]
            let list = []
            if (order === 'asc' || order === 'desc') {
                if (property === 'startTime') {
                    list = data.sort((a, b) => {
                        return new Date(a[property]).getTime() - new Date(b[property]).getTime()
                    })
                } else if (property === 'startTime') {
                    list = data.sort((a, b) => {
                        return (
                            a[property].slice(0, a[property].length - 2) - b[property].slice(0, b[property].length - 2)
                        )
                    })
                } else {
                    list = data.sort((a, b) => {
                        return a[property] - b[property]
                    })
                }
                if (order === 'desc') {
                    list.reverse()
                }
                return list
            }
        },
        // 字典处理
        formatter(row, column) {
            let title = ''
            dicData('Event_Statis', []).forEach(item => {
                if (item.id == row.row.eventType) {
                    title = item.name
                }
            })
            return title
        },
        info() {
            deptTree().then(res => {
                // console.log("单位res:",res.data);
                res.data.forEach(item => {
                    if (res.code == 'A0000') {
                        this.ruleForm.options = res.data
                        this.ruleForm.valueTitle = res.data[0].name
                    }
                })
            })
            var code = 'Statistical_Type'
            this.form.statisticalType = dicData(code, ['Report_Type'])[0]
            this.triggerType = dicData('Event_Statis', [])
        },
        //导出
        exportEvent() {
            ;(this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]),
                (this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1])
            let data = JSON.parse(JSON.stringify(this.form))
            data.pageNum = 1
            data.pageSize = 1000
            this.Num = 0
            //未建档非线性用户录入及查询
            getEventReport(data).then(res => {
                res.data.records.forEach(item => {
                    this.Num += 1
                    item.startTime = item.startTime.replace('T', ' ')
                    item.number = this.Num
                    if (item.severity < 0) {
                        item.severity = '/'
                    }
                })
                this.$refs.Statistics.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                    // columnFilterMethod: function (column, $columnIndex) {
                    //   return !(column.$columnIndex === 0);
                    // },
                })
            })
        },
        //方法调用获取未建档非线性用户录入及查询数据接口
        async eventreports() {
            // (this.form.pageNum = 1),
            if (this.form.searchValue !== '' || this.form.waveType !== '') {
                this.form.pageNum = 1
            }
            ;(this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]),
                (this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1])
            this.$emit('loading', true)
            //未建档非线性用户录入及查询
            await getEventReport(this.form).then(res => {
                this.eventreportsData = res.data.records
                this.total = res.data.total
            })
            this.$emit('loading', false)
        },
        //分页查询用
        async eventreports1() {
            ;(this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]),
                (this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1])
            this.$emit('loading', true)
            //未建档非线性用户录入及查询
            await getEventReport(this.form).then(res => {
                this.eventreportsData = res.data.records
                this.total = res.data.total
            })
            this.$emit('loading', false)
        },
        cellStyle(row) {
            if (row.columnIndex == 10) {
                if (row.row.severity <= 1) {
                    return 'color:#22b14c;'
                } else if (row.row.severity <= 2) {
                    return 'color:#3f48cc;'
                } else if (row.row.severity <= 5) {
                    return 'color:#FFCC00;'
                } else if (row.row.severity <= 10) {
                    return 'color:#ff7f27;'
                } else {
                    return 'color:#ed1c24;'
                }
            }
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.eventreports1()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.eventreports1()
        }, // 表格多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleNodeClick(data, node, nodeData) {
            ;(this.form.deptIndex = data.id), (this.ruleForm.valueTitle = data.name)
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

::v-deep .el-date-editor {
    margin-left: 25px;
}
.xshou {
    cursor: pointer;
}
.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 40%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
