<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-row>
            <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                <Exhibition
                    @clickSon="transientlist"
                    @exportEvent="exportEvent"
                    ref="exhibition"
                    :form="form"
                    :lineIds="lineIds"
                    :timeIds="timeIds"
                    v-show="view"
                ></Exhibition>
                <el-tab-pane label="区域暂态列表" name="first">
                    <div v-show="view">
                        <vxe-table
                            stripe
                            class="mytable-style"
                            :data="domainData"
                            :height="height"
                            border
                            :row-config="{ isCurrent: true, isHover: true }"
                            style="width: 100%; cursor: pointer"
                            header-cell-class-name="table_header"
                            ref="multipleTable"
                            :sort-config="{
                                trigger: 'cell'
                            }"
                            highlight-current-row
                            @checkbox-all="handleSelectionChange"
                            @checkbox-change="handleSelectionChange"
                            :row-class-name="rowClassName"
                        >
                            <vxe-table-column align="center" fixed="left" type="checkbox" width="55"></vxe-table-column>
                            <!-- <vxe-table-column align="center" width="55">
                <template v-slot="row">
                  <el-checkbox v-model="row.id"></el-checkbox>
                </template>
              </vxe-table-column> -->
                            <vxe-table-column title="序号" fixed="left" width="70" type="seq" align="center">
                                <template v-slot="row">
                                    <span>{{ (form.pageNum - 1) * form.pageSize + row.seq }}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                fixed="left"
                                field="startTime"
                                title="暂降发生时刻"
                                align="center"
                                min-width="200"
                                show-overflow
                            ></vxe-table-column>
                            <vxe-table-column
                                field="gdName"
                                title="供电公司"
                                show-overflow
                                min-width="130"
                                align="center"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="subName"
                                title="变电站"
                                min-width="200"
                                align="center"
                                show-overflow
                            ></vxe-table-column>
                            <vxe-table-column
                                field="ip"
                                title="网络参数"
                                align="center"
                                show-overflow
                                min-width="200"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="lineName"
                                title="监测点"
                                align="center"
                                show-overflow
                                min-width="180"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="scale"
                                title="电压等级(kV)"
                                align="center"
                                show-overflow
                                sortable
                                min-width="160"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="featureAmplitude"
                                title="暂降(骤升)幅值(%)"
                                show-overflow
                                sortable
                                fixed="right"
                                min-width="130"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span>
                                        {{ (scope.row.featureAmplitude * 100).toFixed(2) }}
                                    </span>
                                </template>
                            </vxe-table-column>

                            <vxe-table-column
                                field="eventType"
                                title="触发类型"
                                min-width="130"
                                sortable
                                :formatter="formFilter"
                                align="center"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="advanceType"
                                title="暂降类型"
                                sortable
                                min-width="130"
                                align="center"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="advanceReason"
                                title="暂降原因"
                                min-width="130"
                                sortable
                                align="center"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="depth"
                                title="暂降深度(%)"
                                min-width="110"
                                fixed="right"
                                sortable
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.depth == '电压暂降' && scope.row.featureAmplitude < 1">
                                        {{ 100 - (scope.row.featureAmplitude * 100).toFixed(0) }}
                                    </span>
                                    <span
                                        v-if="
                                            (scope.row.depth == '电压暂降' && scope.row.featureAmplitude > 1) ||
                                            scope.row.depth != '电压暂降'
                                        "
                                    >
                                        /
                                    </span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                field="duration"
                                title="持续时间(s)"
                                fixed="right"
                                min-width="90"
                                align="center"
                            >
                                <!-- <template slot-scope="scope">
              <span> {{ (scope.row.duration / 1000).toFixed(2) }}</span>
            </template> -->
                            </vxe-table-column>
                            <vxe-table-column
                                field="severity"
                                title="严重度"
                                min-width="80"
                                fixed="right"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.severity < 0 ? '/' : scope.row.severity }}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column min-width="120" title="操作" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button
                                        v-if="scope.row.fileFlag == 0"
                                        type="primary"
                                        style="color: #000; background: #ccc !important"
                                        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>
                            </vxe-table-column>
                        </vxe-table>
                        <el-pagination
                            style="z-index: 999"
                            background
                            align="right"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="form.pageNum"
                            :page-sizes="[20, 30, 50, 100]"
                            :page-size="form.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            class="mt10"
                        ></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-button v-if="view2" type="primary" @click="AdvancedAnalytics">高级分析</el-button>
                        </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 v-if="view3" v-loading="isLoading3" element-loading-text="数据加载中">
                        <span style="font-weight: 500; font-size: 22px">高级分析</span>
                        <el-button type="primary" @click="gaoBack" style="float: right">返回</el-button>
                        <boxi :GJList="GJList" :boxoList="boxoList"></boxi>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>

        <!-- 存在波形弹框 -->
        <!-- <div v-else class="el-row">
      <el-row>
        <el-col :span="24">
          <svg-icon
            class="back"
            icon-class="back"
            @click="dialogVisible = false"
          />
          <xieBoFenxi />
        </el-col>
      </el-row>
    </div> -->
    </div>
