<template>
    <div class="box">
        <div class="l">


            <div class="top">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <span>种植总面积：</span>
                    <div>
                        <span class="area-num "><span class="color-font">2</span> </span>
                        <span class="area-num "><span class="color-font">2</span> </span>
                        <span class="area-num "><span class="color-font">2</span> </span>
                        <span class="area-num "><span class="color-font">2</span> </span>
                    </div>
                </div>
                <div style="">种植种类：</div>
                <div>
                    <div class="lands">
                        <div class="land" v-for="(item, index) in 33" :key="index">地块</div>
                    </div>
                </div>
            </div>

            <div class="bottom top">
                <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
                <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
            </div>
            <div class="top center">
                <video style="margin-top: 1vh;width: 100%;height: 100%;" autoplay muted
                    src="http://192.168.1.27/live/test.live.mp4?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm">
                </video>
            </div>
        </div>
        <div class="c">
            <div class="top">
            </div>
            <div class="bottom">

                <div class="bottom-li" :class="(item.flag) ? 'act' : ''" v-for="(item, index) in environmentData">

                    <span class="color-font">{{ item.name }}</span>
                    <span>{{ item.value }}{{ item.unit }}</span>
                    <span v-if="item.flag">状态正常</span>
                    <span v-else>状态正常</span>

                </div>

            </div>
        </div>
        <div class="r">

            <div class="center top">
                <div>监控设备总数: <span class="num">1528</span> 台</div>
                <div class="cont">
                    <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
                        <img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">

                        <div class="circle">
                            <img src="/static/detail/bk.png" class="act-img" alt="">
                            <div style="width: 110px;height: 110px;" class="online" id="online"></div>
                        </div>
                        <div class="circle">
                            <img src="/static/detail/bk.png" class="act-img" alt="">
                            <div style="width: 110px;height: 110px;" class="online" id="offline"></div>
                        </div>

                        <img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
                    </div>

                    <div class="eqNum">
                        <div>
                            <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
                                class="num" style="margin-left: 10px;">1418</span> 台
                        </div>
                        <div>
                            <img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num"
                                style="margin-left: 10px;">1418</span>
                            台
                        </div>
                    </div>
                </div>
            </div>







            <div class="bottom">
                <div class="r-b-li" :class="item.flag ? '' : 'act'" v-for="(item, index) in MoistureData" :key="index">

                    <span style="color: azure;">{{ item.name }}</span>
                    <span>{{ item.value }} {{ item.unit }}</span>
                    <span v-if="item.flag">状态正常</span>
                    <span v-else>状态异常</span>


                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import scrollTable from "@/components/scrollTable.vue"
import options from "./option"
import * as echarts from 'echarts';
import warnDetail from "@/components/warnDetail.vue"

import { useRouter } from "vue-router";
const router = useRouter()


const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')
const alignFn = (num) => {
    let arr = []
    for (let i = 0; i < num; i++) {
        arr.push('center')
    }
    return arr
}





const environmentData = reactive([

    {
        name: "风速",
        value: 10,
        unit: "m/s",
        flag: true
    },
    {
        name: "风向",
        value: 10,
        unit: "",
        flag: false
    },
    {
        name: "环境湿度",
        value: 10,
        unit: "%",
        flag: false
    },
    {
        name: "环境温度",
        value: 10,
        unit: "℃",
        flag: false
    },
    {
        name: "二氧化碳",
        value: 10,
        unit: "ppm",
        flag: true
    },
    {
        name: "环境气压",
        value: 10,
        unit: "pa",
        flag: true
    },
    {
        name: "雨量",
        value: 10,
        unit: "mm/h",
        flag: false
    },
    {
        name: "环境光照",
        value: 10,
        unit: "%",
        flag: true
    },
])

const MoistureData = reactive([
    {
        name: "土壤温度",
        value: 12,
        unit: "℃",
        flag: true
    }, {
        name: "土壤湿度",
        value: 12,
        unit: "℃",
        flag: false
    }, {
        name: "土壤电导率",
        value: 12,
        unit: "ps/cm",
        flag: true
    }, {
        name: "土壤PH值",
        value: 4,
        unit: "",
        flag: true
    }, {
        name: "土壤含氮量",
        value: 12,
        unit: "",
        flag: false
    }, {
        name: "土壤含磷量",
        value: 12,
        unit: "",
        flag: false
    },
    {
        name: "土壤含钾量",
        value: 12,
        unit: "",
        flag: true
    },



])


const config3 = reactive({
    header: ['产品名称', '溯源码', '产品名称', '溯源码',],
    headerBGC: "#092757",
    oddRowBGC: "#0C2045",
    headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
    align: alignFn(4),
    data: [
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],

    ]
})
const showWarnDeatil = ref(false)
const hdClick3 = (e) => {
    if (e.ceil) {
        if (e.columnIndex == 3) {
            showWarnDeatil.value = true
        }
    }
}


