<template>
    <div class="overview-right">
        <div class="overview-right-item">
            <div class="overview-right-item-title">
                <span style="font-weight: 700">离线终端</span>
            </div>
            <div style="flex: 1; overflow: hidden">
                <vxe-table height="auto" auto-resize :data="tableData1" v-bind="defaultAttribute">
                    <vxe-column type="seq" title="序号" width="70px"></vxe-column>
                    <vxe-column field="updateTime" title="中断时间" width="150px"></vxe-column>
                    <vxe-column field="subName" title="变电站(场站)"></vxe-column>
                    <vxe-column field="devName" title="终端名称"></vxe-column>
                    <!-- <vxe-column field="devType" title="终端型号"></vxe-column> -->
                    <vxe-column field="ip" title="网络参数" width="120px"></vxe-column>
                </vxe-table>
            </div>
        </div>
        <div class="overview-right-item" style="padding-top: 0">
            <div class="overview-right-item-title">
                <div style="font-weight: 700">暂态事件</div>
                <!-- <el-button type="primary" size="small" icon="el-icon-Promotion" @click="jump">事件关联分析</el-button> -->
            </div>
            <div style="flex: 1; overflow: hidden">
                <vxe-table height="auto" auto-resize :data="tableData" v-bind="defaultAttribute">
                    <vxe-column type="seq" title="序号" width="70px"></vxe-column>
                    <vxe-column field="startTime" title="暂降发生时刻" width="200" sortable></vxe-column>
                    <vxe-column field="featureAmplitude" title="暂降(骤升)幅值(%)" width="160" sortable>
                        <template #default="{ row }">
                            {{ row.featureAmplitude.toFixed(2) }}
                        </template>
                    </vxe-column>
                    <vxe-column field="duration" title="持续时间(s)" sortable width="120"></vxe-column>
                    <vxe-column field="lineName" title="监测点" width="120"></vxe-column>
                    
                </vxe-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getNoDealEvents } from '@/api/event-boot/areaInfo'
import { getAreaOffDev } from '@/api/device-boot/device'
import router from '@/router'

const props = defineProps({
    params: {
        type: Object,
        default: () => ({})
    }
})
const tableData = ref([])
const tableData1 = ref([])
getNoDealEvents(props.params).then(res => {
    tableData.value = res.data
})
getAreaOffDev(props.params).then(res => {
    tableData1.value = res.data
})

const jump = () => {
    router.push({
        name: 'Advancedanalysis/eventcorrelation'
    })
}
</script>

<style lang="scss" scoped>
.overview-right {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    padding-bottom: 10px;

    .overview-right-item {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0 10px;
        flex-shrink: 0;
        overflow: hidden;

        .overview-right-item-title {
            background: #fff;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>
