<template>
    <div :class="show ? 'show' : 'noshow'">
        <div class="boxLeft" :style="height">
            <div v-for="(item, i) in list" :style="boxHeight">
                <div class="title">
                    <span>{{ item.title }}</span>
                    <span class="info" @click="open(i)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <!-- <div style="border: 1px solid #ccc; margin-top: 10px">
                    <div class="infoTop">
                        <div class="infoL">
                            <img :src="item.img" />
                        </div>
                        <div class="infoR">
                            <div class="top">{{ item.infoT }}</div>
                            <div class="bottom">
                                <div v-for="(num, k) in item.num">
                                    <span :style="{ color: item.color[k] }">{{ num.a }}</span>
                                    /
                                    <span :style="{ color: item.color[4] }">{{ num.b }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-table size="small" :height="tabHeight" :data="item.list">
                        <el-table-column prop="name" width="60px" label=""></el-table-column>
                        <el-table-column prop="a" label="500kV" width="63px" align="center"></el-table-column>
                        <el-table-column prop="b" label="220kV" width="63px" align="center"></el-table-column>
                        <el-table-column prop="d" label="110KV" width="63px" align="center"></el-table-column>
                        <el-table-column prop="d" label="35KV" width="63px" align="center"></el-table-column>
                        <el-table-column prop="d" label="总数" width="63px" align="center"></el-table-column>
                    </el-table>
                </div> -->
                <div class="cardBox">
                    <el-card class="card" style="width: 98%">
                        <div style="display: flex">
                            <img :src="item.img" />
                            <div class="row">
                                <el-row :gutter="20">
                                    <el-col :span="12">{{ item.titleT[0] }}</el-col>
                                    <el-col :span="12">{{ item.titleT[1] }}</el-col>
                                </el-row>
                                <el-row :gutter="20" class="mt4">
                                    <el-col :span="12" style="color: #2dcd28">{{ item.list[4].numOne }}</el-col>
                                    <el-col :span="12" style="color: #bd3124">{{ item.list[4].numTwo }}</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/500kv.png" alt="" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">{{ item.list[0].numOne }}</el-col>
                                    <el-col :span="12" style="color: #bd3124">{{ item.list[0].numTwo }}</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/220kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">{{ item.list[1].numOne }}</el-col>
                                    <el-col :span="12" style="color: #bd3124">{{ item.list[1].numTwo }}</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/110kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">{{ item.list[2].numOne }}</el-col>
                                    <el-col :span="12" style="color: #bd3124">{{ item.list[2].numTwo }}</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/35kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">{{ item.list[3].numOne }}</el-col>
                                    <el-col :span="12" style="color: #bd3124">{{ item.list[3].numTwo }}</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <!-- <div  :style="boxHeight">
                <div class="title">
                    <span>终端统计</span>
                    <span class="info" @click="open(1)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
              
                <div class="cardBox">
                    <el-card class="card" style="width: 98%">
                        <div style="display: flex">
                            <img src="@/assets/img/ZD.png" />
                            <div class="row">
                                <el-row :gutter="20">
                                    <el-col :span="12">终端个数</el-col>
                                    <el-col :span="12">终端在线率</el-col>
                                </el-row>
                                <el-row :gutter="20" class="mt4">
                                    <el-col :span="12" style="color: #2dcd28">480</el-col>
                                    <el-col :span="12" style="color: #bd3124">120</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/500kv.png" alt="" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/220kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/110kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/35kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <div  :style="boxHeight">
                <div class="title">
                    <span>监测点统计</span>
                    <span class="info" @click="open(2)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
              
                <div class="cardBox">
                    <el-card class="card" style="width: 98%">
                        <div style="display: flex">
                            <img src="@/assets/img/JCD.png" />
                            <div class="row">
                                <el-row :gutter="20">
                                    <el-col :span="12">总数</el-col>
                                    <el-col :span="12">在线</el-col>
                                </el-row>
                                <el-row :gutter="20" class="mt4">
                                    <el-col :span="12" style="color: #2dcd28">480</el-col>
                                    <el-col :span="12" style="color: #bd3124">120</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/500kv.png" alt="" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/220kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/110kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/img/35kv.png" />
                            <div class="row">
                                <el-row>
                                    <el-col :span="12" style="color: #2dcd28">120</el-col>
                                    <el-col :span="12" style="color: #bd3124">30</el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div> -->
        </div>
        <img
            class="imgL"
            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />

        <!-- 变电站详情 -->
        <stand ref="standRef" />
        <!-- 终端 -->
        <terminal ref="terminalRef" />
        <!-- 检测点 -->
        <point ref="pointRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import { getSubLineGiveAnAlarm, getGridDiagramMonitor, getGridDiagramDev } from '@/api/device-boot/panorama'

const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
    {
        title: '变电站',
        img: new URL(`@/assets/img/BDZ.png`, import.meta.url),
        titleT: ['总数', '告警'],
        list: [
            {
                numOne: 1,
                numTwo: 1
            },
            {
                numOne: 2,
                numTwo: 2
            },
            {
                numOne: 3,
                numTwo: 3
            },
            {
                numOne: 4,
                numTwo: 4
            },
            {
                numOne: 5,
                numTwo: 5
            }
        ]
    },
    {
        title: '终端统计',
        img: new URL(`@/assets/img/ZD.png`, import.meta.url),
        titleT: ['终端个数', '终端在线率'],
        list: [
            {
                numOne: 1,
                numTwo: 1
            },
            {
                numOne: 2,
                numTwo: 2
            },
            {
                numOne: 3,
                numTwo: 3
            },
            {
                numOne: 4,
                numTwo: 4
            },
            {
                numOne: 5,
                numTwo: 5
            }
        ]
    },
    {
        title: '监测点统计',
        img: new URL(`@/assets/img/JCD.png`, import.meta.url),
        titleT: ['总数', '在线'],
        list: [
            {
                numOne: 1,
                numTwo: 1
            },
            {
                numOne: 2,
                numTwo: 2
            },
            {
                numOne: 3,
                numTwo: 3
            },
            {
                numOne: 4,
                numTwo: 4
            },
            {
                numOne: 5,
                numTwo: 5
            }
        ]
    }
])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
const tabHeight: any = mainHeight(320, 3).height
// 详情
const open = (e: any) => {
    if (e == 0) {
        standRef.value.open(formRow.value)
    } else if (e == 1) {
        terminalRef.value.open(formRow.value)
    } else if (e == 2) {
        pointRef.value.open(formRow.value)
    }
}
const info = (row: any) => {
    let form = {
        ...row,
        id: row.orgNo,
        deptIndex: row.orgNo,
        orgId: row.orgNo,
        ids: [],
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
        isUpToGrid: row.isUpToGrid,
        monitorFlag: row.isUpToGrid
    }
    formRow.value = form
    getSubLineGiveAnAlarm(form).then()
    getGridDiagramDev(form)
    getGridDiagramMonitor(form)
}
onMounted(() => {})
defineExpose({ info })
</script>