// 图表
const initCharts = (tag, option) => {
    var chartDom = document.getElementById(tag);
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
}




const test = () => {
    router.replace('/detail')

}

onMounted(() => {

    initCharts('online', options.onLine)
    initCharts('offline', options.offLine)

})

</script>
<style lang="scss">
.box {
    width: 100vw;
    height: 93vh;
    margin-top: 1vh;
    display: flex;
    justify-content: space-between;

    .l {
        width: 25vw;
        height: 93vh;

        .top {
            width: 25vw;
            height: 30vh;
            background-size: 100% 100%;
            // background-color: pink;
            background-image: url('/static/index/SBGJTJ.png');
            margin-top: 1vh;
            box-sizing: border-box;
            padding: 6vh 2vh 1vh 2vh;
            color: #E5EFFF;

            .area-num {
                margin-right: 10px;
                width: 35px;
                height: 40px;
                background-image: url("/static/detail/numbg.png");
                display: inline-block;
                background-size: 100% 100%;
                font-size: 30px;
                text-align: center;
            }


            .lands {
                display: flex;
                flex-wrap: wrap;
                height: 100%;
                justify-content: space-between;
                font-size: 14px;
                overflow-y: auto;
                margin-top: 1vh;
                height: 15vh;

                .land {
                    width: 5vw;
                    height: 3vh;
                    // background-color: #fff;
                    background-image: url('/static/detail/ZL.png');
                    background-size: 100% 100%;
                    color: white;
                    text-align: center;
                    line-height: 3vh;

                }
            }

            .lands::-webkit-scrollbar {
                width: 10px;
                background-color: #153041;
            }

            .lands::-webkit-scrollbar-track {
                background-color: #153041;
            }

            ::-webkit-scrollbar-thumb {
                background-color: #15A1DC;
                border-radius: 5px;
            }

        }



        .center {
            background-image: url("/static/detail/MQJk.png");
        }

        .bottom {
            position: relative;

        }
    }

    .c {
        width: 49vw;
        height: 93vh;

        .top {
            margin-top: 1vh;
            width: 49vw;
            height: 61vh;

        }

        .bottom {
            width: 49vw;
            height: 30vh;
            margin-top: 1vh;
            background-image: url('/static/detail/QXHJJC.png');
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 6vh 1vh 1vh 2vh;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .bottom-li {
                // background-color: #fff;
                width: 49%;
                height: 4vh;
                display: flex;
                box-sizing: border-box;
                justify-content: space-between;
                // border: 1px solid red;
                background-image: url('/static/detail/ZC.png');
                background-size: 100% 100%;
                align-items: center;
                font-size: 16px;
                color: #E5EFFF;
                font-family: FZCYJ;
                padding: 0 1VW;

            }

            .act {
                background-image: url('/static/detail/YC.png');
                color: #C65956;


            }

        }
    }

    .r {
        width: 25vw;
        height: 93vh;

        .bottom {
            width: 25vw;
            box-sizing: border-box;
            padding: 5vh 1vh 1.5vh;
            height: 61vh;
            background-size: 100% 100%;
            background-image: url('/static/detail/TRSQ.png');
            margin-top: 1vh;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;

            .r-b-li {
                width: 95%;
                height: 7.5vh;
                background-image: url('/static/detail/SQBG.png');
                background-size: 100% 100%;
                color: white;
                font-family: FZCYJ;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 0 1.5VW;
                font-size: 14PX;
            }

            .act {
                color: #C55956;
            }
        }

        .top {
            width: 25vw;
            height: 30vh;
            padding: 2vh;
            box-sizing: border-box;
            background-size: 100% 100%;
            background-image: url('/static/index/YJCP.png');
            margin-top: 1vh;
            padding-top: 6vh;
            color: #E5EFFF;
        }

        .center {
            background-image: url('/static/index/JCSBSLTJ.png');

            .num {
                font-size: 20px;
                font-family: FZCYJ;
                color: #E5EFFF;
                background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-left: 30px;
            }



            .cont {
                height: 70%;

                .eqNum {
                    margin-top: 2vh;
                    display: flex;
                    justify-content: space-around;
                    font-size: 11px;
                    background-image: url('/static/index/BTBG.png');
                    background-size: 100% 100%;

                }

                .circle {
                    width: 120px;
                    height: 120px;
                    position: relative;

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

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

                    .act-img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        animation: spin 2s linear infinite;
                        left: -0%;
                        top: 0%;
                    }

                }

                .online {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                }
            }

        }
    }
}
</style>