<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="flex">
                    <span style="font-size: 14px; font-weight: bold">
                        统计区域: {{ area }} &ensp; 统计时间: {{ time }} &ensp; 统计次数: {{ frequency + '次' }}
                    </span>
                    <!-- <el-button type="primary"  icon="el-icon-download">导出</el-button> -->
                </div>
            </el-col>
            <el-col :span="24">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i></i>
                            区域
                        </template>
                        <el-table
                            stripe
                            :data="areaData"
                            :height="vh"
                            border
                            header-cell-class-name="table_header"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderAera">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :key="index"
                                    :min-width="item.width"
                                    :sortable="item.sortable"
                                ></el-table-column>
                            </template>
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <i></i>
                            电压等级
                        </template>
                        <el-table
                            stripe
                            :data="levelData"
                            :height="vh"
                            border
                            header-cell-class-name="table_header"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderLevel">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :key="index"
                                    :min-width="item.width"
                                    sortable
                                ></el-table-column>
                            </template>
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <i></i>
                            {{ this.intervald == 1
              ? "年份"
              : this.intervald == 2
              ? "季度"
              : this.intervald == 3
              ? "月份"
              : "", }}
                        </template>
                        <el-table
                            stripe
                            :data="shareData"
                            :height="vh"
                            border
                            header-cell-class-name="table_header"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                            highlight-current-row
                        >
                            <el-table-column
                                prop="month"
                                :label="
                                    this.intervald == 1
                                        ? '年份'
                                        : this.intervald == 2
                                        ? '季度'
                                        : this.intervald == 3
                                        ? '月份'
                                        : ''
                                "
                                min-width="120px"
                                sortable
                            ></el-table-column>
                            <el-table-column prop="notAssociated" label="电压暂降次数" sortable>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.month != '总计'">
                                        {{ scope.row.linked + scope.row.notAssociated }}
                                    </span>
                                    <span v-else>{{ scope.row.notAssociated }}</span>
                                </template>
                            </el-table-column>
                            <!-- <template v-for="(item, index) in tableHeaderShare">
                <el-table-column
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                  :min-width="item.width"
                  sortable
                >
                </el-table-column>
              </template> -->
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getAreaData, dictDataCache } from '@/api/Tableabove'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    props: {
        deptIndex: {
            type: String,
            default: undefined
        },
        region: {
            type: String,
            default: undefined
        },
        item: {
            type: Array,
            default: undefined
        },
        intervald: {
            type: [String, Number],
            default: undefined
        },
        timeFlag: {
            type: [Number, Object, Array, String],
            default: undefined
        }
    },
    data() {
        return {
            activeName: '1',
            vh: null,
            device: null,
            currentPage: 1, // 当前页码
            total: 20, // 总条数
            pageSize: 20, // 每页的数据条数
            dialogVisible: false,
            time: '',
            area: '',
            frequency: '',
            isLoading: false,
            isLoading1: false,
            isLoading2: false,
            tableHeaderAera: [
                { prop: 'areaName', label: '区域名称', width: '120px' },
                { prop: 'monitoringPoints', label: '监测点数', sortable: true },
                { prop: 'frequency', label: '电压暂降次数', sortable: true },
                { prop: 'sarfi9', label: 'SARFI-90', sortable: true }
            ],
            areaData: [],
            tableHeaderLevel: [
                { prop: 'voltageLevel', label: '电压等级(kV)', width: '150px' },
                { prop: 'monitoringPoints', label: '监测点数' },
                { prop: 'frequency', label: '电压暂降次数' }
            ],
            levelData: [],
            // tableHeaderShare: [
            //   { prop: "month", label: "月份", width: "120px" },
            //   { prop: "notAssociated", label: "电压暂降次数" },
            // ],
            shareData: [],
            type: {},
            today: null,
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: {},
                timeFlag: ''
            }
        }
    },
    created() {
        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.tableabove()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 325 + 'px'
        },
        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[0]
        },
        tableabove() {
            this.$emit('Loading', true)
            this.time = this.item[0] + '-' + this.item[1]
            this.area = this.region
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            this.form.deptIndex = this.deptIndex
            this.form.timeFlag = this.timeFlag

            getAreaData(this.form).then(res => {
                // console.log(res);

                // console.log("区域表格:", res);
                this.frequency = res.data.areaStatistics.frequencySum
                this.areaData = res.data.areaStatistics.areaCalculation
                let obj1 = {
                    areaName: '总计',
                    monitoringPoints: res.data.areaStatistics.monitoringPointSum,
                    frequency: res.data.areaStatistics.frequencySum,
                    sarfi9: '/'
                }
                this.areaData.unshift(obj1)

                // console.log("电压等级表格:", res);
                this.levelData = res.data.voltageStatistics.voltageLevelCalculation
                let obj2 = {
                    voltageLevel: '总计',
                    monitoringPoints: res.data.voltageStatistics.monitoringPointSum,
                    frequency: res.data.voltageStatistics.frequencySum
                }
                this.levelData.unshift(obj2)

                //  console.log("月份表格:", res);
                this.shareData = res.data.monthlyStatistics.monthCalculation
                let all = 0
                this.shareData.forEach(item => {
                    all += item.linked + item.notAssociated
                })
                let obj3 = {
                    month: '总计',
                    notAssociated: all
                }
                this.shareData.unshift(obj3)
            })
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1500)
        },
        formatter(row, column) {
            // return row.point;
        }
    }
}
</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;
}
.flex {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    line-height: 40px;
}

::v-deep .el-collapse-item__content {
    padding-bottom: 10px;
}
</style>
