<template>
    <div>
        <el-row>
            <div class="flex">
                <span style="font-size: 14px; font-weight: bold">
                    <!-- 统计区域:{{'中国' }}  &ensp; 
                    统计时间:{{'2022/07/01-2022/07/28'}}  &ensp;  
                    统计次数:{{'8次'}}  &ensp; -->
                    <span style="color: red; font-size: 12px">注:暂降类型仅统计暂降原因为短路故障事件</span>
                </span>
                <div>
                    <!-- <el-button type="primary" icon="el-icon-download">导出</el-button>
          <el-button type="primary" icon="el-icon-download">保存图片</el-button> -->
                </div>
            </div>
            <el-col :span="24" class="jia">
                <el-row>
                    <el-col :span="12" :style="`height: ${vh};overflow: hidden;`" id="zjlx">
                        <Descent ref="grandson" :descentData="descentData"></Descent>
                    </el-col>
                    <el-col :span="12" :style="`height: ${vh};overflow: hidden;`">
                        <el-table
                            stripe
                            :data="descentData"
                            :height="vh"
                            border
                            style="width: 100%; height: 100%"
                            header-cell-class-name="table_header"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderAera">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :sortable="index == 1 ? true : false"
                                    :key="index"
                                    :min-width="item.width"
                                ></el-table-column>
                            </template>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="24">
                <el-row>
                    <el-col :span="12" :style="`height: ${vh};overflow: hidden;`" id="zjyy">
                        <Resemble ref="grandson1" :resembleData="resembleData"></Resemble>
                    </el-col>
                    <el-col :span="12" :style="`height: ${vh};overflow: hidden;`">
                        <el-table
                            stripe
                            :data="resembleData"
                            :height="height"
                            border
                            class="mt10"
                            style="width: 100%; height: 100%"
                            header-cell-class-name="table_header"
                            highlight-current-row
                        >
                            <template v-for="(item, index) in tableHeaderType">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    :sortable="index == 1 ? true : false"
                                    :key="index"
                                    :min-width="item.width"
                                ></el-table-column>
                            </template>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Descent from '../statistics/Reason/Descent.vue'
import Resemble from './Reason/Resemble.vue'
import { getStatisticData } from '@/api/statistics'
export default {
    props: {
        deptIndex: {
            type: String,
            default: undefined
        },
        item: {
            type: Array,
            default: undefined
        }
    },
    components: { Descent, Resemble },
    data() {
        return {
            vh: null,
            height: null,
            tableHeaderAera: [
                { prop: 'name', label: '暂降原因' },
                { prop: 'value', label: '暂降次数' }
            ],
            descentData: [],
            tableHeaderType: [
                { prop: 'name', label: '暂降类型' },
                { prop: 'value', label: '暂降次数' }
            ],
            resembleData: [],
            //   area: this.areaData,
            //   time: this.timeData,
            isLoading1: false,
            isLoading2: false,
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: {}
            }
        }
    },
    created() {
        // this.reason()
    },

    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        setTimeout(() => {
            this.query()
        }, 0)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 140) / 2 + 'px'
            this.device = window.devicePixelRatio
            let heightd = window.sessionStorage.getItem('appheight') - 220
            this.height = heightd / 2 + 'px'
        },

        // onUpdateCover(data) {
        //   let newObj = JSON.parse(JSON.stringify(data));
        //   // console.log(newObj,'=========================');
        //   this.descentData = newObj.data.reason;
        //   //     console.log(this.descentData);
        //   //     debugger
        //   let obj = {};
        //   this.descentData.forEach((item, index) => {
        //     // debugger
        //     // console.log(item);
        //     if (item.name === "总计") {
        //       obj = item;
        //       this.descentData.splice(index, 1);
        //       return;
        //     }
        //   });
        //   this.descentData.push(obj);
        //   //     console.log(this.descentData);

        //   this.resembleData = newObj.data.type;
        //   let obj1 = {};
        //   this.resembleData.forEach((item, index) => {
        //     if (item.name === "总计") {
        //       obj1 = item;
        //       this.resembleData.splice(index, 1);
        //       return;
        //     }
        //   });
        //   this.resembleData.push(obj1);
        // },
        query() {
            this.isLoading1 = true
            this.isLoading2 = true
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            this.form.deptIndex = this.deptIndex
            getStatisticData(this.form).then(res => {
                this.descentData = res.data.reason
                this.resembleData = res.data.type
                this.isLoading1 = false
                this.isLoading2 = false
                this.$nextTick(() => {
                    this.$refs.grandson.descent()
                    this.$refs.grandson1.resemble()
                })
            })
        }
    }
}
</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;
}
</style>
