<template>
    <div class="container">
        <div class="header">
            <div class="title">{{ skinName }}</div>
        </div>
        <div class="content">
            <div class="left-panel">
                <CardVue class="left-container-1" title="设备列表">
                    <!-- <scrollBoard ref="DvScrollBoard" :data="scrollBoardConfig_data" :config="scrollBoardConfig">
                    </scrollBoard> -->
                    <el-table :data="devList" 
                    v-tableAutoScroll="{delay:15}" 
                    header-row-class-name="table_header" 
                    style="width: 100%;height: 100%;"
                    @row-click="handlePush2item"
                    >
                        <el-table-column prop="code" label="编码" width="90"/>
                        <el-table-column prop="name" label="设备名称" />
                        <el-table-column prop="runTime" label="运行时长" >
                            <template #default="{row}">
                                <div>{{ row.runTime }}min</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="rate" label="设备利用率" >
                            <template #default="{row}">
                                <div>{{ row.rate }}%</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="状态" >
                            <template #default="{row}">
                                <div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">
                                    <svg-icon v-if="row.state == 0" icon-class="stop" class="el-input__icon input-icon" />
                                    <svg-icon v-else-if="row.state == 1" icon-class="wait" class="el-input__icon input-icon" />
                                    <svg-icon v-else-if="row.state == 2" icon-class="run" class="el-input__icon input-icon" />
                                    <svg-icon v-else-if="row.state == 4" icon-class="alarm" class="el-input__icon input-icon" />
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="left-tip-type">
                        <div class="left-tip-type-item">
                            <svg-icon icon-class="run" class="el-input__icon" style="width: 26px;height: 26px;" />
                            <div class="left-tip-type-item-text">工作</div>
                        </div>
                        <div class="left-tip-type-item">
                            <svg-icon icon-class="wait" class="el-input__icon" style="width: 26px;height: 26px;" />
                            <div class="left-tip-type-item-text">待机</div>
                        </div>
                        <div class="left-tip-type-item">
                            <svg-icon icon-class="stop" class="el-input__icon" style="width: 26px;height: 26px;" />
                            <div class="left-tip-type-item-text">停机</div>
                        </div>
                        <div class="left-tip-type-item">
                            <svg-icon icon-class="repair" class="el-input__icon" style="width: 26px;height: 26px;" />
                            <div class="left-tip-type-item-text">维修</div>
                        </div>
                        <div class="left-tip-type-item">
                            <svg-icon icon-class="alarm" class="el-input__icon" style="width: 26px;height: 26px;" />
                            <div class="left-tip-type-item-text">故障</div>
                        </div>
                    </div>
                </CardVue>

                <CardVue class="left-container" title="单设备耗电量排行">

                    <SortBarChart :data="sortBarChartData" fill="#169BD5" />
                    <div class="radio-ab-lb">
                        <el-radio-group v-model="radio_bar" @change="handleChangeBar" size="small">
                            <el-radio-button label="d">当天</el-radio-button>
                            <el-radio-button label="all">累计</el-radio-button>
                        </el-radio-group>
                    </div>
                </CardVue>
            </div>
            <div class="center-panel">
                <div class="dev-type-overview">
                    <div class="status-item" v-for="item in devStatus.devTypes" :key="item.type">
                        <div class="value">
                            <div class="on-text">{{ item.work }}</div>
                            <div class="all-text">{{ item.total }}</div>
                        </div>
                        <div class="label">{{ item.name }}</div>
                    </div>
                    <div class="status-flag">
                        <div class="yuan green"></div>
                        <div class="flag-text">工作数量</div>
                        <div class="yuan blue"></div>
                        <div class="flag-text">设备总数</div>
                    </div>
                </div>
                <div class="status-overview">
                    <div class="status-item">
                        <div class="item-label item-label-1">工作数量</div>
                        <div class="item-label item-label-2">停机数量</div>
                        <div class="item-label item-label-3">待机数量</div>
                        <div class="item-label item-label-4">设备总数</div>
                    </div>
                    <div class="status-center">
                        <div class="status-center-item">
                            <div class="item-value item-label-1">{{ devStatus.work }}台</div>
                            <div class="item-value item-label-2">{{ devStatus.stop }}台</div>
                            <div class="item-value item-label-3">{{ devStatus.wait }}台</div>
                            <div class="item-value item-label-4">{{ devStatus.total }}台</div>
                        </div>
                    </div>
                    <div class="centerChart">
                        <div class="ring-chart">
                            <RingChart :data="devStatus.work/devStatus.total * 100" />
                        </div>
                    </div>
                </div>
                <CenterCard title="用电监测" class="power-monitoring">
                    <div class="power-item-wrapper">
                        <div class="power-item" v-for="item in powerMonitoring" :key="item.label">
                            <div class="item-label">{{ item.label }}</div>
                            <div class="power-chart">
                                <PowerMonitoring :data="item.value" />
                            </div>
                        </div>
                    </div>
                </CenterCard>
            </div>
            <div class="right-panel">
                <CardVue class="left-container" title="设备利用率">
                    <LineChart :data="rateData" />
                </CardVue>
                <CardVue class="left-container" title="设备提醒">
                    <el-table :data="remindData"  v-if="remindData.length > 0" v-tableAutoScroll="{delay:15}" header-row-class-name="table_header" style="width: 100%;height: 100%;">
                        <el-table-column prop="devCode" label="编码" width="90"/>
                        <el-table-column prop="name" label="设备名称" />
                        <el-table-column prop="subject" label="保养内容" />
                        <el-table-column prop="person" label="负责人" />
                        <el-table-column prop="time" label="保养时间" />
                    </el-table>
                    <el-empty v-else description="暂无记录" />
                    <!-- <div class="radio-ab-lb">
                        <el-radio-group v-model="radio_repair" @change="handleChangeRepair" size="small">
                            <el-radio-button label="b">保养</el-radio-button>
                            <el-radio-button label="w">维修</el-radio-button>
                        </el-radio-group>
                    </div> -->
                </CardVue>
                <CardVue class="left-container" title="设备报警">
                    <el-table :data="repairData" v-if="repairData.length > 0" v-tableAutoScroll="{delay:15}" header-row-class-name="table_header" style="width: 100%;height: 100%;">
                        <el-table-column prop="devCode" label="编码" width="90"/>
                        <el-table-column prop="name" label="设备名称" />
                        <el-table-column prop="subject" label="报警内容" />
                        <el-table-column prop="person" label="负责人" />
                        <el-table-column prop="time" label="报警时间" />
                    </el-table>
                    <el-empty v-else description="暂无记录" />
                </CardVue>
            </div>
        </div>
        <div class="footer"></div>
    </div>

