<template>
    <div class="box_home_left">
        <div class="flex_home">
            <HeadlineTag type="left" value="建筑概况"></HeadlineTag>
            <div class="box_arch">
                <div class="image_architecture">
                    <div class="tect_arch">
                        <svg-icon icon-class="architecture" className="arch_icon" />
                    </div>
                </div>
                <div class="right_content">
                    <div class="title_row">
                        <div class="survey_title">建筑面积:</div>
                        <div class="survey_num">{{ resultData.Area || 0 }}<span>m²</span></div>
                    </div>
                    <div class="title_row">
                        <div class="survey_title">占地面积:</div>
                        <div class="survey_num">{{ resultData.FloorSpace || 0 }}<span>m²</span></div>
                    </div>
                    <div class="title_row">
                        <div class="survey_title">建筑高度:</div>
                        <div class="survey_num">{{ resultData.BuildingHeight || 0 }}<span>m</span></div>
                    </div>
                    <div class="title_row">
                        <div class="survey_title">建筑层数:</div>
                        <div class="survey_num">{{ resultData.Storey || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex_home">
            <HeadlineTag value="设备监控"></HeadlineTag>
            <div class="box_arch space_between_in">
                <div class="box_facility">
                    <div class="left_ity">
                        <div class="title_ity">设备总数</div>
                        <div class="num_ity" style="color: rgb(45, 220, 223);">{{ resultData.Device || 0 }}</div>
                    </div>
                    <div class="facil_line"></div>
                    <div class="left_ity">
                        <div class="title_ity">设备故障</div>
                        <div class="num_ity" style="color: rgb(226, 164, 25);">{{ resultData.Fault || 0 }}</div>
                    </div>
                </div>
                <div class="box_loader">
                    <div class="loader-container">
                        <div class="loader loader1"><span></span></div>
                        <div class="loader loader2"><span></span></div>
                    </div>
                    <div class="facility_border">
                        <div class="box_bg_facility center_in">
                            <svg class="energy_box_icon" aria-hidden="true">
                                <defs>
                                    <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                                        <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                                        <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
                                        <stop offset="100%" stop-color="#ffffff" />
                                    </linearGradient>
                                </defs>
                                <use xlink:href="#icon-emcs" fill="url('#myGradient')" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="box_facility">
                    <div class="right_ity">
                        <div class="title_ity">运行总数</div>
                        <div class="num_ity" style="color: rgb(230, 232, 233);">{{ resultData.Runing || 0 }}</div>
                    </div>
                    <div class="facil_line"></div>
                    <div class="right_ity">
                        <div class="title_ity">报警总数</div>
                        <div class="num_ity" style="color: rgb(232, 64, 66);">{{ resultData.Alarm || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex_home">
            <HeadlineTag value="电能耗(Kw/h)"></HeadlineTag>
            <div class="card_energy">
                <div class="energy_box">
                    <div class="title_row">
                        <el-icon color="rgb(108, 224, 233)">
                            <CaretRight />
                        </el-icon>
                        <div class="day_time">今日</div>
                    </div>
                    <span>{{ resultData.TodayConsumption || 0 }}</span>
                </div>
                <div class="energy_box">
                    <div class="title_row">
                        <el-icon color="rgb(108, 224, 233)">
                            <CaretRight />
                        </el-icon>
                        <div class="day_time">本周</div>
                    </div>
                    <span>{{ resultData.WeekConsumption || 0 }}</span>
                </div>
                <div class="energy_box">
                    <div class="title_row">
                        <el-icon color="rgb(108, 224, 233)">
                            <CaretRight />
                        </el-icon>
                        <div class="day_time">本月</div>
                    </div>
                    <span>{{ resultData.MonthConsumption || 0 }}</span>
                </div>
                <div class="energy_box">
                    <div class="title_row">
                        <el-icon color="rgb(108, 224, 233)">
                            <CaretRight />
                        </el-icon>
                        <div class="day_time">本年</div>
                    </div>
                    <span>{{ resultData.YearConsumption || 0 }}</span>
                </div>
            </div>
        </div>
        <div class="flex_home">
            <HeadlineTag value="能耗分项"></HeadlineTag>
            <div class="space_between_in card_subentry">
                <div class="entry_box">
                    <div class="num_gross">总量</div>
                    <span>{{ getEnergy() || 0 }}</span>
                </div>
                <div class="box_subentry">
                    <div class="subentry_item space_between_in">
                        <div class="same_row_in">
                            <span class="box_line color-cyan"></span>
                            <span>动力</span>
                        </div>
                        <span class="text-cyan">{{ resultData.Impetus || 0 }}</span>
                    </div>
                    <div class="subentry_item space_between_in">
                        <div class="same_row_in">
                            <span class="box_line color-yellow"></span>
                            <span>照明</span>
                        </div>
                        <span class="text-yellow">{{ resultData.illuminating || 0 }}</span>
                    </div>
                    <div class="subentry_item space_between_in">
                        <div class="same_row_in">
                            <span class="box_line color-blue"></span>
                            <span>特殊用电</span>
                        </div>
                        <span class="text-blue">{{ resultData.SpecialElectricity || 0 }}</span>
                    </div>
                    <div class="subentry_item space_between_in">
                        <div class="same_row_in">
                            <span class="box_line color-red"></span>
                            <span>空调插座</span>
                        </div>
                        <span class="text-red">{{ resultData.AirConditioningSockets || 0 }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const getEnergy = () => {
    let num = 0
    num = props.resultData.Impetus + props.resultData.illuminating + props.resultData.SpecialElectricity + props.resultData.AirConditioningSockets
    if (num) {
        num = num
    } else {
        num = 0
    }
    return num
}
</script>

<style scoped lang="scss">
.box_home_left {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2,
}

.flex_home {
    flex: 1;
    color: #fff;
}

.box_arch {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}

.image_architecture {
    margin-left: 30px;
    position: relative;
    flex: none;
    width: 45%;
    height: 100%;
    background: url("@/assets/images/brightbase.png");
    background-size: 80% 80%;
    background-position: center center;
    background-repeat: no-repeat;
}

.tect_arch {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch_icon {
    width: 45%;
    height: 45%;
    margin-bottom: 5%;
}

.right_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.title_row {
    display: flex;
    align-items: center;
}

.survey_title {
    font-size: 16px;
    background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.survey_num {
    margin-left: 10px;
    font-size: 18px;
    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(166, 196, 220));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    span {
        font-size: 14px;
    }
}

.box_bg_facility {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgb(75, 114, 159);
    box-shadow: inset 0px 0px 10px 10px rgb(41, 100, 162);
}

.facility_border {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid rgb(61, 96, 132);
    border-radius: 50%;
    padding: 10px;
    background-color: rgb(5, 26, 54);
}

.box_facility {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.left_ity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.right_ity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.title_ity {
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 18px;
    background-image: -webkit-linear-gradient(bottom, rgb(157, 211, 245), rgb(194, 229, 252));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.num_ity {
    font-weight: bold;
    font-size: 22px;
}

.facil_line {
    width: 50%;
    height: 3px;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgb(157, 211, 245), rgba(0, 0, 0, 0), rgb(157, 211, 245));
    background-size: 20px 10px;
}

.energy_box_icon {
    width: 55px;
    height: 55px;
    position: relative;
    vertical-align: -2px;
}

.box_loader {
    position: relative;
}

.loader-container {
    width: 122px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    position: absolute;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader1:before,
.loader2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(to top, transparent 21%, rgba(17, 40, 72, .3) 52%, rgba(87, 138, 182, 1) 90%, rgba(204, 241, 246, 1) 100%);
    background-size: 100px 180px;
    background-repeat: no-repeat;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.loader2 {
    animation-delay: -1.5s;
}

.loader span {
    position: absolute;
    inset: 7px;
    background: #000;
    border-radius: 50%;
    z-index: 1;
}

.card_energy {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.energy_box {
    width: calc(50% - 20px);
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 20px;
    padding-left: 25px;
    padding-bottom: 8px;
    clip-path: polygon(0 0, 25px 100%, calc(100% - 0px) 100%, 100% 0);
    background-image: linear-gradient(189deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgb(78 106 191 / 50%) 80%, rgb(152, 190, 210) 100%);

    span {
        font-weight: bold;
        font-size: 26px;
        padding-left: 10px;
        background-image: -webkit-linear-gradient(bottom, rgb(149, 199, 233), rgb(188, 220, 243));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.day_time {
    margin-left: 4px;
    font-size: 15px;
    color: #ffffff;
}

.card_subentry {
    height: calc(100% - 40px);
}

.entry_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .num_gross {
        font-size: 15px;
        background-image: -webkit-linear-gradient(bottom, rgb(149, 199, 233), rgb(188, 220, 243));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    span {
        padding-top: 5px;
        font-size: 26px;
    }
}

.box_subentry {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.subentry_item {
    padding-right: 10px;
    width: calc(100% - 10px);
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(46, 58, 80);
}

.box_line {
    width: 6px;
    height: 6px;
    margin-right: 6px;
}
</style>