<template>
    <modulen class="anomaly">
        <template #title>数据连通性异常监测</template>
        <template v-if="true">
            <div class="anomaly-container">
                <TableTem :tableData="dataShow" :tableColums="tableColums" />
            </div>
        </template>
        <template #end>
            <el-checkbox class="checkBox" v-model="errorFilter" label="异常筛选" size="large" />
        </template>
    </modulen>
</template>
<script>
import { ref, onMounted, computed } from 'vue'
import TableTem from '@/components/tableTem/index.vue'
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { getDataApiMonitor } from '@/api/dataMonitor'
import { anomaly_tableColums } from './config'
export default {
    components: { TableTem, vueSeamlessScroll },
    setup() {
        let dataList = ref([])
        const isError = val => val === '失败'
        const tableColums = anomaly_tableColums(isError)
        const getDataMonitor = async () => {
            const { msgState, msgContent } = await getDataApiMonitor()
            if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
                dataList.value = msgContent
            }
        }
        // 勾选异常筛选 只展示异常数据 否则展示全部
        const errorFilter = ref(false)
        const dataShow = computed(() => {
            if (!errorFilter.value) {
                return dataList.value
            } else {
                return dataList.value.filter(item => {
                    return isError(item.runStatus)
                })
            }
        })
        onMounted(() => {
            getDataMonitor()
        })
        return {
            dataList,
            tableColums,
            dataShow,
            errorFilter,
        }
    }
}
</script>
<style lang="scss" scoped>
.anomaly {
    height: 30.33%;
    width: 100%;
    margin-bottom: 3%;

    .anomaly-container {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
    }

    .checkBox {
        color: #ffffff;
    }
}
</style>