<style lang="scss" scoped>
.boxLeft {
    background-color: #fff;
    width: 100%;
    padding: 10px 0px 10px 10px;
    font-size: 13px;
    overflow: hidden;
}

.cardBox {
    display: flex;
    flex-wrap: wrap;
    .card {
        margin-top: 10px;
        width: 48%;
        margin-right: 2%;

        img {
            width: 40px;
            height: 40px;
        }
        .row {
            width: 80%;
            text-align: center;
            font-size: 16px;
        }
    }
}

.title {
    // height: ;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    height: 22px;
    line-height: 23px;
    padding-left: 5px;
    width: 100%;
    background-image: linear-gradient(to right, #a4e5da, #fff);

    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
    }
    
}
.infoTop {
    display: flex;
    height: 50px;
    padding-right: 10px;
    .infoL {
        width: 60px;
        img {
            width: 40px;
            margin: 10px;
        }
    }
    .infoR {
        flex: 1;
        .top {
            // margin-top: 2px;
            height: 22px;
            border-bottom: 2px solid #93dee2;
        }
        .bottom {
            margin-top: 3px;
            display: flex;
            font-size: 12px;
            justify-content: space-around;
        }
    }
}
.imgL {
    position: absolute;
    padding: 10px;
    top: calc(50% - 80px);
    right: -23px;
    z-index: 1;
    transform: rotate(180deg);
    height: 200px;
    cursor: pointer;
}

.show {
    width: 0px;
    transition: all 0.3s ease;
    .boxLeft {
        padding: 0;
    }
}
.noshow {
    width: 25%;
    transition: all 0.3s ease;
    .boxLeft {
        padding: 10px 0px 10px 10px;
    }
}
:deep(.el-card) {
    --el-card-padding: 10px !important;
}
:deep(.el-table thead) {
    color: #000;
}
</style>
