<template>
    <div class="MapTable">
        <div @mouseover="mouseover" @mouseout="mouseout" style="cursor: pointer">
            <el-table
                class="ddf"
                style="width: 100%"
                ref="offromfixTable"
                header-cell-class-name="table_header"
                :header-cell-style="{ 'text-align': 'center', background: '#b1defd' }"
                :row-style="{
                    height: '28px',
                    color: '#f0cb0d',
                    background: '#f28007de'
                }"
                :cell-style="{
                    padding: '0px',
                    color: '#f0cb0d',
                    background: '#f28007de'
                }"
                @row-click="rowClick"
                :data="tableDataSon"
                :highlight-current-row="true"
                border
            >
                <el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
                <el-table-column
                    align="center"
                    prop="time"
                    min-width="240px"
                    label="发生时刻"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="160px"
                    prop="name"
                    label="监测点"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="80px"
                    prop="reason"
                    :formatter="formFilter"
                    label="暂降原因"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="80px"
                    prop="type"
                    :formatter="formFilter1"
                    label="暂降类型"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="120"
                    prop="amplitude"
                    label="暂降幅值(%)"
                >
                    <template slot-scope="scope">
                        <span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="100px"
                    prop="duration"
                    label="持续时间(s)"
                ></el-table-column>
            </el-table>

            <el-table
                stripe
                ref="table"
                class="ddf swiper-page-table"
                v-loading="isLoading"
                element-loading-text="数据加载中"
                :header-cell-style="{
                    height: '25px',
                    padding: '0px'
                }"
                :row-style="{ height: '28px', color: '#04d9ff' }"
                :cell-style="{ padding: '0px', color: '#04d9ff' }"
                :data="tableData"
                style="width: 100%; height: 100%"
                :show-header="false"
                @row-click="rowClick"
                :height="vh - 185 + 'px'"
                border
            >
                <el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
                <el-table-column
                    align="center"
                    prop="time"
                    min-width="240px"
                    label="发生时刻"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="160px"
                    prop="name"
                    label="监测点"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="80px"
                    prop="reason"
                    :formatter="formFilter"
                    label="暂降原因"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="80px"
                    prop="type"
                    :formatter="formFilter1"
                    label="暂降类型"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="120"
                    prop="amplitude"
                    label="暂降幅值(%)"
                >
                    <template slot-scope="scope">
                        <span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    min-width="100px"
                    prop="duration"
                    label="持续时间(s)"
                ></el-table-column>
            </el-table>
        </div>
        <el-dialog
            :close-on-click-modal="false"
            class="eldialotable"
            title="波形查看"
            :visible.sync="view2"
            v-if="view2"
            :append-to-body="true"
            :before-close="backbxlb"
            :width="wid"
        >
            <div>
                <el-row>
                    <el-col :span="12">
                        <span style="color: #fff; font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
                        <el-select v-model="value" @change="changeView" placeholder="请选择值类型">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-tabs 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"
                            :DColor="true"
                        ></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"
                            :DColor="true"
                        ></rmsboxi>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { eventLists } from '@/api/center/DropEvent.js'
