<template>
    <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail>
    <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length">
    </scrollTable>
</template>
<script setup>
import warnDetail from "@/components/warnDetail.vue"
import scrollTable from "@/components/scrollTable.vue"
import { ref, reactive, onMounted } from "vue"
import { deviceAlarmCountApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
import { globalEventBus } from '@/common/eventBus'


const userInfoStore = areaObj()
const showWarnDeatil = ref(false)

const hdClick3 = (e) => {
    if (e.ceil) {
        if (e.columnIndex == 3) {
            popData.value = data[e.rowIndex]
            showWarnDeatil.value = true
        }
    }
}

const alignFn = (num) => {
    let arr = []
    for (let i = 0; i < num; i++) {
        arr.push('center')
    }
    return arr
}



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 data = reactive([])
const popData = ref("")

onMounted(() => {
    deviceAlarmCountApi(
        {
            ...userInfoStore.userInfo
        }
    ).then(res => {

        res.data.list.forEach(item => {


            data.push(item)
            config3.data.push(
                [item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],
            )
        });
    })
})


globalEventBus.on('indexlefttop', data => {
    popData.value = data.index
    showWarnDeatil.value = true

})
globalEventBus.on('indexlefttop-1', data => {

showWarnDeatil.value = false

})

</script>