<template>
    <!-- <transition appear enter-active-class="animated fadeIn"> -->
    <!-- height: 2110px;width:1915px -->
    <q-card flat :style="{ height: '100%' }">
        <q-card-section class="q-pa-sm"
            :style="{ height: (Platform.is.android ? screenStore.CurrentAppFullscreen == true ? Number(Screen.height) + 490 + 'px' : Number(Screen.height) + 450 + 'px' : Number(Screen.height) - 50 + 'px'), width: (Platform.is.android ? '1915px' : '100%') }">
            <div class="row q-col-gutter-sm">
                <!-- 搜索条件 -->
                <!-- <q-table class="my-sticky-header-column-table" :rows="list" row-key="id" separator="cell"
                            :loading="loading" :columns="columns" :table-style="{ height: Screen.height - 135 + 'px' }" flat
                            bordered :rows-per-page-options="[20, 30, 40, 50, 100]">
                            <template v-slot:body="props">
                                <q-tr :props="props" class="tr_hover">
                                    <q-td key="index" :props="props">{{ props.rowIndex + 1 }}</q-td>
                                    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                                    <q-td key="calories" :props="props">{{ props.row.calories }}</q-td>
                                    <q-td key="state" :props="props">{{ props.row.state }}</q-td>
                                    <q-td key="start" :props="props">{{ props.row.start }}</q-td>
                                    <q-td key="end" :props="props">{{ props.row.end }}</q-td>
                                    <q-td key="total" :props="props">{{ props.row.total }}</q-td>
                                </q-tr>
                            </template>
                        </q-table> -->

                <div class="col-xs-6 col-xl-6 col-lg-6 col-sm-6">
                    <q-card class="my-card">
                        <q-card-section class="row q-pa-xs">
                            <template v-for="(item, index) in BalzersList" v-bind:key="item">
                                <div class="q-pa-xs col-xs-4 col-xl-4 col-lg-4 col-sm-4">
                                    <q-card :class="'my-card no-shadow ' + helper.getEquipmentStateColor(item.state)"
                                        :bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
                                        <q-card-section>
                                            <div class="row q-col-gutter-md items-center">
                                                <div class="col-xl-9 col-lg-9 col-sm-9">
                                                    <div class="text-h5 text-weight-bold"> {{ item.equipmentName }}
                                                    </div>
                                                </div>
                                                <div class="col-xl-2 col-lg-2 col-sm-2">
                                                    <q-btn flat round color="dark" icon="visibility"
                                                        v-show="item.state != ''" @click="openView(item)">
                                                        <q-tooltip class="text-body2" :offset="[10, 10]">
                                                            查看设备详情
                                                        </q-tooltip>
                                                    </q-btn>
                                                </div>
                                            </div>
                                        </q-card-section>
                                    </q-card>
                                </div>
                            </template>
                        </q-card-section>
                        <!-- <q-card-section>
                                <div class="text-h6 text-weight-bold text-center ">第四涂层室</div>
                            </q-card-section> -->
                    </q-card>
                </div>
                <div class="col-xs-2 col-xl-2 col-lg-2 col-sm-2">
                    <q-card class="my-card">
                        <q-card-section class="row q-pa-xs">
                            <template v-for="(item, index) in list2" v-bind:key="item">
                                <div class="q-pa-xs col-xs-12 col-xl-12 col-lg-12 col-sm-12">
                                    <q-card :class="'my-card no-shadow ' + helper.getEquipmentStateColor(item.state)"
                                        :bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
                                        <q-card-section class="col-xs-3 col-xl-3 col-lg-4 col-sm-12 ">
                                            <div class="row q-col-gutter-md items-center">
                                                <div class="col-xl-9 col-lg-9 col-sm-9">
                                                    <div class="text-h5 text-weight-bold "> {{ item.equipmentName }}
                                                    </div>
                                                </div>
                                                <div class="col-xl-2 col-lg-2 col-sm-2">
                                                    <q-btn flat round color="dark" icon="visibility" v-show="item.id != ''"
                                                        @click="openView(item)">
                                                        <q-tooltip class="text-body2" :offset="[10, 10]">
                                                            查看设备详情
                                                        </q-tooltip>
                                                    </q-btn>
                                                </div>
                                            </div>
                                        </q-card-section>
                                    </q-card>
                                </div>
                            </template>
                        </q-card-section>
                        <!-- <q-card-section>
                                <div class=" text-h6 text-weight-bold text-center ">第三涂层室</div>
                            </q-card-section> -->
                    </q-card>
                </div>
                <div class=" col-xs-4 col-xl-4 col-lg-4 col-sm-4">
                    <q-card class="my-card">
                        <q-card-section class="row q-pa-xs">
                            <template v-for="(item, index) in list3" v-bind:key="item">
                                <div class="q-pa-xs col-xs-6 col-xl-6 col-lg-6 col-sm-6">
                                    <q-card :class="'my-card no-shadow ' + helper.getEquipmentStateColor(item.state)"
                                        :bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
                                        <q-card-section class="col-xs-3 col-xl-3 col-lg-4 col-sm-12 ">
                                            <div class="row q-col-gutter-md items-center">
                                                <div class="col-xl-9 col-lg-9 col-sm-9">
                                                    <div class="text-h5 text-weight-bold ">
                                                        {{ item.equipmentName }}
                                                    </div>
                                                </div>
                                                <div class="col-xl-2 col-lg-2 col-sm-2">
                                                    <q-btn flat round color="dark" icon="visibility"
                                                        v-show="item.state != ''" @click="openView(item)">
                                                        <q-tooltip class="text-body2" :offset="[10, 10]">
                                                            查看设备详情
                                                        </q-tooltip>
                                                    </q-btn>
                                                </div>
                                            </div>
                                        </q-card-section>
                                    </q-card>
                                </div>
                            </template>
                        </q-card-section>
                        <!-- <q-card-section>
                                <div class="text-h6 text-weight-bold text-center ">
                                    第二涂层室</div>
                            </q-card-section> -->
                    </q-card>
                </div>
                <!-- <div class=" col-xs-4 col-xl-4 col-lg-4 col-sm-4">
                        <q-card class="my-card">
                            <q-card-section class="row q-pa-xs">
                                <template v-for="(item, index) in list4" v-bind:key="item">
                                    <div class="q-pa-xs col-xs-6 col-xl-6 col-lg-6 col-sm-6 ">
                                        <q-card :class="'my-card no-shadow  ' + helper.getEquipmentStateColor(item.state)"
                                            :bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
                                            <q-card-section class="col-xs-3 col-xl-3 col-lg-4 col-sm-12  ">
                                                <div class="row q-col-gutter-md items-center">
                                                    <div class="col-xl-10 col-lg-10 col-sm-10">
                                                        <div class="text-h5 text-weight-bold ">
                                                            {{ item.equipmentName }}
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-2 col-lg-2 col-sm-2">
                                                        <q-btn flat round color="dark" icon="visibility"
                                                            v-show="item.state != ''" @click="openView(item)">
                                                            <q-tooltip class="text-body2" :offset="[10, 10]">
                                                                查看设备详情
                                                            </q-tooltip>
                                                        </q-btn>
                                                    </div>
                                                </div>
                                            </q-card-section>
                                        </q-card>
                                    </div>
                                </template>
                            </q-card-section>
                            <q-card-section>
                                <div class="text-h6 text-weight-bold text-center ">第一涂层室
                                </div>
                            </q-card-section>
                        </q-card>
                    </div> -->

            </div>
        </q-card-section>
    </q-card>
    <!-- </transition> -->

    <!-- 查看详情 -->
    <viewDialog ref="viewRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Screen, Platform } from 'quasar';