</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted,getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import CardVue from './component/card.vue'
import CenterCard from './component/centerCard.vue'
import BarChart from './component/barChart.vue'
import LineChart from './component/lineChart.vue'
import RingChart from './component/ringChart.vue'
import PowerMonitoring from './component/powerMonitoring.vue'
import SortBarChart from './component/sortBarChart.vue'
import scrollBoard from "@/components/ZdScrollBoard/scrollBoard.vue";
import u83 from './image/u83.png'
import u156 from './image/u156.png'
import u157 from './image/u157.png'
import u158 from './image/u158.png'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { getConfigKey } from "@/api/system/config";
import { listDevice, listElect, electMonitoring, deviceStatus, deviceRate,deviceCheck,deviceRepair } from '@/api/screen/micro'

let {proxy} = getCurrentInstance()
let router = useRouter()
let radio_bar = ref('d')
let radio_repair = ref('b')
let skinName = ref('');

let devStatus = reactive({
    "wait": 0,
    "total": 0,
    "stop": 0,
    "rate": 0,
    "work": 0,
    "devTypes": []
})

let devList = ref([])

function getConfigKeyFun(key) {
    getConfigKey(key).then(res => {
        skinName.value = res.msg
    })
}
function status2Img(status) {
    let html = `<div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">`
    switch (status) {
        case 0:
            html += `<img src="${u157}" width="32" height="32">`
            break
        case 1:
            html += `<img src="${u156}" width="32" height="32">`
            break
        case 2:
            html += `<img src="${u83}" width="32" height="32">`
            break
        case 4:
            html += `<img src="${u158}" width="32" height="32">`
            break
        default:
            html += `<img src="${u157}" width="32" height="32">`
            break
    }
    html += '</div>'
    return html
}

