<template>
    <div>
        <div v-if="view">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <Area @click="handleNodeClick" class="Box"></Area>
                </el-form-item>
                <el-form-item>
                    <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
                </el-form-item>
                <el-form-item label="监测点名称:" class="Box">
                    <el-input v-model="form.monitorName" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="暂态指标类型:" class="box1">
                    <el-select v-model="form.eventType" clearable multiple collapse-tags placeholder="请选择">
                        <el-option
                            v-for="item in indexType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="监测点类别:" class="box2">
                <el-select
                v-model="form.monitorSort"
                clearable
                multiple
                collapse-tags
                placeholder="请选择"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="inquire" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                    <!-- <el-button type="primary" icon="el-icon-refresh" >重置</el-button> -->
                </el-form-item>
            </el-form>
            <el-row>
                <!-- <div class="box" v-if="view">
            <el-button type="primary" icon="el-icon-refresh" >导出报表</el-button>
        </div> -->
                <vxe-table
                    :data="domainData"
                    :height="height"
                    stripe
                    border
                    :row-config="{ isCurrent: true, isHover: true }"
                    size="mini"
                    ref="EventDetails"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    :row-class-name="rowClassName"
                >
                    <vxe-table-column field="number" title="序号" width="80" align="center"></vxe-table-column>
                    <vxe-table-column field="deptName" title="所属单位" align="center" show-overflow></vxe-table-column>
                    <vxe-table-column
                        field="measurementPointName"
                        title="监测点名称"
                        show-overflow
                        align="center"
                    ></vxe-table-column>
                    <vxe-table-column
                        field="monitorSort"
                        title="监测点类别"
                        align="center"
                        show-overflow
                    ></vxe-table-column>
                    <vxe-table-column
                        field="eventType"
                        title="暂态指标类型"
                        align="center"
                        show-overflow
                    ></vxe-table-column>
                    <!-- <vxe-table-column field="phase" title="相别" align="center" show-overflow></vxe-table-column> -->
                    <vxe-table-column
                        field="startTime"
                        title="事件发生时间"
                        align="center"
                        show-overflow
                    ></vxe-table-column>
                    <vxe-table-column field="duration" title="持续时间(s)" show-overflow align="center">
                        <!-- <template slot-scope="scope">
                            {{ scope.row.duration.toFixed(2) }}
                        </template> -->
                    </vxe-table-column>
                    <vxe-table-column field="featureAmplitude" title="特征幅值(%)" align="center">
                        <template slot-scope="scope">
                            {{ (scope.row.featureAmplitude * 100).toFixed(2) }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column title="波形图" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.fileFlag == 0" type="primary" icon="el-icon-view" style="color: #000; background: #ccc;">暂无波形</el-button>
                            <el-button v-if="scope.row.fileFlag == 1" type="primary" size="mini" icon="el-icon-view" @click="queryBxView(scope.row)">
                                波形查看
                            </el-button>
                            <!-- <span  style="color: blue; text-decoration: underline; cursor: pointer;"  @click="queryBxView(scope.row)">波形查看</span> -->
                        </template>
                    </vxe-table-column>
                </vxe-table>
                <el-pagination
                    v-if="view"
                    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>
            </el-row>
        </div>
        <el-form v-if="view2" :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="值类型选择:">
                <el-select v-if="view2" @change="changeView" v-model="value" 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 @click="backbxlb" type="primary" class="el-icon-refresh-right">返回</el-button>
            </el-form-item>
        </el-form>

        <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-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 rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import {
    getDetailsOfTransientEvents,
    getTransientAnalyseWave,
    getTransientAnalyseWaves
} from '@/api/Statistical-analysis/transientIndicators/transientIndicators'
// import { getMonitorEventAnalyseWave} from "@/api/monitoringpointStatistics/echart";
import { dicData } from '@/assets/commjs/dictypeData'
// import boxis from "@/assets/commjs/boxi";
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
// import xieBoFenxi from "../../Photovoltaic-system/xieBoFenxi.vue";
export default {
    components: { rmsboxi, shushiboxi, Timeinterval, Area },
    data() {
        return {
            wp: null,
            boxoList: null,
            view: true,
            view2: false,
            bxecharts: null,
            // boxi:boxis,
            //里层默认波形tab标签页
            bxactiveName: 'ssbx',
            value: 1,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            showBoxi: true,
            //监测点名称
            monitoringpointName: [],
            //暂态指标类型
            indexType: [],
            //监测点类别
            typeList: [],
            vh: null,
            height: null,
            activeName: 'first', //区分是那个节点
            domainData: [],
            multipleSelection: [],
            device: null,
            currentPage: 1, // 当前页码
            total: undefined, // 总条数
            pageSize: 20, // 每页的数据条数
            isLoading: false,
            dialogVisible: false,
            item: ['', ''],
            form: {
                endTime: '',
                eventType: [],
                id: '',
                monitorName: '',
                monitorSort: [],
                startTime: '',
                subName: '',
                pageNum: 1,
                pageSize: 20,
                type: 0
            },
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
    },
    mounted() {
        this.device = window.devicePixelRatio

        // console.log('===============',this.wp);
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.transientlist()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
            this.height = window.sessionStorage.getItem('appheight') - 165 + 'px'
            this.bxecharts = window.sessionStorage.getItem('appheight') - 210 + 'px'
        },
        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        //获取类型
        getclassificationData() {
            this.indexType = dicData('Event_Statis', [])
            this.indexType.forEach(item => {
                this.form.eventType.push(item.id)
            })
            this.typeList = dicData('Line_Sort', [])
            this.typeList.splice(1, 2)
            this.form.monitorSort.push(this.typeList[0].id)
        },
        //序号排序
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        inquire() {
            this.form.pageNum = 1
            this.transientlist()
        },
        //获取表格数据
        transientlist() {
            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]
            getDetailsOfTransientEvents(this.form).then(res => {
                if (res.data == []) {
                    this.total = 0
                } else {
                    this.isLoading = false
                    this.domainData = res.data.records
                    this.total = res.data.total
                }
            })
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.transientlist()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.transientlist()
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.id = data.id
        },

        //波形查看触发按钮
        async queryBxView(e) {
            //console.log(e, "================");
            this.boxoList = e
            // console.log("+++++++++++++++++++++",e)
            let from = {
                id: this.boxoList.eventId,
                //timeId: this.boxoList.startTime,
                systemType: 1,
                type: 0
            }
            // await getTransientAnalyseWave(from).then((res) => {
            await getTransientAnalyseWaves(from).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    this.view = false
                    this.view2 = true
                    setTimeout(() => {
                        this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
                    }, 0)
                }

                //  this.initWaves()
            })

            // console.log( this.boxoList);
            //调取波形图
            this.$nextTick(() => {})
        },

        //里层波形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') - 125 + 'px'
        },
        //导出
        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');
::v-deep .vxe-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0;
}
.box {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}

// ::v-deep .demo-form-inline {
//   display: flex;
//   flex-wrap: wrap;
//   .el-select .el-input__inner {
//     width: 170px;
//   }
// }

::v-deep .vxe-button {
    background-color: #006565;
}
::v-deep .vxe-button.type--button {
    border: 1px solid #006565;
}
::v-deep .vxe-button:not(.is--disabled) {
    color: white;
}
</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;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
