<template>
    <view class="index-device">
        <view class="nav" :style="{ top: navTabHeight + 'px' }"> </view>
        <view class="content device project-list" :style="{ minHeight: minHeight }">
            <uni-swipe-action>
                <uni-swipe-action-item
                    v-for="(item, index) in store.data"
                    :threshold="0"
                    :right-options="item.isTop == 0 ? options1 : options12"
                    @click="bindClick($event, item)"
                >
                    <uni-card :key="index">
                        <view class="card-header">
                            <view class="project-icon">
                                <uni-icons
                                    custom-prefix="iconfont"
                                    type="icon-gongcheng"
                                    color="#2563eb"
                                    size="45"
                                ></uni-icons>
                            </view>
                            <view class="project-info">
                                <view class="project-name">{{ item.engineeringName }}</view>
                                <view class="project-stats">
                                    <view class="stat-item boxClick" @click="jump('nowEngineering', item)">
                                        <text class="stat-value blue">{{ item.devTotal }}</text>
                                        <text class="stat-label">设备总数</text>
                                    </view>
                                    <view class="stat-item boxClick" @click="jump('currentOnLineDevs', item)">
                                        <text class="stat-value green">{{ item.onlineDevTotal }}</text>
                                        <text class="stat-label">在线设备</text>
                                    </view>
                                    <view class="stat-item boxClick" @click="jump('currentOffLineDevs', item)">
                                        <text class="stat-value red">{{ item.offlineDevTotal }}</text>
                                        <text class="stat-label">离线设备</text>
                                    </view>
                                    <view class="stat-item boxClick" @click="jump('event', item)">
                                        <text class="stat-value red">{{ item.alarmTotal }}</text>
                                        <text class="stat-label">事件数量</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="pinToTop" v-if="item.isTop == 1"> 置顶 </view>
                    </uni-card>
                </uni-swipe-action-item>
            </uni-swipe-action>
            <uni-load-more
                v-if="store.status == 'loading' || deviceListFilter.length > 0"
                :status="store.status"
            ></uni-load-more>
            <Cn-empty v-else></Cn-empty>
        </view>
    </view>
</template>
<script>
import { engineeringPinToTop } from '@/common/api/device'
export default {
    props: {
        store: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            loading: false,
            minHeight: 0,
            navTabHeight: 0,
            userInfo: {},
            options1: [
                {
                    text: '置顶',
                    style: {
                        backgroundColor: '#376cf3',
                    },
                },
            ],
            options12: [
                {
                    text: '取消',
                    style: {
                        backgroundColor: '#ccc',
                    },
                },
            ],
        }
    },
    computed: {
        deviceListFilter() {
            let arr = this.store.data

            return arr
        },
    },
    created() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
    },
    mounted() {
        console.log(12333, this.store)
    },
    methods: {
        bindClick(e, item) {
            engineeringPinToTop({
                targetId: item.engineeringId,
                targetType: 2,
                userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
            }).then((res) => {
                if (res.code == 'A0000') {
                    this.$util.toast('操作成功!')
                    this.store.search()
                } else {
                    this.$util.toast(res.message)
                }
            })
        },

        getDeviceList() {
            this.store.params.pageSize = 50
            this.store.firstCallBack = (res) => {
                uni.createSelectorQuery()
                    .select('.uni-navbar')
                    .boundingClientRect((rect1) => {
                        if (!rect1) return
                        this.navTabHeight = rect1.height
                        uni.createSelectorQuery()
                            .select('.nav')
                            .boundingClientRect((rect2) => {
                                if (!rect2) return
                                // #ifdef H5
                                this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
                                // #endif
                                // #ifdef APP-PLUS
                                this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
                                console.log(this.minHeight)
                                // #endif
                            })
                            .exec()
                    })
                    .exec()
            }
            this.store.reload()
        },
        async init() {
            console.warn('init')
            this.getDeviceList()
        },

        jump(type, item) {
            if (type == 'event') {
                // 存储参数
                uni.setStorageSync('messageParams', {
        
                    engineeringName: item.engineeringName,
                    engineeringId: item.engineeringId, //工程ID
                    projectName: '',
                    projectId: '', //項目ID
                    deviceName: '',
                    deviceId: '', //设备ID
                    lineName: '',
                    lineId: '', //测点ID
                    type: '',
                })
                uni.switchTab({
                    url: '/pages/index/message1',
                })
            } else {
                uni.setStorageSync('engineering', { name: item.engineeringName, id: item.engineeringId })
                uni.navigateTo({
                    url: '/pages/device/list?type=' + type,
                })
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.index-device {
    /* 列表容器 */

    // .project-card {
    //     background-color: #ffffff;
    //     border-radius: 16rpx;
    //     margin-bottom: 16rpx;
    //     padding: 24rpx;
    //     box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    // }

    .card-header {
        display: flex;
        align-items: center;
    }

    .project-icon {
        width: 110rpx;
        height: 110rpx;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        background-color: #2563eb20;
    }

    .project-info {
        flex: 1;
        line-height: 36rpx;
    }

    .project-name {
        font-size: 28rpx;
        font-weight: 700;
        color: #333333;
        margin-bottom: 20rpx;
    }

    .project-stats {
        display: flex;
        // justify-content: space-between;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        border-right: 2rpx solid #ccc;
        &:last-child {
            border-right: none;
        }
    }

    .stat-value {
        font-size: 36rpx;
        font-weight: 700;
    }

    .stat-label {
        font-size: 26rpx;
        margin-top: 5rpx;
        // color: #666666;
    }

    .blue {
        color: #007aff;
    }

    .green {
        color: #34c759;
    }

    .red {
        color: #ff3b30;
    }

    .icon-star {
        color: #cccccc;
    }
}
/deep/ .uni-card {
    padding: 0 !important;
}
/deep/ .button-group--right {
    padding: 0 0 20rpx;
}
.pinToTop {
    background-color: $uni-theme-color;
    width: 100rpx;
    height: 60rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 20rpx;
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    position: absolute;
    top: 0;
    right: 0;

    /* 核心：旋转成斜三角效果 */
    transform: rotate(45deg) translate(50rpx, -10rpx);
    transform-origin: top right;
}
</style>