//获取设备列表
function getListDevice() {
    listDevice().then(res => {
        devList.value = res.data

    })
}

let sortBarChartData = ref([])
//获取设备能耗排行
function getlistElect() {
    listElect(radio_bar.value).then(res => {
        sortBarChartData.value = res.data.map(item => {
            return {
                name: item.name,
                value: item.electricity
            }
        })
    })
}

//切换能耗排行
function handleChangeBar() {
    getlistElect()
}

function handleChangeRepair() {
    if (radio_repair.value == 'b') {
        getdeviceCheck()
    } else {
        getdeviceRepair()
    }
}

let powerMonitoring = ref([
    { label: '当天耗电量', value: 8 },
    { label: '本周耗电量', value: 60 },
    { label: '本月耗电量', value: 288 }

])

//获取用电监测
function getelectMonitoring() {
    electMonitoring().then(res => {
        powerMonitoring.value = [
            { label: '当天耗电量', value: res.data.day },
            { label: '本周耗电量', value: res.data.week },
            { label: '本月耗电量', value: res.data.month }
        ]
    })
}

let remindData = ref([])

//获取设备提醒
function getdeviceCheck() {
    deviceCheck().then(res => {
        remindData.value = res.data
    })
}
let repairData = ref([])
//获取设备维修
function getdeviceRepair() {
    deviceRepair().then(res => {
        repairData.value = res.data
    })
}




//获取设备状态
function getdeviceStatus() {
    deviceStatus().then(res => {
        devStatus.wait = res.data.wait
        devStatus.total = res.data.total
        devStatus.stop = res.data.stop
        devStatus.rate = res.data.rate
        devStatus.work = res.data.work
        devStatus.devTypes = res.data.devTypes
        getdeviceRepair()
    })
}
let rateData = ref()
//设备利用率
function getdeviceRate() {
    deviceRate().then(res => {
        rateData.value = {
            xAxis: res.data.dates,
            series: res.data.rate
        }
    })
}


function handlePush2item(row) {
    
    router.push({
        path: '/screen/devItem_' + row.id,
    })
}
onMounted(() => {
    getListDevice()
    getlistElect()
    getelectMonitoring()
    getdeviceStatus()
    getdeviceRate()
    getdeviceCheck() 
    getConfigKeyFun('screen.microFactory.title')

})
onUnmounted(() => {
})
</script>