</template>

<script>
import Exhibition from './components/transientlist/Exhibition'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import { getTransientData, getTransientValueData, analysis } from '@/api/transientlist.js'

import { getMonitorEventAnalyseWave } from '@/api/monitoringpointStatistics/echart'
import { dicData } from '@/assets/commjs/dictypeData'
// import boxis from "@/assets/commjs/boxi";
// import xieBoFenxi from "../../Photovoltaic-system/xieBoFenxi.vue";
export default {
    name: 'droplist',
    components: { Exhibition, rmsboxi, shushiboxi },
    data() {
        return {
            wp: {},
            boxoList: {},
            view: true,
            view2: false,
            view3: false,
            bxecharts: null,
            // boxi:boxis,
            //里层默认波形tab标签页
            bxactiveName: 'ssbx',
            value: 1,
            showBoxi: true,
            isLoading3: false,
            GJList: [],
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            vh: null,
            height: null,
            device: null,
            activeName: 'first', //区分是那个节点

            domainData: [],
            multipleSelection: [],
            device: null,
            vhh: null,
            lineIds: [],
            timeIds: [],
            //   currentPage: 1, // 当前页码
            //   total: 20, // 总条数
            //   pageSize: 20, // 每页的数据条数
            isLoading: false,
            dialogVisible: false,
            form: '',
            eventType: '',
            total: undefined
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.transientlist()
        // console.log('===============',this.wp);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 115 + 'px'
            this.vhh = window.sessionStorage.getItem('appheight') - 115 + 'px'
            this.height = window.sessionStorage.getItem('appheight') - 155 + 'px'
            this.bxecharts = window.sessionStorage.getItem('appheight') - 160 + 'px'
        },
        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //获取表格数据
        transientlist() {
            this.isLoading = true
            this.form = this.$refs.exhibition.formData
            if (this.$refs.exhibition.formData.searchValue !== '') {
                this.form.pageNum = 1
            }
            getTransientValueData(this.form).then(res => {
                this.isLoading = false
                this.domainData = res.data.records
                this.total = res.data.total
                // this.domainData.forEach((item) => {
                //   item.eventValue = (item.eventValue * 100).toFixed(0);
                //   item.persistTime = (item.persistTime / 1000).toFixed(2);
                // });
            })
        },
        // 获取类型
        getclassificationData() {
            //地区特征
            this.eventType = dicData('Event_Statis', [])
        },
        //过滤
        formFilter(row, column) {
            //console.log(row);
            if (row.column.property == 'eventType') {
                // let title = "";
                this.eventType.forEach(item => {
                    if (item.value == row.row.eventType) {
                        row.row.depth = item.label
                    }
                })
                // row.row.eventType = title
                return row.row.depth
            } else {
                return row.row[row.column.property]
            }
        },
        //导出
        exportEvent() {
            let form = JSON.parse(JSON.stringify(this.form))
            form.pageSize = this.total
            form.pageNum = 1
            getTransientValueData(form).then(res => {
                this.$refs.multipleTable.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 || column.$columnIndex === 1 || column.$columnIndex === 15)
                    }
                })
            })
        },
        //高级分析
        AdvancedAnalytics() {
            analysis({
                eventIndex: this.boxoList.eventId
            }).then(res => {
                this.GJList = res.data
                this.view2 = false
                this.view3 = true
            })
        },
        //高级分析返回
        gaoBack() {
            this.view2 = true
            this.view3 = false
        },
        handleClick(tab, event) {},
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.transientlist()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.transientlist()
        },
        //表格多选
        handleSelectionChange(val) {
            // console.log(val);
            this.multipleSelection = this.$refs.multipleTable.getCheckboxRecords()
            this.lineIds = []
            this.timeIds = []
            this.multipleSelection.forEach(item => {
                this.lineIds.push(item.eventId)
                this.timeIds.push(item.createTime)
            })
        },

        //波形查看触发按钮
        async queryBxView(e) {
            // console.log(e);
            this.boxoList = e
            let from = {
                id: this.boxoList.eventId,
                // id: "ce4540dd-1f5b-4e81-94d1-805ccb290e51",
                systemType: 0
            }
            await getMonitorEventAnalyseWave(from).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    setTimeout(() => {
                        this.view = false
                        this.view2 = true
                    }, 0)
                }
                //  this.initWaves()
            })

            // console.log( this.boxoList);
            //调取波形图
        },

        //里层波形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.vh = window.sessionStorage.getItem('appheight') - 128 + 'px'
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0;
}

// ::v-deep .demo-form-inline {
//   display: flex;
//   flex-wrap: wrap;
//   .el-select .el-input__inner {
//     width: 170px;
//   }
// }
</style>
<style lang="scss" scoped>
.back {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
}
</style>
