<template>
    <div>
        <el-row v-show="view">
            <!-- <span style="font-size:14px;font-weight:bold;">统计区域:{{'中国' }}  &ensp; 
                    统计时间:{{'2022/07/01-2022/07/28'}}  &ensp;  
                    统计次数:{{'8次'}}  &ensp;
              </span> -->
            <el-col :span="24">
                <div class="flex" style="margin: 15px 0">
                    <template>
                        <span style="width: 100px; margin-top: 3px">电压等级:</span>
                        <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="checkAll"
                            @change="handleCheckAllChange"
                            style="margin-right: 28px"
                        >
                            全选
                        </el-checkbox>
                        <el-checkbox-group
                            v-model="checkedVoltage"
                            @change="handleCheckedVoltageChange"
                            style="height: 72px; overflow-y: auto"
                        >
                            <el-checkbox v-for="(item, index) in grade" :label="item" :key="index">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </div>
                <div class="flex" style="margin: 15px 0">
                    <template>
                        <span style="width: 145px; margin-top: 3px">干扰源类型:</span>
                        <el-checkbox
                            :indeterminate="isIndeterminate1"
                            v-model="checkAll1"
                            @change="handleCheckAllChange1"
                            style="margin-right: 28px"
                        >
                            全选
                        </el-checkbox>
                        <el-checkbox-group
                            v-model="checkedSource"
                            @change="handleCheckedSourceChange"
                            style="height: 72px; overflow-y: auto"
                        >
                            <el-checkbox v-for="(item, index) in type" :label="item" :key="index">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </div>
                <div class="flex" style="margin: 15px 0">
                    <template>
                        <span style="width: 55px; margin-top: -1px; margin-right: 10px">兼容曲线:</span>
                        <el-radio v-model="radio" label="ITIC">ITIC</el-radio>
                        <el-radio v-model="radio" label="F47">F47</el-radio>
                    </template>
                </div>
            </el-col>
            <el-col :span="24" id="ictchd">
                <div class="wzhi">
                    <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">下载</el-button>
                </div>
                <div id="ITIC" :style="`width:100%;height:${height};`" v-if="radio == 'ITIC'">
                    <Upper
                        @transfer-data="transferData"
                        ref="grandson"
                        :item="item"
                        :deptIndex="deptIndex"
                        :volateLevelData="volateLevelData"
                        :typeData="typeData"
                        @BoXi="BoXi"
                    ></Upper>
                    <div class="dw">
                        <el-table
                            stripe
                            :data="tolerateData"
                            border
                            style="width: 100%"
                            header-cell-class-name="table_header"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderTolerate">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :key="index"
                                    :min-width="item.width"
                                ></el-table-column>
                            </template>
                        </el-table>
                    </div>
                </div>
                <div id="F47" :style="`width:100%;height:${height};`" v-if="radio == 'F47'">
                    <Dividing
                        @transfer-data1="transferData1"
                        ref="grandson2"
                        :item="item"
                        :deptIndex="deptIndex"
                        :volateLevelData="volateLevelData"
                        :typeData="typeData"
                        @BoXi="BoXi"
                    ></Dividing>
                    <div class="dw">
                        <el-table
                            stripe
                            :data="tolerateData1"
                            border
                            style="width: 100%"
                            header-cell-class-name="table_header"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderTolerate">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :key="index"
                                    :min-width="item.width"
                                ></el-table-column>
                            </template>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div v-if="view2">
            <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" @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-col :span="12">
                    <el-button @click="backbxlb" type="primary" class="el-icon-refresh-right" style="float: right">
                        返回
                    </el-button>
                </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"
                        :flag="1"
                    ></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"
                        :flag="1"
                    ></rmsboxi>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import Upper from './Tolerance/Upper.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Dividing from './Tolerance/Dividing.vue'
import { getMonitorEventAnalyseWave, getTransientDetailById } from '@/api/monitoringpointStatistics/echart'
import html2canvas from 'html2canvas'

