<template>
    <div class="dictionary" >
        <div  v-show="view">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="数据来源:">
                        <el-cascader placeholder="请选择数据来源"
                            @change="sourceChange"
                            :options="deviceTree"
                            :show-all-levels="false"
                            :props="{ checkStrictly: true }"
                            clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="级别:">
                        <el-select v-model="formInline.level" placeholder="请选择级别" clearable>
                            <el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <timepicker ref="timepk" :interval="3"></timepicker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    stripe
                    highlight-current-row
                    header-cell-class-name="table_header"
                    style="width: 100%;"
                    :data="tableData"
                    height="calc(100vh - 280px)"
                    border
                    v-loading="loading"
                >
                    <el-table-column prop="engineeringName" label="工程名称" align="center" min-width="160">
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称" align="center" min-width="160">
                    </el-table-column>
                    <el-table-column prop="equipmentName" label="设备名称" align="center" min-width="120">
                    </el-table-column>
                    <el-table-column prop="showName" label="事件描述" align="center" min-width="160">
                    </el-table-column>
                    <el-table-column prop="evtParamPosition" label="事件发生位置" align="center" min-width="160">
                    </el-table-column>
                    <el-table-column prop="evtParamPhase" label="相别" align="center" width="80px">
                    </el-table-column>
                    <el-table-column prop="evtParamTm" label="持续时间(s)" align="center" min-width="140">
                    </el-table-column>
                    <el-table-column prop="evtParamVVaDepth" label="暂降深度" align="center">
                    </el-table-column>
                    <!--            <el-table-column prop="tagName" label="级别" align="center">-->
                    <!--            </el-table-column>-->
                    <el-table-column prop="startTime" label="发生时刻" align="center" min-width="180">
                    </el-table-column>
                    <!--            <el-table-column prop="date2" label="结束时间" align="center">-->
                    <!--            </el-table-column>-->
                <el-table-column label="操作" width="220px"  align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-s-marketing" type="primary"  v-if="scope.row.wavePath && scope.row.evtParamTm<20" @click="getboxin(scope.row)">波形分析</el-button>
                            <el-button v-else size="mini" icon="el-icon-s-marketing" type="info"  :disabled="true">暂无波形</el-button>
                            
                            
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="pageChange"
                    :current-page="formInline.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="formInline.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="mt10"
                >
                </el-pagination>
        </div>
        <el-row>
            <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"
                    @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-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>
      <!-- <xiebofenxi  ref="child"  :bxshuju="bxshuju" @backfh="back"></xiebofenxi>  -->
        </el-row>
    </div>

</template>

<script>
import timepicker from "@/views/components/TimePicker/index4.vue";
import {queryEventpage,getTransientAnalyseWave} from "@/api/app/log";
import rmsboxi from "@/views/Event-boot/components/echarts/rmsboxi";
import shushiboxi from "@/views/Event-boot/components/echarts/shushiboxi";
export default {
    components: {timepicker,rmsboxi,shushiboxi},
    data() {
        return {
            loading: false,
            view: true,
            view2: false,
            formInline: {
                deviceId: "",
                endTime: "",
                engineeringid: "",
                eventIds: [],
                level: "",
                pageNum: 1,
                pageSize: 50,
                projectId: "",
                startTime: "",
                status: "",
                target: [],
                type: 0,
                userId: ""
            },
            total: 0,
            rankOptions: [{
                value: '1',
                label: '1级'
            }, {
                value: '2',
                label: '2级'
            }, {
                value: '3',
                label: '3级'
            }],
            tableData: [],
            tagList: [],
            bxecharts: null,
            boxoList: {},
            value: 1,
            options: [
                {
                value: 1,
                label: "一次值",
                },
                {
                value: 2,
                label: "二次值",
                },
            ],
            wp:{},
            bxactiveName: "ssbx",
            showBoxi: true,
        }
    },
    props: {
        deviceTree: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem("appheight") - 155;
        },

    },
    mounted() {
        this.bxecharts = window.sessionStorage.getItem("appheight") - 160 + "px";
        this.$tools.getDictData('app_event').then(res => {
            this.tagList = res
            //console.log(this.tagList)
        })
        this.queryData()
    },
    methods: {
        getboxin(row){
        //     let data = {
        //         eventId: row.id,
        //    };
        this.boxoList = row;
       getTransientAnalyseWave(row.id).then((res) => {
         if (res != undefined) {
          this.wp = res.data;
          
          this.view = false;
          this.view2 = true;
        }
      });
        },
         //返回触发事件
    backbxlb() {
      this.view = true;
      this.view2 = false;
    },
   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);
    },
        sourceChange(e) {
            console.log(e)
            this.formInline.engineeringid = e[0] || ''
            this.formInline.projectId = e[1] || ''
            this.formInline.deviceId = e[2] || ''
        },
        pageChange(e) {
            console.log('pageChange!')
            console.log(e)
            this.formInline.pageNum = e
            this.queryData()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.queryData()
        },
        queryData() {
            this.loading = true
            this.formInline.startTime = this.$refs.timepk.timeValue[0]
            this.formInline.endTime = this.$refs.timepk.timeValue[1]
            queryEventpage(this.formInline).then(res => {
                console.log(res)
                this.loading = false
                if (res.code === 'A0000') {
                    this.tableData  =[]
                  let  tableData = res.data.records.map(item => {
                        return {
                            tagName: this.tagList.find(item2 => item2.code === item.tag) ? this.tagList.find(item2 => item2.code === item.tag).name : item.tag,
                            info:item.dataSet.map(item=>item.showName+ ':' + item.value +item.unit).join(','),
                            ...item
                        }
                    })
                    let str =[]
                    tableData.forEach(m => {
                        str  = m.evtParamTm.split("s");
                        let str1 =str[0]
                        str1 =Number(str[0])
                        m.evtParamTm = str1
                       // if(str1<20){
                        this.tableData.push(m)
                       // }
                    });
                    this.total =res.data.total
                   //this.total = this.tableData.length
                }
            })
        },
        onSubmit() {
            console.log('submit!');
        },
        del() {
            this.$confirm('确定删除该字段吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
}
</script>
<style lang="scss">

</style>