<template>
    <div>
        <!-- 表格 -->
        <div v-if="view">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <Area @click="handleNodeClick"></Area>
                </el-form-item>
                <el-form-item label="监测点:">
                    <el-input
                        v-model="form.monitorName"
                        clearable
                        placeholder="请填写内容"
                        onkeyup="value = value.replace(/[@&<>/?#$%&*]/,'')"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                    <!-- <el-button
                type="primary"
                class="boxing"
                icon="el-icon-download"
                @click="fn"
                >存在波形</el-button
              > -->
                </el-form-item>
            </el-form>
            <vxe-table
                :data="PlatformData"
                :height="vh"
                size="mini"
                border
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                ref="EventDetails"
                v-loading="isLoading"
                style="width: 100%"
                header-cell-class-name="table_header"
                @checkbox-all="selectAllChangeEvent1"
                @checkbox-change="selectChangeEvent1"
                :cell-style="cellStyle"
            >
                <vxe-table-column type="checkbox" width="55"></vxe-table-column>
                <template v-for="(item, index) in tableHeaderPlatform">
                    <vxe-table-column
                        align="center"
                        :field="item.prop"
                        :title="item.label"
                        :key="index"
                        show-overflow
                        :min-width="item.width"
                    >
                        <template slot-scope="scope">
                            <!-- <el-button
                  type="primary"
                  v-if="item.prop == 'Waveform'"
                  @click="queryBxView(scope.row)"
                  >{{ scope.row[item.prop] == 0 ? "不存在波形" : "存在波形" }}
                </el-button> -->
                            <!-- <span v-if="item.prop == 'Waveform'" style="color: blue; text-decoration: underline; cursor: pointer;"  @click="queryBxView(scope.row)">波形查看</span> -->
                            <!-- <vxe-button v-if="item.prop == 'Waveform'" status="button" @click="queryBxView(scope.row)" >波形查看</vxe-button > -->
                            <!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
                            <!-- <el-button v-if="scope.row.fileFlag == 0" type="primary" style="color: #000; background: #ccc;">暂无波形</el-button> -->
                            <!-- <el-button
                v-if="item.prop == 'Waveform'"
                type="primary"
                size="mini"
                icon="el-icon-view"
                @click="queryBxView(scope.row)"
                >波形查看</el-button>
              <span v-else> {{ scope.row[item.prop] }}</span> -->
                            <span v-if="item.prop === 'duration'">
                                {{ scope.row[item.prop] / 1000 }}
                            </span>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>
                    </vxe-table-column>
                </template>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="mt10"
            ></el-pagination>
        </div>
        <el-form v-if="view2" :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="值类型选择:">
                <el-select v-if="view2" 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-form-item>
            <el-form-item style="float: right">
                <el-button
                    v-if="view2"
                    @click="backbxlb"
                    type="primary"
                    class="el-icon-refresh-right"
                    style="float: right"
                >
                    返回
                </el-button>
            </el-form-item>
        </el-form>
        <el-tabs :style="`height:${vhh}`" 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 { getSubstationData, getShapeData } from "@/api/TransientStateIndex";