import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
export default {
    props: {
        deptIndex: {
            type: String,
            default: undefined
        },
        item: {
            type: Array,
            default: undefined
        }
    },
    components: { Upper, Dividing, rmsboxi, shushiboxi },
    data() {
        return {
            checkAll: true,
            checkAll1: true,
            checkedVoltage: [],
            checkedSource: [],
            grade: [],
            type: [],
            voltage: [],
            showBoxi: true,
            source: [],
            isIndeterminate: false,
            isIndeterminate1: false,
            radio: 'ITIC',
            height: null,
            device: null,
            volateLevelData: [],
            typeData: [],
            //可容忍表格数据
            tableHeaderTolerate: [
                { prop: 'toleranceName', label: '名称', width: 100 },
                { prop: 'totalEvents', label: '事件总数' },
                { prop: 'tolerable', label: '可容忍' },
                { prop: 'Intolerable', label: '不可容忍' }
            ],
            tolerateData: [],
            tolerateData1: [],
            asideheight: undefined,
            boxoList: {},
            wp: {},
            view: true,
            bxecharts: undefined,
            view2: false,
            bxactiveName: 'ssbx',
            value: 1,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ]
        }
    },
    created() {
        // this.tolerance();
        this.getclassificationData()
    },
    mounted() {
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        // let aaa = JSON.parse(window.sessionStorage.getItem("dictypeData"))[13];
        //   aaa.children.forEach(item => {
        //       this.grade.push(item)
        //       this.voltage.push(item.name)
        //   });
        // let bbb = JSON.parse(window.sessionStorage.getItem("dictypeData"))[9];
        //   bbb.children.forEach(item => {
        //       this.type.push(item)
        //       this.source.push(item.name)
        //   });
        // if(this.checkAll==false || this.checkAll1==false){
        //   this.volateLevelData=null
        //   this.typeData=null
        // }else{
        //   this.volateLevelData=this.checkedVoltage
        //   this.typeData=this.checkedSource
        // }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 340 + 'px'
            this.bxecharts = window.sessionStorage.getItem('appheight') - 150 + 'px'
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            if (this.radio == 'ITIC') {
                html2canvas(document.getElementById('ITIC'), {
                    scale: 2
                }).then(function (canvas) {
                    // 创建a标签，实现下载
                    var creatIMg = document.createElement('a')
                    creatIMg.download = 'ITIC.png' // 设置下载的文件名，
                    creatIMg.href = canvas.toDataURL() // 下载url
                    // document.body.appendChild(creatIMg);
                    creatIMg.click()
                    creatIMg.remove() // 下载之后把创建的元素删除
                })
            } else {
                html2canvas(document.getElementById('F47'), {
                    scale: 2
                }).then(function (canvas) {
                    // 创建a标签，实现下载
                    var creatIMg = document.createElement('a')
                    creatIMg.download = 'F47.png' // 设置下载的文件名，
                    creatIMg.href = canvas.toDataURL() // 下载url
                    // document.body.appendChild(creatIMg);
                    creatIMg.click()
                    creatIMg.remove() // 下载之后把创建的元素删除
                })
            }
        },
        changeView() {
            this.showBoxi = false
            setTimeout(() => {
                this.showBoxi = true
            }, 0)
        },
        //获取类型
        getclassificationData() {
            // 电压等级
            let Voltagelevel = dicData('Dev_Voltage_Stand', ['Load_Type'])
            Voltagelevel.forEach(item => {
                this.grade.push(item)
                this.voltage.push(item.name)
            })
            this.checkedVoltage = this.grade
            this.volateLevelData = this.checkedVoltage
            //干扰源类型
            let Interferencesourcetype = dicData('Interference_Source', ['Load_Type'])
            Interferencesourcetype.forEach(item => {
                this.type.push(item)
                this.source.push(item.name)
            })
            this.checkedSource = this.type
            this.typeData = this.checkedSource
        },
        //获取数据
        transferData(data, pointIData, pointIunData) {
            // console.log(data,pointIData,pointIunData,1111);
            let obj = [
                {
                    toleranceName: '事件个数',
                    totalEvents: data.data.totalNumberOfEvents,
                    tolerable: pointIData.length,
                    Intolerable: pointIunData.length
                }
            ]
            this.tolerateData = obj
        },
        transferData1(data, pointFData, pointFunData) {
            // console.log(data,pointIData,pointIunData,1111);
            let obj = [
                {
                    toleranceName: '事件个数',
                    totalEvents: data.data.totalNumberOfEvents,
                    tolerable: pointFData.length,
                    Intolerable: pointFunData.length
                }
            ]
            this.tolerateData1 = obj
        },
        // 电压等级
        handleCheckAllChange(val) {
            // console.log(val);
            this.checkedVoltage = val ? this.grade : []
            this.isIndeterminate = false
            if ((val = false)) {
                this.volateLevelData = null
            } else {
                this.volateLevelData = this.checkedVoltage
            }
            //  console.log(this.volateLevelData, 11111222);
        },
        handleCheckedVoltageChange(value) {
            this.volateLevelData = value
            // console.log(this.volateLevelData);
            let checkedCount = this.volateLevelData.length
            this.checkAll = checkedCount === this.grade.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.grade.length
        },
        //干扰源类型
        handleCheckAllChange1(val) {
            // console.log(val);
            this.checkedSource = val ? this.type : []
            this.isIndeterminate1 = false
            if ((val = false)) {
                this.typeData = null
            } else {
                this.typeData = this.checkedSource
            }
            // console.log(this.typeData, "====================");
        },
        handleCheckedSourceChange(value) {
            this.typeData = value
            // console.log(this.typeData, "一");
            let checkedCount = this.typeData.length
            this.checkAll1 = checkedCount === this.type.length
            this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.type.length
        },
        async BoXi(e) {
            // this.boxoList = e;
            await getTransientDetailById({
                eventId: e,
                sysType: 0,
                smallType: 0
            }).then(res => {
                this.boxoList = res.data
            })
            await getMonitorEventAnalyseWave({
                id: e,
                systemType: 0,
                type: 0
            }).then(res => {
                if (res != undefined) {
                    this.wp = res.data
                    setTimeout(() => {
                        this.view = false
                        this.view2 = true
                    }, 0)
                }

                //  this.initWaves()
            })
        },
        //里层波形tab标签页触发事件
        bxhandleClick(tab, event) {
            if (tab.name == 'ssbx') {
                this.bxactiveName = 'ssbx'
            } else if (tab.name == 'rmsbx') {
                this.bxactiveName = 'rmsbx'
            }
        },
        //返回触发事件
        backbxlb() {
            this.view = true
            this.view2 = false
            this.value = 1
        }
        // tolerance() {
        //   this.isLoading7 = true;
        //   this.tolerateData = [];
        //   //方法调用获取容忍事件数据接口
        //   getTolerancenData().then((res) => {
        //     this.tolerateData = res.data;
        //   });
        // },
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.flex {
    display: flex;
}
.el-checkbox {
    margin-right: 29px;
    margin-bottom: 15px;
}
.dw {
    position: absolute;
    top: 250px;
    right: 10px;
    width: 500px;
    z-index: 2;
}
.wzhi {
    position: absolute;
    //font-weight: 550;
    // margin-top: 10px;
    right: 10px;
    z-index: 1;
    font-size: 14px;
}
</style>
