<template>
    <view class="box">
        <view class="search-box">
            <view class="search-input">
                <view class="searchPicker">
                    <picker
                        mode="date"
                        :value="createTimeStart"
                        :start="startDate"
                        :end="endDate"
                        @change="bindDateChangeOne"
                    >
                        <view class="uni-input">{{
                            createTimeStart
                        }}</view> </picker
                    >-
                    <picker
                        mode="date"
                        :value="createTimeEnd"
                        :start="startDate"
                        :end="endDate"
                        @change="bindDateChangeTwo"
                    >
                        <view class="uni-input">{{ createTimeEnd }}</view>
                    </picker>
                </view>
            </view>
            <view class="search-btn" @click="searchBox()"> 搜索 </view>
        </view>

        <template v-if="alarmRetentionLists.length > 0">
            <view
                class="meauList"
                v-for="item in alarmRetentionLists"
                :key="item.devId"
            >
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>设备名称</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.devName }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>发生时间</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.createTime }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>事件类型</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ getEventTypeName(item.eventType) }}</text>
                    </view>
                </view>
                <!-- <view class="menu-item">
                    <view class="meanLeft">
                        <text>事件内容</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.info }}</text></view
                    >
                </view> -->
            </view>
        </template>
        <view style="height: 20rpx"></view>
        <alarModel v-if="isInitAlarm" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageNo: 1,
            pageSize: 10,
            devName: "",
            alarmRetentionLists: [],
            onReachJudge: true,
            warmTypeList: [],
            isInitAlarm: "",
            createTimeStart: "",
            createTimeEnd: "",
        };
    },
    computed: {
        startDate() {
            return this.getDate("start");
        },
        endDate() {
            return this.getDate("end");
        },
    },
    methods: {
        searchBox() {
            this.pageNo = 1;
            this.alarmRetentionLists = [];
            this.onReachJudge = true;
            this.getWarnList();
        },
        getWarnList() {
            if (!this.onReachJudge) return;
            uni.showLoading({
                title: "查询中...",
            });
            this.$http
                .post(
                    "wap/stats/alarmEventsQuery",
                    {
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        createTimeStart: this.createTimeStart,
                        createTimeEnd: this.createTimeEnd,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.data) {
                        if (res.data.data.rows.length > 0) {
                            this.alarmRetentionLists =
                                this.alarmRetentionLists.concat(
                                    res.data.data.rows
                                );
                        }
                        if (
                            this.alarmRetentionLists.length ==
                            res.data.data.total
                        ) {
                            console.log("没有更多数据了");
                            this.onReachJudge = false;
                        }
                    }
                    uni.hideLoading();
                });
        },
        getwarmType() {
            this.$http.get("wap/stats/queryEventType").then((res) => {
                if (res.data.data) {
                    this.warmTypeList = res.data.data;
                }
            });
        },
        getEventTypeName(eventType) {
            return (
                this.warmTypeList.find((item) => item.eventVal == eventType)
                    ?.eventDesc || "未知"
            );
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (type === "start") {
                year = year - 180;
            } else if (type === "end") {
                year = year + 180;
            }
            month = month > 9 ? month : "0" + month;
            day = day > 9 ? day : "0" + day;
            return `${year}-${month}-${day}`;
        },
        bindDateChangeOne(e) {
            this.createTimeStart = e.detail.value;
        },
        bindDateChangeTwo(e) {
            this.createTimeEnd = e.detail.value;
        },
    },
    onReachBottom() {
        this.pageNo += 1;
        this.getWarnList();
    },
    onPullDownRefresh() {
        this.pageNo = 1;
        this.alarmRetentionLists = [];
        this.getWarnList();
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    onShow() {
        this.onReachJudge = true;
        this.createTimeStart = this.$time(new Date());
        this.createTimeEnd = this.$time(new Date());
        Promise.all([this.getWarnList()]).then(() => {
            this.getwarmType();
        });
    },
    onLoad() {
        this.isInitAlarm = true;
    },
    onHide() {
        this.isInitAlarm = false;
    },
    onUnload() {
        this.isInitAlarm = false;
    },
};
</script>

<style lang="less" scoped>
// Main Styles
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    .search-box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80rpx;
        background: #fff;
        border-radius: 40rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .dropdown-wrapper {
            padding: 0 10rpx;
            width: 160rpx;
            height: 100%;
            display: flex;
            align-items: center;

            .picker-content {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #333;
            }
        }

        .search-input {
            flex: 1;
            height: 100%;
            padding: 0 20rpx;

            .searchPicker {
                display: flex;
                padding-top: 20rpx;
                justify-content: space-between;
                align-content: center;
            }
        }

        .search-btn {
            width: 120rpx;
            height: 60rpx;
            background: chocolate;
            color: white;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            margin-left: 10rpx;
        }
    }
    .meauList {
        width: 710rpx;
        margin: 18rpx auto;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 32rpx;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-of-type {
                border-bottom: none;
            }

            .meanLeft {
                flex: 1;
                color: #666;
                font-size: 28rpx;
                font-weight: 400;
            }

            .meanRight {
                flex: 1;
                text-align: right;
                color: #333;
                font-size: 28rpx;
                font-weight: 500;
                padding-left: 20rpx;
            }
        }

        .menu-bottom {
            display: flex;
            padding: 24rpx 32rpx;
            border-top: 1rpx solid #f0f0f0;

            .meanLeft,
            .meanRight {
                flex: 1;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                font-size: 30rpx;
                font-weight: 500;
                transition: all 0.2s;

                &:active {
                    opacity: 0.8;
                }
            }

            .meanLeft {
                background: #7b5245;
                color: white;
                margin-right: 16rpx;
            }

            .meanRight {
                background: fade(#ff4d4f, 10%);
                color: #ff4d4f;
                border: 1rpx solid fade(#ff4d4f, 30%);
            }
        }
    }
}
</style>