import viewDialog from './components/viewDialog.vue';
import { equipmentApi } from 'src/api/equipment/equipmentApi'
import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment'
import helper from 'src/Utils/helper'
import { useScreenStore } from 'src/stores/useScreenStore'

// import screen3_1 from 'src/json/screen3_1.json'
// import screen3_2 from 'src/json/screen3_2.json'
// import screen3_3 from 'src/json/screen3_3.json'
// import screen3_4 from 'src/json/screen3_4.json'

//公共
// const loading = ref(false);
// const columns = ref([
//     {
//         name: 'index',
//         label: '序号',
//         field: 'index',
//         align: 'center',
//         headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
//     },
//     {
//         name: 'name',
//         align: 'center',
//         label: '设备名称',
//         field: 'name',
//         headerClasses: 'text-h4 text-weight-bold',
//         headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
//     },
//     { name: 'calories', align: 'center', label: '设备类型', field: 'calories', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
//     { name: 'state', align: 'center', label: '运行状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
//     { name: 'start', align: 'center', label: '启动时间', field: 'start', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
//     { name: 'end', align: 'center', label: '停止时间', field: 'end', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
//     { name: 'total', align: 'center', label: '累计运行时间', field: 'total', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
// ])

const screenStore = useScreenStore();
const BalzersList = ref();
const list2 = ref();
const list3 = ref();
const list4 = ref();
const equipmentSearchEntity = ref(new EquipmentSearchEntity());
let equipmentListTimer: NodeJS.Timer | null = null; // 设备列表

