<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-table
                    stripe
                    :data="transientCauseData"
                    :height="height"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                    highlight-current-row
                >
                    <el-table-column label="暂态原因统计表">
                        <el-table-column prop="transientCause" label="暂态原因"></el-table-column>
                        <el-table-column prop="fault" label="短路故障"></el-table-column>
                        <el-table-column prop="excitation" label="变压器激磁"></el-table-column>
                        <el-table-column prop="disturbance" label="电压扰动"></el-table-column>
                        <el-table-column prop="largeInduction" label="大型感应电动机启动"></el-table-column>
                        <el-table-column prop="other" label="其他"></el-table-column>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :style="`height: ${vh}px;overflow: hidden;`">
                <PieEcharts @sendData="sendData" ref="child" :item="item"></PieEcharts>
            </el-col>
        </el-row>
    </div>
</template>

<script>
// import { getTransientCauseData} from "@/api/generaloverview";
import PieEcharts from './Echart/Pieecharts.vue'
export default {
    props: {
        item: {
            type: Array,
            default: undefined
        }
    },
    components: { PieEcharts },
    data() {
        return {
            vh: 0,
            height: null,
            isLoading: true,
            transientCauseData: []
        }
    },
    created() {
        // this.severity();
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$emit('Loading', true)

        //    this.height = window.sessionStorage.getItem('appheight') - 700;
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 260
        },
        sendData(data) {
            let arr = [
                {
                    transientCause: '次数',
                    fault: '',
                    excitation: '',
                    disturbance: '',
                    largeInduction: '',
                    other: ''
                },
                {
                    transientCause: '占比(%)',
                    fault: '',
                    excitation: '',
                    disturbance: '',
                    largeInduction: '',
                    other: ''
                }
            ]
            data.data.forEach(item => {
                if (item.reason == '电压扰动') {
                    arr[0].disturbance = item.times
                    arr[1].disturbance = item.rate
                } else if (item.reason == '短路故障') {
                    arr[0].fault = item.times
                    arr[1].fault = item.rate
                } else if (item.reason == '变压器激磁') {
                    arr[0].excitation = item.times
                    arr[1].excitation = item.rate
                } else if (item.reason == '大型感应电动机启动') {
                    arr[0].largeInduction = item.times
                    arr[1].largeInduction = item.rate
                } else if (item.reason == '其他') {
                    arr[0].other = item.times
                    arr[1].other = item.rate
                }

                this.transientCauseData = arr
                setTimeout(() => {
                    this.$emit('Loading', false)
                }, 1500)
            })
        }
        //方法调用暂态严重度统计数据接口
        // severity() {
        //     this.isLoading = true;
        //     //监测覆盖率报表
        //     getTransientCauseData().then((res) => {
        //         this.isLoading = false;
        //         this.transientCauseData = res.data;
        //     });
        // },
    },
    components: { PieEcharts }
}
</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;
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
