<template>
    <div>
        <div v-show="view">
            <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item>
                    <Timeinterval ref="Timeinterval" :interval="3" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item style="position: absolute; right: 10px">
                    <el-button
                        type="primary"
                        size="small"
                        class="el-icon-download"
                        :disabled="multipleSelection.length == 0"
                        @click="download"
                    >
                        波形下载
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table
                stripe
                :data="tableEven"
                @selection-change="handleSelectionChange"
                border
                header-cell-class-name="table_header"
                style="width: 100%; margin-bottom: 10px"
                :height="`calc(${bxecharts} - 10px)`"
                highlight-current-row
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column show-overflow-tooltip prop="index" label="序号" width="60" align="center">
                    <template scope="scope">
                        <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="subName"
                    label="变电站名称"
                    align="center"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="lineName"
                    label="监测点名称"
                    min-width="150"
                    align="center"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="ip"
                    label="网络参数"
                    min-width="150"
                    align="center"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="voltageScale"
                    label="电压等级(kV)"
                    min-width="150"
                    sortable
                    align="center"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="startTime"
                    label="暂降发生时刻"
                    sortable
                    align="center"
                    min-width="150"
                ></el-table-column>

                <el-table-column
                    show-overflow-tooltip
                    prop="advanceType"
                    label="暂降类型"
                    align="center"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="advanceReason"
                    label="暂降原因"
                    min-width="150"
                    align="center"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="eventType"
                    label="触发类型"
                    min-width="150"
                    align="center"
                    :formatter="formFilter"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="featureAmplitude"
                    label="暂降(骤升)幅值(%)"
                    sortable
                    align="center"
                    min-width="160"
                >
                    <template slot-scope="scope">
                        <span>{{ (scope.row.featureAmplitude * 100).toFixed(0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="duration"
                    label="持续时间(s)"
                    sortable
                    min-width="120"
                    align="center"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="severity"
                    label="严重度"
                    sortable
                    min-width="120"
                    align="center"
                    :formatter="formFilter"
                ></el-table-column>
                <el-table-column min-width="150" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.fileFlag == 0"
                            type="primary"
                            disabled
                            size="mini"
                            icon="el-icon-share"
                        >
                            暂无波形
                        </el-button>
                        <el-button
                            v-if="scope.row.fileFlag == 1"
                            type="primary"
                            size="mini"
                            @click="queryBxView(scope.row)"
                            icon="el-icon-share"
                        >
                            波形查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[10, 20, 30, 40, 50, 60]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
        <el-row>
            <el-col :span="12">
                <span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
                <el-select v-if="view2" v-model="value" placeholder="请选择值类型" @change="changeView">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-col>
            <el-col :span="12">
                <el-button
                    v-if="view2"
                    @click="backbxlb"
                    type="primary"
                    class="el-icon-refresh-right"
                    style="float: right"
                >
                    返回
                </el-button>
            </el-col>
        </el-row>
        <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
            <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                <shushiboxi
                    v-if="bxactiveName == 'ssbx' && showBoxi"
                    :value="value"
                    :boxoList="boxoList"
                    :wp="wp"
                ></shushiboxi>
            </el-tab-pane>
            <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                <rmsboxi
                    v-if="bxactiveName == 'rmsbx' && showBoxi"
                    :value="value"
                    :boxoList="boxoList"
                    :wp="wp"
                ></rmsboxi>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import { getMonitorEventAnalyseWave, downloadMonitorEventWaveFile } from '@/api/monitoringpointStatistics/echart'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import { getMonitorEventAnalyseQuery } from '@/api/monitoringpointStatistics/echart'
import Timeinterval from '@/views/components/TimePicker/index4'
import api from '@/api/integraliy/integraliy'
export default {
    components: { Timeinterval, rmsboxi, shushiboxi },
    props: {},
    data() {
        return {
            wp: {},
            boxoList: '',
            item: ['', ''],
            multipleSelection: [],
            loading: true,
            vh: undefined,
            currentPage4: 1,
            form: {},
            input: '',
            showBoxi: true,
            bxecharts: undefined,
            view: true,
            view2: false,
            //事件分析列表
            tableEven: [],

            //里层默认波形tab标签页
            bxactiveName: 'ssbx',
            value: 1,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            //模拟在线率数据
            onlineReate: [
                {
                    month: '01',
                    onlineRate: '97.02',
                    year: '2022'
                },
                {
                    month: '02',
                    onlineRate: '96.97',
                    year: '2022'
                },
                {
                    month: '03',
                    onlineRate: '97.05',
                    year: '2022'
                }
            ],
            pageNum: 1,
            pageSize: 20,
            total: 0
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.item = this.$refs.Timeinterval.timeValue
        this.query()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.bxecharts = window.sessionStorage.getItem('appheight') - 150 + 'px'
        },
        query() {
            this.item = this.$refs.Timeinterval.timeValue
            let form = {
                lineId: this.$store.state.user.lineID,
                // lineId: "6973ca7ea5dd4b0328496e4e1b871447",
                orderBy: '',
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchBeginTime: this.item[0],
                searchEndTime: this.item[1],
                searchState: 0,
                searchValue: null,
                sortBy: ''
            }
            this.$emit('Loading', true)

            getMonitorEventAnalyseQuery(form).then(res => {
                if (res.data.total != 0 && res.data.records.length == 0) {
                    this.pageNum = 1
                    this.query()
                } else {
                    this.tableEven = res.data.records
                    this.total = res.data.total
                    this.$emit('Loading', false)
                }
            })
            // this.$refs.ITIC.query()
        },
        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        //波形勾选事件
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //波形查看触发按钮
        async queryBxView(e) {
            this.boxoList = e
            let from = {
                lineId: this.boxoList.lineId,
                timeId: this.boxoList.timeId
            }
            await getMonitorEventAnalyseWave({
                id: e.eventId,
                systemType: 0,
                type: 0
            }).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    setTimeout(() => {
                        this.view = false
                        this.view2 = true
                    }, 0)
                }
                //  this.initWaves()
            })

            // console.log( this.boxoList);
            //调取波形图
            this.$nextTick(() => {})
        },
        //tabs标签页切换事件
        handleClick(tab, event) {
            // console.log(tab, event);
            if (tab.name == 'first') {
                this.view = true
                this.view2 = false
            } else if (tab.name == 'second') {
                this.view = true
                this.view2 = false
            } else if (tab.name == 'third') {
                this.view = true
                this.view2 = false
            } else if (tab.name == 'fourth') {
                this.view = true
                this.view2 = false
                // this.$nextTick(() => {
                //   this.runManage();
                //   this.runStuats();
                // });
            }
        },

        //里层波形tab标签页触发事件
        bxhandleClick(tab, event) {
            if (tab.name == 'ssbx') {
                this.bxactiveName = 'ssbx'
            } else if (tab.name == 'rmsbx') {
                this.bxactiveName = 'rmsbx'
            }
            // console.log(tab, event);
        },
        //返回触发事件
        backbxlb() {
            this.view = true
            this.view2 = false
            this.value = 1
        },
        // 数据过滤
        formFilter(row, column) {
            if (column.property == 'eventType') {
                let title = ''
                dicData('Event_Statis', []).forEach(item => {
                    if (item.id == row.eventType) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'severity') {
                let title = ''
                dicData('Event_Statis', []).forEach(item => {
                    if (item.id == row.eventType) {
                        if (item.name == '电压暂升') {
                            if (row.severity < 0) {
                                title = '/'
                            } else {
                                title = row.severity
                            }
                        } else {
                            title = row.severity
                        }
                    }
                })
                return title
            }
        },
        // 波形下载
        download() {
            let lineId = []
            let timeId = []
            this.multipleSelection.forEach(item => {
                lineId.push(item.eventId)
                timeId.push(item.timeId)
            })
            let data = {
                lineId: lineId
                // timeId: timeId,
            }
            api.downloadWaveFile(data).then(response => {
                if (response.type == 'application/json') {
                    return this.$message({
                        message: '暂无可下载的波形文件!',
                        type: 'warning'
                    })
                }
                this.$message('下载中...')
                //console.log(res)
                let blob = new Blob([response], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a') // 创建a标签
                link.href = url
                link.download = '波形分析下载' // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link) //释放标签
            })
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val
            this.query()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.query()
        },

        eventValue(row, column) {
            let percent = Number(row.eventValue * 100).toFixed(1)
            return percent
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
    margin-bottom: 0;
}
// ::v-deep .el-pagination {
//   margin-top: 10px;

// }
</style>
