<template>
    <div style="padding: 0px">
        <el-col :span="24">
            <vxe-table
                :data="domainData"
                :height="vh"
                border
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                size="mini"
                ref="EventDetails"
                v-loading="isLoading"
                header-cell-class-name="table_header"
                style="width: 100%"
            >
                <vxe-table-column
                    field="deptName"
                    title="所属单位"
                    align="center"
                    show-overflow
                    min-width="180"
                ></vxe-table-column>
                <vxe-table-column
                    field="measurementPointName"
                    title="监测点名称"
                    show-overflow
                    align="center"
                    min-width="180"
                ></vxe-table-column>
                <vxe-table-column
                    field="monitorSort"
                    title="监测点类别"
                    align="center"
                    min-width="150"
                    show-overflow
                ></vxe-table-column>
                <vxe-table-column
                    field="eventType"
                    title="暂态指标类型"
                    align="center"
                    min-width="130"
                    show-overflow
                ></vxe-table-column>
                <!-- <vxe-table-column
            field="phase"
            title="相别"
            align="center"
            min-width="100"
            show-overflow
          ></vxe-table-column> -->
                <vxe-table-column
                    field="startTime"
                    title="事件发生时间"
                    align="center"
                    min-width="150"
                    show-overflow
                ></vxe-table-column>
                <vxe-table-column field="duration" title="持续时间(s)" min-width="110" 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"
                    min-width="100"
                ></vxe-table-column>
            </vxe-table>
        </el-col>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getDetailsOfTransientEvents,
    getTransientAnalyseWave,
    getTransientAnalyseWaves
} from '@/api/Statistical-analysis/transientIndicators/transientIndicators'
export default {
    props: {
        item: {
            type: Object,
            default: null
        },
        item2: {
            type: Object,
            default: null
        },
        height: {
            type: Number,
            default: null
        },
        height2: {
            type: Number,
            default: null
        }
    },
    watch: {
        height2(a, b) {
            if (a == 24) {
                this.vh = document.getElementById('conmentId').offsetHeight - 180
                this.queryData()
            } else {
                return
            }
        },
        height(a, b) {
            if (a == 6 || a == 8 || a == 9 || a == 16) {
                setTimeout(() => {
                    let str = document.getElementById('areatransienttable').style.height
                    let strsec = str.split('p')
                    let height = parseInt(strsec) - 50
                    this.vh = height + 10
                    this.queryData()
                }, 200)
            } else {
                return
            }
        },
        deep: true
    },
    data() {
        return {
            isLoading: false,
            vh: null,
            h: 0,
            classificationData: [],
            eventType: [],
            domainData: [],
            time: this.timefamt(),
            total: undefined,
            rowClassName: '',
            formData: {
                endTime: '',
                id: '',
                pageNum: 1,
                pageSize: 20,
                eventType: ['e2e73da64f106fbf8322caa762ea7781', 'c37861896dafab0883321e1d508caa51'],
                monitorName: '',
                monitorSort: ['78a96acb276a5fe9d6eff737fdf1973f'],
                startTime: '',
                subName: '',
                type: 3
                // timeFlag: "",
            }
            //   classificationData: [],
        }
    },
    created() {
        this.getclassificationData()
        this.queryData()
    },
    mounted() {
        setTimeout(() => {
            let str = document.getElementById('areatransienttableJb').style.height
            let strsec = str.split('p')
            let height = parseInt(strsec) - 50
            this.vh = height + 10
        }, 200)
    },
    methods: {
        //获取统计类型
        getclassificationData() {
            this.formData.statisticalType = dicData('Statistical_Type', [])[0]
            this.eventType = dicData('Event_Statis', [])
        },
        //过滤
        formFilter(row, column) {
            //console.log();
            if (row.column.property == 'eventType') {
                // let title = "";
                this.eventType.forEach(item => {
                    if (item.value == row.row.eventType) {
                        row.row.depth = item.label
                    }
                })
                // row.row.eventType = title
                return row.row.depth
            } else {
                return row.row[row.column.property]
            }
        },
        timefamt() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            month = month > 9 ? month : '0' + month
            day = day < 10 ? '0' + day : day
            var arr = []
            var time1 = year + '-' + month + '-01'
            arr.push(time1)
            var time2 = year + '-' + month + '-' + day
            arr.push(time2)
            return arr
        },
        queryData() {
            this.isLoading = true
            this.formData.startTime = this.time[0]
            this.formData.endTime = this.time[1]
            var info = window.sessionStorage.getItem('Info')
            info = eval('(' + info + ')')
            this.formData.id = info.deptId
            getDetailsOfTransientEvents(this.formData).then(res => {
                res.data.records.forEach(item => {
                    for (let key in item) {
                        if (item[key] == null) {
                            item[key] = '/'
                        }
                    }
                })
                this.domainData = res.data.records
                this.isLoading = false
            })
        },
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.queryData()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.foformDatarm.pageNum = val
            this.queryData()
        }
    }
}
</script>