import {
    getPwRmpEventDetail,
    getTransientAnalyseWave,
    getTransientAnalyseWaves
} from '@/api/Distributionnetwork/transient/transient'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
// import boxis from "@/assets/commjs/boxi";
import transientlistVue from '@/views/Event-boot/Region/transientlist.vue'
export default {
    components: { rmsboxi, shushiboxi, Area, Timeinterval },
    data() {
        return {
            boxoList: {},
            view: true,
            view2: false,
            bxecharts: undefined,
            wp: {},
            vh: undefined,
            date: '',
            input: '',
            vhh: '',
            height: null,
            dialogVisible: false,
            item: ['', ''],
            form: {
                // monitorSort: [], //监测点类别
                monitorName: '', //监测点
                endTime: '',
                startTime: '',
                id: '',
                type: '',
                pageNum: 1,
                pageSize: 20
            },
            //电压等级
            Voltagelevel: [],
            //暂态指标
            Sagindex: [],
            //里层默认波形tab标签页
            bxactiveName: 'ssbx',
            value: 1,
            showBoxi: true,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],

            isLoading: false,
            //暂态分布明细
            tableHeaderPlatform: [
                { prop: 'orgName', label: '单位', width: 140 },
                { prop: 'subName', label: '所属变电站', width: 160 },
                { prop: 'powerDistributionArea', label: '所属台区', width: 140 },
                { prop: 'powerClient', label: '用户名称', width: 180 },
                { prop: 'monitorSort', label: '监测点类别', width: 180 },
                {
                    prop: 'monitorVoltageLevel',
                    label: '监测点电压等级(kV)',
                    width: 180
                },
                { prop: 'monitorName', label: '监测点名称', width: 150 },
                { prop: 'startTime', label: '暂态事件发生时间', width: 180 },
                { prop: 'eventType', label: '暂态事件类型', width: 180 },
                { prop: 'featureAmplitude', label: '特征幅值(%)', width: 180 },
                { prop: 'duration', label: '持续时间(秒)', width: 180 }
                // { prop: "Waveform", label: "波形显示", width: 180 },
            ],
            PlatformData: [],
            device: '',
            total: undefined, // 总条数
            multipleSelection: [],
            timeOptions : [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
                // { label: "周", value: 4 },
                // // { label: "自定义", value: 5 },
            ]
        }
    },
    created() {
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
      

        // this.vh2 = window.sessionStorage.getItem('appheight') - 205;
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 165
            this.vhh = window.sessionStorage.getItem('appheight') - 140 + 'px'
            this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
            this.bxecharts = window.sessionStorage.getItem('appheight') - 210 + 'px'
        },
        //获取类型
        getclassificationData() {
            //电压等级
            this.Voltagelevel = dicData('Dev_Voltage', [])
            //暂态指标
            this.Sagindex = dicData('Event_Statis', [])
        },
        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        //里层波形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') - 165 + 'px'
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val
            this.boxi = val
            this.onSubmit()
        },
        //查询
        onSubmit() {
            this.isLoading = true
            this.form.type = this.$refs.interval.intervald
            this.item = this.$refs.interval.timeValue
            this.form.startTime = this.item[0]
            this.form.endTime = this.item[1]
            getPwRmpEventDetail(this.form).then(res => {
                // console.log("暂态事件分布明细:", res);
                this.PlatformData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },

        // // 表格多选
        // handleSelectionChange(val) {
        //   this.multipleSelection = val;
        // },
        selectAllChangeEvent1(row) {
            this.multipleSelection = row.records
            // console.log(this.multipleSelection);
        },
        selectChangeEvent1(row) {
            this.multipleSelection1 = row.records
            // console.log(this.multipleSelection1);
        },

        //波形查看触发按钮
        async queryBxView(e) {
            this.view = false
            this.view2 = true
            this.boxoList = e
            let from = {
                lineId: this.boxoList.eventId,
                systemType: 1,
                type: 1
            }
            await getTransientAnalyseWaves(from).then(res => {
                // console.log(res);
                this.wp = res.data
                setTimeout(() => {
                    this.view = false
                    this.view2 = true
                    this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
                }, 0)
                //  this.initWaves()
            })
            //调取波形图
            this.$nextTick(() => {})
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.id = data.id
        },
        cellStyle(row) {
            // console.log(row,'================');
            // if(row.row.monitoringPoint=='Ⅱ类监测点' || row.row.monitoringPoint=='Ⅲ类监测点'){
            //   row.row.substation = '/'
            // }
            // if(row.row.monitoringPoint=='Ⅰ类监测点' || row.row.monitoringPoint=='Ⅲ类监测点'){
            //   row.row.platform = '/'
            // }
            // if(row.row.monitoringPoint=='Ⅱ类监测点' || row.row.monitoringPoint=='Ⅱ类监测点'){
            //   row.row.username = '/'
            // }
            // if(row.columnIndex==11){
            // row.row.duration=row.row.duration/1000
            // }
            this.Voltagelevel.forEach(item => {
                if (item.value == row.row.monitorVoltageLevel) {
                    row.row.monitorVoltageLevel = item.label
                } else {
                    row.row.monitorVoltageLevel = ''
                }
            })
            this.Sagindex.forEach(item => {
                if (item.value == row.row.eventType) {
                    row.row.eventType = item.label
                }
            })
        },
        //导出
        exportEvent() {
            this.$refs.EventDetails.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
