<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeArea"></Area>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="Power">查询</el-button>

                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>

        <template>
            <vxe-table
                stripe
                :data="busData"
                :height="height"
                border
                size="mini"
                ref="setInformation"
                v-loading="isLoading"
                header-cell-class-name="table_header"
            >
                <vxe-table-column
                    field="prop0"
                    title="单位"
                    align="center"
                    min-width="200"
                    show-overflow="true"
                ></vxe-table-column>
                <vxe-table-column
                    field="prop0"
                    title="对象类型"
                    align="center"
                    min-width="200"
                    show-overflow="true"
                ></vxe-table-column>
                <vxe-table-colgroup align="center" title="各类电压等级新能源场站监测信息">
                    <vxe-table-colgroup align="center" v-for="(item, index) in tableHeaderPower" :title="item.label">
                        <vxe-table-column
                            v-for="(val, index) in item.children"
                            align="center"
                            :field="val.prop"
                            :title="val.label"
                            :min-width="160"
                            :show-overflow="true"
                        ></vxe-table-column>
                    </vxe-table-colgroup>
                </vxe-table-colgroup>
                <vxe-table-column
                    field="prop0"
                    title="接入线路电压等级为110kV及以上变电站数量(座)"
                    align="center"
                    min-width="350"
                    show-overflow="true"
                ></vxe-table-column>
            </vxe-table>
        </template>
    </div>
</template>

<script>
// import bus from "@/assets/js/eventBus";
import { objType } from '@/api/hbaccountoperation/setInformation'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'

export default {
    components: { Area },
    data() {
        return {
            ruleForm: {
                deptId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
            },
            height: null,
            isLoading: false,
            multipleSelection: [],
            Voltagelevel: [], //电压等级
            //台区台账表头
            tableHeaderPower: [
                {
                    label: '220kV',
                    children: [
                        {
                            label: '已监测数量',
                            prop: ''
                        },
                        {
                            label: '新能源场站总数',
                            prop: ''
                        },
                        {
                            label: '装置数量(台)',
                            prop: ''
                        },
                        {
                            label: '覆盖变电站数量(座)',
                            prop: ''
                        },
                        {
                            label: '电站覆盖率(%)',
                            prop: ''
                        }
                    ]
                },
                {
                    label: '110kV',
                    children: [
                        {
                            label: '已监测数量',
                            prop: ''
                        },
                        {
                            label: '新能源场站总数',
                            prop: ''
                        },
                        {
                            label: '装置数量(台)',
                            prop: ''
                        },
                        {
                            label: '覆盖变电站数量(座)',
                            prop: ''
                        },
                        {
                            label: '电站覆盖率(%)',
                            prop: ''
                        }
                    ]
                },
                {
                    label: '110kV及以下',
                    children: [
                        {
                            label: '已监测数量',
                            prop: ''
                        },
                        {
                            label: '新能源场站总数',
                            prop: ''
                        },
                        {
                            label: '装置数量(台)',
                            prop: ''
                        },
                        {
                            label: '覆盖变电站数量(座)',
                            prop: ''
                        },
                        {
                            label: '电站覆盖率(%)',
                            prop: ''
                        }
                    ]
                },
                {
                    label: '监测合计',
                    children: [
                        {
                            label: '已监测数量',
                            prop: ''
                        },
                        {
                            label: '新能源场站总数',
                            prop: ''
                        },
                        {
                            label: '装置数量(台)',
                            prop: ''
                        },
                        {
                            label: '覆盖变电站数量(座)',
                            prop: ''
                        },
                        {
                            label: '电站覆盖率(%)',
                            prop: ''
                        }
                    ]
                }
            ],
            busData: []
        }
    },
    created() {},

    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // this.Power()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    computed: {},
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 130
        },

        handleNodeArea(data) {
            this.ruleForm.deptId = data.id
        },
        //获取类型

        //查询母线信息
        Power() {
            this.isLoading = true

            this.busData = []
            objType(this.ruleForm).then(res => {
                this.tableHeaderPower = [
                    {
                        label: '主网已上送',
                        children: []
                    },
                    {
                        label: '典型已上送',
                        children: []
                    }
                ]

                let data = res.data
                let result = data[0].reduce(
                    (acc, item) => {
                        if (item === '合计') {
                            acc.push([])
                        } else {
                            acc[acc.length - 1].push(item)
                        }
                        return acc
                    },
                    [[]]
                )
                result[0].shift()
                result[0].push('合计')
                Array.from(result[0]).forEach((char, i) => {
                    this.tableHeaderPower[0].children.push({
                        prop: `prop${i + 1}`,
                        label: char,
                        width: char.length > 9 ? 250 : 130
                    })
                })
                result[1].push('合计')
                Array.from(result[1]).forEach((char, i) => {
                    this.tableHeaderPower[1].children.push({
                        prop: `prop${result[0].length + i + 1}`,
                        label: char,
                        width: char.length > 9 ? 250 : 130
                    })
                })

                data.shift()
                data.forEach((item, ind) => {
                    // console.log('🚀 ~ objType ~ item:', item)
                    this.busData.push({})
                    Array.from(item).forEach((char, i) => {
                        this.busData[ind][`prop${i}`] = char
                    })
                })
                this.isLoading = false
            })
        },

        //导出
        exportEvent() {
            objType({
                deptId: this.ruleForm.deptId
            }).then(res => {
                this.$refs.setInformation.exportData({
                    filename: '台账上送统计', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

::v-deep .vxe-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

.pms {
    margin-left: 10px;
}

.obtain {
    margin-left: 1220px;
}
</style>
