<template>
    <div class="leftpageContainer">
        <!-- 头部图表 -->
        <div class="topInfoContainer">
            <div class="left">
                <span class="top">
                    <span class="num">365</span>
                    <span class="unit">day</span>
                </span>
                <span class="desc">
                    运行天数
                </span>
            </div>
            <div class="right">
                <div class="operationStats">
                    <div class="statItem">
                        <div class="statLabel">
                            <span class="title">计划发电/实际发电</span>
                            <div class="progressText"><span class="actual">{{ operationData.efficiencyActual }}</span>/{{
                                operationData.efficiencyPlan }} <span class="unit"> kWh</span></div>
                        </div>
                        <div class="progressBar">
                            <div class="progressTrack">
                                <div class="progressFill status"
                                    :style="{ width: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
                                </div>
                            </div>
                            <div class="progressCircle"
                                :style="{ left: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
                            </div>
                        </div>
                    </div>
                    <div class="statItem">
                        <div class="statLabel">
                            <span>待处理工单数量</span>
                            <div class="progressText"><span class="actual">{{ operationData.gdNum }}</span>/{{ operationData.gdNumTotal }}
                                <span class="unit"> 个</span>
                            </div>

                        </div>
                        <div class="progressBar">
                            <div class="progressTrack">
                                <div class="progressFill status"
                                    :style="{ width: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
                                </div>
                            </div>
                            <div class="progressCircle"
                                :style="{ left: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中部图表 -->
        <div class="middleInfo">
            <SmallTitle :title="'光伏电站总览'" />
            <div class="middleInfoContainer">
                <div class="totalView">
                    <div class="totalNum">
                        <span class="num">264966.00</span>
                        <span class="unit">kWh</span>
                    </div>
                    <div class="totalDesc">
                        累计总发电量
                    </div>
                </div>
                <div class="electricity">
                    <div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
                        <div class="left">
                            <img src="@/assets/ueimg/icon-2.png" alt="">
                        </div>
                        <div class="right">
                            <div class="title">{{ item.title }}</div>
                            <div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 底部信息 -->
        <div class="bottomInfo">
            <SmallTitle :title="'主规模设备'" />
            <div class="infoContainer">
                <div v-for="item in infoList" :key="item.name" class="infoItem">
                    <div class="infoIcon">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="infoName">
                        {{ item.name }}
                    </div>
                    <div class="infoValue">
                        {{ item.value }}
                    </div>
                    <div class="infoUnit">
                        {{ item.unit }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import SmallTitle from './smalltitle.vue';
import { ref } from 'vue';

// 模拟数据量，用于拖动条渲染
const operationData = ref({
    efficiencyPlan: 1500,
    efficiencyActual: 125,
    gdNumTotal: 100,
    gdNum: 50,
});

const infoList = ref([
    {
        name: '变压器220KV',
        value: 564,
        unit: '（台）',
        icon: 'src/assets/ueimg/1.png',
    },
    {
        name: '开关柜220KV',
        value: 100,
        unit: '（台）',
        icon: 'src/assets/ueimg/2.png',
    },
    {
        name: '接地变110v',
        value: 564,
        unit: '（台）',
        icon: 'src/assets/ueimg/3.png',
    },
    {
        name: '电缆110v',
        value: 768,
        unit: '（回）',
        icon: 'src/assets/ueimg/4.png',
    },
    {
        name: 'GIS',
        value: 100,
        unit: '（个）',
        icon: 'src/assets/ueimg/5.png',
    },
])

// 发电量数据
const powerGenerationData = ref([
    {
        type: 'day',
        title: '日发电量',
        value: 2649,
        unit: 'kWh'
    },
    {
        type: 'month',
        title: '月发电量',
        value: 2649,
        unit: 'kWh'
    },
    {
        type: 'year',
        title: '年发电量',
        value: 2649,
        unit: 'kWh'
    }
])

</script>
<style scoped lang="scss">
@import '@/views/ueScreen/gis.scss';

.leftpageContainer {

    // 头部图表
    .topInfoContainer {
        width: 100%;
        height: vh(128);
        display: flex;

        .left {
            width: vw(180);
            height: vh(140);
            background-image: url('@/assets/ueimg/bg1.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .top {
                position: absolute;
                top: vh(14);

                .num {
                    font-size: vh(24);
                }

                .unit {
                    font-size: vh(16);
                    color: rgba(255, 255, 255, 0.7);
                }
            }

            .desc {
                font-size: vh(12);
            }
        }

        .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: vw(10);
            font-family: 'SourceHanSansCN-Regular';

            .operationStats {
                width: 100%;

                .statItem {
                    margin-bottom: vh(20);

                    .statLabel {
                        font-size: vh(16);
                        color: rgba(255, 255, 255, 0.87);
                        margin-bottom: vh(10);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .title {
                            // width: vw(140);
                        }
                         .progressText {
                            padding-right: vw(4);
                            .actual {
                            color: rgba(125, 246, 255, 1)
                            }
                        }
                    }

                    .progressBar {
                        position: relative;
                        margin-bottom: vh(20);

                        .progressTrack {
                            height: vh(10);
                            background: rgba(255, 255, 255, 0.15);
                            overflow: hidden;
                            margin-bottom: vh(8);
                            position: relative;

                            .progressFill {
                                height: 100%;
                                transition: width 0.5s ease;

                                &.status {
                                    background: linear-gradient(259.28deg, rgba(41, 241, 250, 1) 0%, rgba(41, 241, 250, 0) 100%);
                                }
                            }
                        }

                        .progressCircle {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: vh(24);
                            height: vh(24);
                            border-radius: 50%;
                            background: linear-gradient(135deg, #7df6ff 0%, #29f1fa 100%);
                            box-shadow: 0 0 vh(10) rgba(41, 241, 250, 0.8);
                            border: vh(2) solid rgba(255, 255, 255, 0.9);
                            z-index: 10;
                            transition: left 0.5s ease;
                        }
                    }
                }
            }
        }
    }

    //  中部信息
    .middleInfo {

        .middleInfoContainer {
            // margin-top: vh(12);
            width: 100%;
            height: vh(313);
            // padding: vw(8);
            box-sizing: border-box;
            position: relative;
            background-image: url('@/assets/ueimg/bg.png');
            background-size: 100% 100%;
            margin-bottom: vh(12);

            .totalView {
                display: flex;
                flex-direction: column;
                align-items: center;

                .totalNum {
                    margin-top: vh(31);

                    .num {
                        font-size: vh(36);
                        font-family: 'LCDFont';
                    }

                    .unit {
                        margin-left: vw(11);
                        font-size: vh(16);
                    }
                }

                .totalDesc {
                    font-size: vh(12);
                    margin-top: vh(8);
                }
            }

            .electricity {
                width: vw(462);
                display: flex;
                justify-content: space-around;
                position: absolute;
                bottom: vh(27.51);

                .powerGenerationBox {
                    display: flex;
                    align-items: center;
                    height: vh(60);
                    font-family: 'SourceHanSansCN-Regular';
                    color: rgba(255, 255, 255, 1);
                    .left {
                        img {
                            width: vw(48);
                            height: vh(48);
                        }
                    }

                    .right {
                        .title {
                            font-size: vh(16);
                        }

                        .num {
                            margin-top: vh(10.28);
                            font-family: 'D-Din';
                            font-size: vh(24);
                            text-shadow: 0px 0px 6px rgba(0, 255, 238, 1);

                            .unit {
                                font-size: vh(16);
                            }
                        }
                    }
                }
            }
        }
    }

    // 底部信息
    .bottomInfo {
         background-color: rgba(17, 25, 24, 0.3);
        .infoContainer {
            .infoItem {
                display: flex;
                align-items: center;
                width: 100%;
                height: vh(74);
                background-image: url('@/assets/ueimg/item.png');
                background-size: cover;
                padding: vw(8);
                margin-top: vh(12);
                box-sizing: border-box;
                font-family: 'SourceHanSansCN-Regular';
                color: rgba(255, 255, 255, 1);
                .infoIcon {
                    img {
                        width: vw(42);
                        height: vh(42);
                    }
                }

                .infoName {
                    margin-left: vw(17);
                    font-size: vh(20);
                    width: vw(200);
                    height: vh(28);
                }

                .infoValue {
                    margin-left: vw(62);
                    font-size: vh(20);
                }

                .infoUnit {
                    margin-left: vw(34);
                    font-size: vh(18);
                    color: rgba(125, 255, 253, 1);
                }
            }
        }
    }
}
</style>