<style lang="scss" scoped>
::v-deep(.table_header th) {
    background-color: transparent !important;
    color: #21dadb;
    text-align: center;
}
.input-icon {
    width: 32px;
    height: 32px;
}
.container {
    width: 1920px;
    height: 1080px;
    position: relative;
    // display: flex;
    // justify-content: center;
    align-items: center;
    background-image: url('/src/assets/images/screen-bg.png');
    background-repeat: no-repeat;
    /* 如果你不想让背景平铺 */
    background-size: cover;
    /* 或者其他你需要的大小设置 */
    background-position: center;

    .header {
        width: 100%;
        height: 89px;
        background-image: url('/src/assets/images/screen-header-bg1.png');
        background-size: 100% 100%;

        .title {
            width: 100%;
            height: 89px;
            font-size: 36px;
            color: #f9f8f4;
            text-align: center;
            line-height: 89px;
            font-weight: 700;
        }

    }

    .content {
        width: 100%;
        height: 975px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        padding: 20px 0;

        .left-panel,
        .right-panel {
            width: 488px;
            height: 100%;
            background-color: rgba(242, 242, 242, 0.0274509803921569);

            .left-container {
                width: 100%;
                height: 320px;
            }

            .left-container-1 {
                width: 100%;
                height: 640px;
            }

            .radio-ab-lb {
                position: absolute;
                top: 23px;
                right: 10px;
            }

            .left-tip-type {
                position: absolute;
                top: 0;
                right: 0;
                width: 200px;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                font-weight: 700;

                .left-tip-type-item {
                    width: 33%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                }
            }
        }

        .center-panel {
            width: 900px;
            height: 100%;

            // background-color: rgba(242, 242, 242, 0.0274509803921569);
            .dev-type-overview {
                width: 100%;
                height: 80px;
                position: relative;
                display: flex;
                justify-content: space-around;
                margin: 30px 0;

                .status-item {
                    width: 120px;
                    height: 80px;
                    text-align: center;
                    color: #f9f8f4;

                    .value {
                        width: 100%;
                        height: 56px;
                        color: #21dadb;
                        font-weight: 700;
                        font-size: 20px;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;

                        &::after {
                            content: "";
                            width: 1px;
                            height: 54px;
                            border: #f9f8f4 solid 1px;
                            position: absolute;
                            transform: rotate(30deg);
                            top: 0px;
                            left: 61px;

                        }

                        .on-text {
                            width: 24px;
                            height: 24px;
                            position: absolute;
                            top: 0;
                            left: 35px;
                            color: #7CFFB2;
                            text-align: center;
                            line-height: 24px;
                        }

                        .all-text {
                            width: 24px;
                            height: 24px;
                            position: absolute;
                            bottom: 0;
                            left: 60px;
                            color: #21dadb;
                            text-align: center;
                            line-height: 24px;
                        }
                    }

                    .label {
                        width: 100%;
                        height: 24px;
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 24px;
                    }

                }

                .status-flag {
                    position: absolute;
                    width: 100%;
                    height: 50px;
                    top: -53px;
                    left: 15px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .yuan {
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                    }

                    .green {
                        background-color: #7CFFB2;
                    }

                    .blue {
                        background-color: #21dadb;
                    }

                    .flag-text {
                        color: #f9f8f4;
                        font-size: 18px;
                        font-weight: 700;
                        margin: 0 15px;
                    }
                }
            }

            .status-overview {
                position: relative;
                width: 100%;
                height: 400px;
                background: url('./image/u16.png') no-repeat;
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 22px;
                color: #f9f8f4;
                display: flex;
                justify-content: center;
                align-items: center;

                .status-item {
                    position: relative;
                    width: 85%;
                    height: 80%;

                    .item-label {
                        position: absolute;
                        width: 167px;
                        height: 47px;
                        text-align: center;
                        background: url('./image/u19.png') no-repeat;
                        background-size: 100% 100%;
                        line-height: 47px;
                    }

                }

                .item-label-1 {
                    top: 0;
                    left: 0;
                }

                .item-label-2 {
                    top: 0;
                    right: 0;
                }

                .item-label-3 {
                    bottom: 0;
                    left: 0;
                }

                .item-label-4 {
                    bottom: 0;
                    right: 0;
                }

                .status-center {
                    position: absolute;
                    width: calc(85% - 370px);
                    height: calc(80% - 47px - 47px - 30px);

                    .item-value {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        background: url('./image/u107.png') no-repeat;
                        background-size: 100% 100%;
                        line-height: 60px;
                        text-align: center;
                    }
                }

                .centerChart {
                    position: absolute;
                    width: 300px;
                    height: 300px;
                    background: url('./image/u57.png') no-repeat;
                    background-size: 100% 100%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .ring-chart {
                        width: 220px;
                        height: 220px;
                    }
                }

            }

            .power-monitoring {
                width: 100%;
                height: 350px;
                margin-top: 60px;

                .power-item-wrapper {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .power-item {
                        width: 280px;
                        height: 100%;

                        .item-label {
                            width: 100%;
                            height: 47px;
                            background: url('./image/u19.png') no-repeat;
                            background-size: 167px 47px;
                            background-position: center;
                            text-align: center;
                            line-height: 47px;
                            color: #f9f8f4;
                            font-size: 18px;
                            font-weight: 700;
                            margin: 6px 0;
                        }

                        .power-chart {
                            width: 247px;
                            height: 247px;
                        }
                    }
                }

            }
        }
    }

    .footer {
        width: 100%;
        height: 16px;
        background: url('./image/u26.png') no-repeat;
        background-size: 100% 100%;
    }

}
</style>
