<template>
    <div style="padding: 0px">
        <el-col :span="24">
            <vxe-table
                :data="totalData"
                :height="vh"
                border
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                size="mini"
                ref="Regionalstatistics"
                v-loading="isLoading1"
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <template v-for="(item, index) in tableHeaderTotal">
                    <vxe-table-colgroup
                        align="center"
                        :field="item.prop"
                        :title="item.label"
                        :min-width="item.width"
                        :key="index"
                        show-overflow
                    >
                        <template v-for="(item, index) in item.children">
                            <vxe-table-column
                                align="center"
                                :field="item.prop"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                            >
                                <!-- <template v-for="(item, index) in item.children">
                    <vxe-table-column :field="item.prop" :title="item.label" :key="index" ></vxe-table-column>
                  </template> -->
                            </vxe-table-column>
                        </template>
                    </vxe-table-colgroup>
                </template>
            </vxe-table>
        </el-col>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import { getAllRStatHarmonicOrg } from '@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators'
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 - 50
                this.queryData()
            } else {
                return
            }
        },
        height(a, b) {
            if (a == 6 || a == 8 || a == 9 || a == 16) {
                setTimeout(() => {
                    let str = document.getElementById('wtzbtjbg').style.height
                    let strsec = str.split('p')
                    let height = parseInt(strsec) - 50
                    this.vh = height + 10
                    this.queryData()
                }, 200)
            } else {
                return
            }
        }
    },
    data() {
        return {
            totalData: [],
            jianceduixiangOptions: [],
            isLoading1: false,
            //区域超标统计
            tableHeaderTotal: [
                { prop: 'orgName', label: '单位', width: '140' },
                { prop: 'measurementTypeClassName', label: '监测对象类别', width: '110' },
                {
                    label: '有效接入监测点数',
                    children: [
                        {
                            prop: 'effectiveMeasurementAverage',
                            label: '日均'
                        },
                        {
                            prop: 'effectiveMeasurementAccrued',
                            label: '累计'
                        }
                    ]
                },
                {
                    label: '超标监测点数',
                    children: [
                        {
                            prop: 'overLimitMeasurementAverage',
                            label: '日均'
                        },
                        {
                            prop: 'overLimitMeasurementAccrued',
                            label: '累计'
                        }
                    ]
                },
                { prop: 'averageOverDay', label: '平均超标天数' }
            ],
            vh: null,
            time: this.timefamt(),
            form: {
                startTime: '',
                endTime: '',
                type: 3,
                id: ''
            }
        }
    },
    created() {
        this.jianceduixiangOptions = dicData('Monitoring_Labels', [])

        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.queryData()
    },
    mounted() {
        setTimeout(() => {
            let str = document.getElementById('wtzbtjbg').style.height
            let strsec = str.split('p')
            let height = parseInt(strsec) - 50
            this.vh = height + 10
        }, 200)
    },
    methods: {
        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.isLoading1 = true
            this.form.startTime = this.time[0]
            this.form.endTime = this.time[1]
            //方法调用获取暂态事件统计数据接口
            getAllRStatHarmonicOrg(this.form).then(res => {
                if (res.data == []) {
                    this.total = 0
                } else {
                    this.isLoading1 = false
                    res.data.forEach(item => {
                        for (let key in item) {
                            if (key === 'measurementTypeClass') {
                                item['measurementTypeClassName'] =
                                    this.jianceduixiangOptions.find(item2 => item2.id === item[key]) &&
                                    this.jianceduixiangOptions.find(item2 => item2.id === item[key]).label
                            }
                        }
                    })
                    this.totalData = res.data
                    // this.total = this.totalData.length;
                }
            })
        }
    }
}
</script>
<style>
.xshou {
    cursor: pointer;
}
</style>
