<template>
    <div class="container">
        <div class="header">
            <div class="title">
                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
                    :typeFun="['time']" :alarmType="[]"></header2>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="lt">
                    <Card title="设备状态总览">
                        <ringChart :data="ringData"></ringChart>
                    </Card>
                </div>
                <div class="lb">
                    <Card title="设备列表">
                        <scrollBoard :config="scrollBoardConfig"></scrollBoard>
                    </Card>
                </div>
            </div>
            <div class="center">
                <div class="ct">
                    <div class="top-item">
                        <h2>设备总数</h2>
                        <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
                            <!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
                            <h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5>
                        </div>
                    </div>
                    <div class="top-item">
                        <h2>网关状态</h2>
                        <div class="div_p">
                            <i :class="true
                                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
                                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
                                "></i>
                        </div>
                    </div>
                </div>
                <LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
                <div class="cb">
                    <Card title="富 怡 全 自 动 裁 床">
                        <DevCard :dev_title="cc_title" :dev_value="cc_value">
                            <div class="progress">
                                <dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
                                <div class="progress-title">稼动率</div>
                            </div>
                        </DevCard>
                    </Card>
                </div>
            </div>
            <div class="right">
                <div class="rt">
                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
                        <PbjCard></PbjCard>
                    </Card>
                </div>
                <div class="rb">
                    <Card title="缝纫设备">
                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
                            <BarChart style="width: 100%;height: 100%;"></BarChart>
                        </DevCard>
                    </Card>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import header2 from '@/components/headerBox/header2.vue'
import Card from './components/Card.vue';
import LineChart from './components/LineChart.vue'
import BarChart from './components/BarChart.vue'
import ringChart from "./components/ringChart.vue";
import DevCard from "./components/DevCard.vue";
import PbjCard from './components/PbjCard.vue';
import scrollBoard from "./components/scrollBoard.vue";
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
import { getCismaList } from '@/http/cisma/index'

import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useMicroExhibitionStore()
let titleTip = [
    {
        color: "#E43961",
        name: t('messages.abnormal'),
    },
    {
        color: "#20AEC5",
        name: t('messages.NoAbnormal'),
    },
    {
        color: "#A7A6BD",
        name: t('messages.disconnection'),
    },
];
document.title = '设备大屏展示系统';
let ringData = ref([]);
ringData.value = [
    { name: '工作', value: 7 },
    { name: '停机', value: 6 },
    { name: '待机', value: 3 },
]
let scrollBoardConfig = reactive({
    header: ['序号', '设备名称', '机架号', '工作时长', '状态'],//, '故障率'
    headerBGC: 'rgb(52, 105, 243)',
    oddRowBGC: '#100c2a',
    evenRowBGC: '#100c2a',
    wrap: [false, true, false, false, false],
    columnWidth: [80, 290, 120, 120, 120, 120],
    align: ['center', 'center', 'center', 'center', 'center', 'center'],
    data: [
        [1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
    ],
    rawData: []
})
let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
let cc_title = ['机架号', '设备状态',  '裁片数量']
let cc_value = ref([[102014421, '待机', '1000片']])
let dev_value = [
    [102014423, '待机', '40层', '1000片'],
    [102014424, '待机', '40层', '1000片'],
]

let pond_config = reactive({
    data: [55],
    shape: 'round'
})
async function reqCismaList() {
    let res: any = await getCismaList()
    if (res.code === 200) {
        store.setDevlist(res.data.devlist)
        store.setDevnum(res.data.devnum)
        changeRingData()
        changescrollBoardConfig()
    }

}

function changeRingData() {
    ringData.value = [
        { name: '工作', value: store.devnum.on },
        { name: '停机', value: store.devnum.off },
        { name: '待机', value: store.devnum.wait },
    ]
}
function changescrollBoardConfig() {
    scrollBoardConfig.data = store.devlist.map((item: any, index: number) => {
        return [index + 1, item.name, item.label, item.runTime + '分', item.status]
    })
}
onMounted(() => {
    reqCismaList()
})
</script>

<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
}

.header {
    height: 150px;
    width: 1920px;
}

.content {
    height: 930px;
    width: 1920px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.left,
.right {
    height: 930px;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center {
    flex: 1;
    height: 930px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lt {
    width: 100%;
    height: 370px;
}

.lb {
    width: 100%;
    height: 530px;
}

.ct {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.top-item {
    width: 30%;
    height: 100%;
    background-image: url(@/assets/img/u8.png);
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 5px;
}

.top-item .div_p {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.div_p .div-p-tip {
    position: absolute;
    font-size: 1.5rem;
    top: 10%;
    left: 20%;
}

h2 {
    /* color: #fff; */
    font-size: 18px;
    line-height: 1.5rem;
}

.on {
    color: #20AEC5;
    font-size: 3.5rem;
}

.off {
    color: #797979;
    font-size: 3.5rem;
}

.cc,
.cb {
    width: 100%;
    height: 400px;
}

.rt,
.rb {
    width: 100%;
    height: 455px;
}

.progress {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.progress-title {
    margin-top: 20px;
    font-size: 16px;
    color: #fff;
}
</style>
