<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-table
                    stripe
                    :data="severityData"
                    :height="height"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                    highlight-current-row
                    :row-class-name="rowClassName"
                >
                    <el-table-column label="暂态事件严重度(前二十)">
                        <el-table-column prop="number" label="序号" width="70"></el-table-column>
                        <el-table-column
                            prop="startTime"
                            sortable
                            label="暂态事件发生时刻"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column prop="gdName" label="供电公司"></el-table-column>
                        <el-table-column
                            prop="subName"
                            label="变电站"
                            width="180"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column prop="lineName" label="监测点" show-overflow-tooltip></el-table-column>
                        <el-table-column
                            prop="voltageScale"
                            :sort-method="sortJ"
                            sortable
                            label="监测点电压等级"
                        ></el-table-column>
                        <el-table-column prop="loadType" label="干扰源类型"></el-table-column>
                        <el-table-column prop="featureAmplitude" sortable label="暂降(骤升)幅值(%)">
                            <template slot-scope="scope">
                                {{ (scope.row.featureAmplitude * 100).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="duration" sortable label="持续时间(s)"></el-table-column>
                        <el-table-column prop="severity" sortable label="暂态事件严重度"></el-table-column>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
            background
                  align="right"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="form.pageNum"
                  :page-sizes="[10, 20, 30, 40, 50]"
                  :page-size="form.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  class="mt10"
                >
            </el-pagination> -->
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getSeverityData } from '@/api/generaloverview'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    props: {
        item: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            total: 0,
            severityData: [],
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                //   pageNum: 1,
                // pageSize: 20,
                serverName: 'event-boot',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate(),
                statisticalType: {}
            }
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
        this.severity()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 120
        },
        sortJ(a, b) {
            return (
                a.voltageScale.slice(0, a.voltageScale.length - 2) - b.voltageScale.slice(0, b.voltageScale.length - 2)
            )
        },
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[0]
        },
        //获取当前月第一天日期
        getCurrentMonthFirst() {
            var date = new Date()
            var year = date.getFullYear()
            date.setDate(1)
            var month = parseInt(date.getMonth() + 1)
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //获取当天日期
        getNowFormatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },

        //方法调用暂态严重度统计数据接口
        async severity() {
            this.$emit('Loading', true)
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            await getSeverityData(this.form).then(res => {
                // console.log(res);
                // this.isLoading=false;
                this.severityData = res.data
                // console.log(this.severityData);
                this.severityData.forEach(item => {
                    item.eventValue = item.eventValue * 100
                })
            })
            this.$emit('Loading', false)
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.severity()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.severity()
        }
    }
}
</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;
}
</style>