onMounted(() => {
    EquipmentList();
    // 设置10秒刷新一次
    equipmentListTimer = setInterval(() => {
        EquipmentList();
    }, 10000);
})

onBeforeUnmount(() => {
    // 清理定时器要处理 timer 的类型
    clearInterval(Number(equipmentListTimer))
})


const EquipmentList = () => {
    let Coating1 = [] as any
    let Coating2 = [] as any
    let Coating3 = [] as any
    let BalzersCoating = [] as any
    let templateJSON = {
        id: '',
        equipmentCode: null,
        equipmentName: null,
        equipmentType: null,
        state: '',
        activated: true,
        ordrNo: null,
        remark: null
    }

    // 设备状态,运行:Run，待机:Stop，报警:Alarm
    equipmentApi.getEquipmentList(equipmentSearchEntity.value).then((res: any) => {
        res.forEach((item: any) => {
            if (item.remark == '第一涂层室') {
                Coating1.push(item);
            } else if (item.remark == 'CemeCon') {
                Coating2.push(item);
            } else if (item.remark == 'Ionbond') {
                Coating3.push(item);
            } else if (item.remark == 'Balzers') {
                BalzersCoating.push(item);
            }
        });

        // 第一涂层室
        Coating1.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
        let Coating1Val = [] as any
        for (let i = 1; i <= 14; i++) {
            for (let j = 0; j < Coating1.length; j++) {
                if (Coating1[j].ordrNo == i) {
                    Coating1Val.push(Coating1[j])
                    Coating1.splice(j, 1);
                    break
                } else {
                    Coating1Val.push(templateJSON)
                    break
                }
            }
        }
        // var obj4 = JSON.parse(JSON.stringify(screen3_4)); //由JSON字符串转换为JSON对象
        // obj4.splice(0, 0, templateJSON);
        // obj4.splice(4, 0, templateJSON);
        // obj4.splice(10, 0, templateJSON, templateJSON);
        list4.value = Coating1Val //obj4

        // 第二涂层室
        Coating2.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
        let Coating2Val = [] as any
        for (let i = 1; i <= 18; i++) {
            for (let j = 0; j < Coating2.length; j++) {
                if (Coating2[j].ordrNo == i) {
                    Coating2Val.push(Coating2[j])
                    Coating2.splice(j, 1);
                    break
                } else {
                    Coating2Val.push(templateJSON)
                    break
                }
            }
        }

        // var obj3 = JSON.parse(JSON.stringify(screen3_3)); //由JSON字符串转换为JSON对象
        // obj3.splice(2, 0, templateJSON);
        // obj3.splice(3, 0, templateJSON);
        // obj3.splice(6, 0, templateJSON);
        // obj3.splice(7, 0, templateJSON);
        // obj3.splice(10, 0, templateJSON);
        // obj3.splice(11, 0, templateJSON);
        list3.value = Coating2Val //obj3


        // 第三涂层室
        Coating3.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
        let Coating3Val = [] as any
        for (let i = 1; i <= 9; i++) {
            for (let j = 0; j < Coating3.length; j++) {
                if (Coating3[j].ordrNo == i) {
                    Coating3Val.push(Coating3[j])
                    Coating3.splice(j, 1);
                    break
                } else {
                    Coating3Val.push(templateJSON)
                    break
                }
            }
        }

        // var obj2 = JSON.parse(JSON.stringify(screen3_2)); //由JSON字符串转换为JSON对象
        // obj2.splice(1, 0, templateJSON);
        // obj2.splice(2, 0, templateJSON);
        // obj2.splice(5, 0, templateJSON, templateJSON, templateJSON);
        // obj2.splice(9, 0, templateJSON, templateJSON);
        // obj2.splice(11, 0, templateJSON);
        list2.value = Coating3Val  //obj2

        // 第四涂层室 Balzers
        BalzersCoating.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
        let BalzersCoatingVal = [] as any
        for (let i = 1; i <= 27; i++) {
            for (let j = 0; j < BalzersCoating.length; j++) {
                if (BalzersCoating[j].ordrNo == i) {
                    BalzersCoatingVal.push(BalzersCoating[j])
                    BalzersCoating.splice(j, 1);
                    break
                } else {
                    BalzersCoatingVal.push(templateJSON)
                    break
                }
            }
        }

        // var obj1 = JSON.parse(JSON.stringify(screen3_1)); //由JSON字符串转换为JSON对象
        // obj1.splice(0, 0, templateJSON, templateJSON);
        // obj1.splice(3, 0, templateJSON);
        // obj1.splice(5, 0, templateJSON);
        BalzersList.value = BalzersCoatingVal // obj1

    })
}

const viewRef = ref();
const openView = (e: any) => {
    viewRef.value.clickForm(e);
}

</script>