import { dicData } from '@/assets/commjs/dictypeData'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import { getMonitorEventAnalyseWave, getTransientDetailById } from '@/api/monitoringpointStatistics/echart'
import jquery from 'jquery'
export default {
    components: { rmsboxi, shushiboxi },
    props: {
        height: {
            type: Number,
            required: false
        }
    },
    data() {
        return {
            wid: null,
            dialogVisible: false,
            isLoading: false,
            tableData: [],
            tableDataSon: [],
            type: [],
            reason: [],
            time: null,
            vh: null,
            formData: {
                deptIndex: '',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate()
            },
            boxoList: {},
            wp: {},
            view: true,
            bxecharts: undefined,
            view2: false,
            bxactiveName: 'ssbx',
            value: 1,
            showBoxi: true,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ]
        }
    },
    created() {
        this.queryData()
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.tableScroll()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.wid = window.sessionStorage.getItem('appwidth') - 20 + 'px'
            this.vh = this.height
            this.bxecharts = window.sessionStorage.getItem('appheight') - 150 + 'px'
        },

        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        // 表格单击
        async rowClick(e) {
            await getTransientDetailById({
                eventId: e.eventId,
                sysType: 0,
                smallType: 0
            }).then(res => {
                this.boxoList = res.data
            })
            await getMonitorEventAnalyseWave({
                id: e.eventId,
                //id: "e178edd5-354c-49a7-b72f-119442080155",
                systemType: 0,
                type: 0
            }).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    setTimeout(() => {
                        this.view = false
                        this.view2 = true
                        jquery('.el-dialog__body').height(30 + 'px')
                    }, 0)
                }

                //  this.initWaves()
            })
        },

        //里层波形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
        },

        // 鼠标经过
        mouseover() {
            clearInterval(this.time)
        },
        // 鼠标离开
        mouseout() {
            this.tableScroll()
        },
        tableScroll() {
            const table = this.$refs.table
            // 拿到表格中承载数据的div元素
            const divData = table.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            this.time = setInterval(() => {
                // 元素自增距离顶部1像素
                divData.scrollTop += 1
                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                if (divData.clientHeight + divData.scrollTop > divData.scrollHeight - 1) {
                    // 重置table距离顶部距离
                    divData.scrollTop = 0
                }
            }, 30) // 滚动速度
        },
        //大屏获取暂降事件最新50条数据
        queryData() {
            this.isLoading = true
            this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            eventLists(this.formData).then(res => {
                // console.log(res);
                this.tableData = res.data
                this.tableDataSon = [this.tableData[0], this.tableData[1], this.tableData[2]]
                this.isLoading = false
            })
        },
        getclassificationData() {
            //暂态原因
            this.reason = dicData('Event_Reason', [])
            //暂态类型
            this.type = dicData('Event_Type', [])
        },
        formFilter(row) {
            let title = ''
            this.reason.forEach(item => {
                if (row.reason == item.id) {
                    title = item.name
                }
            })
            return title
        },
        formFilter1(row) {
            let title = ''
            this.type.forEach(item => {
                if (row.type == item.id) {
                    title = item.name
                }
            })
            return title
        },
        //获取当月第一天日期
        getCurrentMonthFirst() {
            var date = new Date()
            var year = date.getFullYear()
            date.setDate(1)
            var month = parseInt(date.getMonth() + 1)
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //获取当天日期
        getNowFormatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        }
    },

    computed: {},

    watch: {
        height(val) {
            this.vh = val
        }
    }
}
</script>
<style lang="scss" scoped>
/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
::v-deep .el-table tr,
.el-table th,
.el-table td {
    color: #0b8eb7;
}
::v-deep .el-table__header th {
    color: #04e8ef !important;
    background: #10727d;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
}
::v-deep .table_header {
    background-color: #187d8b !important;
}
::v-deep .el-table__header {
    tr,
    th {
        background: #187d8b !important;
    }
}
::v-deep .el-table td {
    background-color: #055d6bcd !important;
}
::v-deep .el-table--d .el-table__body tr.el-table__row--d td {
    background: #65c9c275 !important;
}
::v-deep .el-dialog {
    // background-color: transparent;
    border: 1px solid #1697de;
    background-color: rgb(33 57 83 / 60%);
    margin-top: 2.56% !important;

    .el-dialog__header {
        // background-color: transparent ;
        background-color: rgb(33 57 83 / 0%);
        border-bottom: 1px solid #1697de;
    }
    .el-dialog__body {
        padding: 10px !important;
        max-height: none;
        // height:85vh,
    }
}
::v-deep .el-input__inner {
    background-color: rgb(33 57 83 / 60%);
    color: #fff;
}
::v-deep .el-tabs__item {
    color: #fff;
}
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #52b9b39f !important;
}
::v-deep .el-tabs__item:hover {
    color: #06e0fa !important;
    opacity: 0.8;
}
::v-deep .el-tabs__active-bar {
    background-color: #06e0fa !important;
}
::v-deep .el-tabs__item.is-active {
    color: #06e0fa;
}
::v-deep.el-table--striped .el-table__body tr:hover.el-table__row--striped > td {
    background-color: #52b9b39f !important;
}
::v-deep.el-table .el-table__body tr:hover.el-table__row > td {
    background-color: #52b9b39f !important;
}
::v-deep .dpjcksss .el-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 10px 10px 10px 10px !important;
    overflow-y: auto;
}
//2023-11-9
// ::v-deep .el-table td.el-table__cell,
//  .el-table th.el-table__cell.is-leaf {
//     border-bottom: 0.2px solid #f2f3f3 !important;
//     border-top: 0px solid #f2f3f3 !important;
//     border-right: 0.2px solid #f2f3f3 !important;
//     border-left: 0px solid #f2f3f3 !important;
// }
// ::v-deep.el-table td,
// .el-table th.is-leaf {
//     // border-bottom: none;
//     border-right: 0.2px solid #f2f3f3 !important;
//     /*no*/
//     border-bottom: 0.2px solid #f2f3f3 !important;
//     /*no*/
// }
// ::v-deep .el-table--border,
// .el-table--group {
//     border: 0.2px solid #f2f3f3 !important;
//     /*no*/
// }
</style>
