<template>
    <Cn-page :loading="loading">
        <view class="detail" slot="body">
            <view class="detail-content" style="font-size: 32rpx">
                <!-- <view class="detail-content-title mb20">发生时间</view> -->
                <view>{{ detail.date }}</view>
            </view>
            <view class="detail-content">
                <view class="detail-content-title mb20">终端告警列表</view>

                <uni-collapse accordion>
                    <uni-collapse-item :title="item.devName" v-for="item in list">
                        <template v-slot:title>
                            <view class="collapseTop">
                                <view class="mb5 name"> {{ item.devName }}</view>
                                <view class="mb5 frequency">
                                    <view class="mr20"> 告警次数: {{ item.warnCounts }} 次</view>
                                    <view> 通讯中断: {{ item.interruptCounts }} 次</view>
                                </view>
                            </view>
                        </template>

                        <view>
                            <view class="mb10 ml12 frequency">
                                <view>项目名称：{{ item.projectName }} </view></view
                            >
                            <view class="mb10 ml12 frequency">
                                <view>工程名称：{{ item.engineeringName }}</view></view
                            >

                            <view class="mb10 ml12 frequency">
                                <view>通讯信息：</view>
                                <view style="flex: 1">
                                    <view v-if="item.interruptCounts == 0">通讯正常</view>
                                    <view v-else>通讯中断{{ item.interruptCounts }}次，具体如下所示:</view
                                    ><view v-for="date in item.interruptDetails" class="mt15 textBox">{{
                                        date
                                    }}</view></view
                                ></view
                            >
                            <view class="mb10 ml12 frequency">
                                <view>告警信息：</view>
                                <view style="flex: 1">
                                    <view v-if="item.warnCounts == 0">暂无终端告警信息</view>
                                    <view v-else>终端告警{{ item.warnCounts }}次，具体如下所示:</view
                                    ><view v-for="val in item.warnDetails" class="mt15 textBox">
                                        {{ val.warnEventTime + '发生' + val.warnEventDesc }}
                                    </view></view
                                ></view
                            >
                        </view>
                    </uni-collapse-item>
                </uni-collapse>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { updateStatus, queryAlarmDetail } from '@/common/api/message'

export default {
    data() {
        return {
            loading: true,
            detail: {},
            limit: '',
            accordionVal: '1',

            list: [],
        }
    },
    onLoad(options) {
        this.loading = false
        this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
        this.init()
        if (this.detail.isRead != 1) {
            updateStatus({
                eventIds: [this.detail.eventId],
            })
        }
    },
    methods: {
        init() {
            this.loading = false
            queryAlarmDetail({
                devList: this.detail.devIds,
                time: this.detail.date,
            })
                .then((res) => {
                    this.list = res.data
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
    },
}
</script>
<style lang="scss">
.detail {
    padding: 20rpx 0;

    .detail-content {
        padding: 20rpx;
        background: #fff;
        margin-bottom: 20rpx;
        font-size: 28rpx;

        .detail-content-title {
            font-size: 32rpx;
            color: #111;
            font-weight: 700;
        }
    }
    .collapseTop {
        padding: 10rpx 0;
        margin-left: 15px;
        .name {
            font-size: 26rpx;
            font-weight: 700;
            color: #333333;
        }
    }
    .frequency {
        display: flex;
        font-size: 24rpx;
        // color: #666666;
    }
}
.textBox {
    border-bottom: 1px solid #eee;
}
</style>
