<template>
    <home-container :customStyle="{ background: 'none', padding: '0' }">
        <view class="self-check-page">
            <!-- 标签页区域 -->
            <view class="tabs-section">
                <view v-for="(tab, index) in tabs" :key="index"
                    :class="['tab-item', { 'active': currentTab === tab.value }]" @click="switchTab(tab.value)">
                    <text class="tab-text">{{ tab.label }}</text>
                </view>
            </view>

            <!-- 卡片列表区域 -->
            <view class="cards-section">
                <view class="check-card" v-for="(item, index) in filteredItems" :key="index">
                    <view class="card-content">
                        <view class="card-row">
                            <text class="card-label">{{ item.name }}</text>
                            <text class="card-label">{{ item.serialNumber }}</text>
                            <text class="card-date">{{ item.date }}</text>
                        </view>
                        <view class="card-row-column" style="justify-content: flex-start;">
                            <view class="card-label">设备位置：{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{item.regionalName}}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</view>
                            <view class="card-role">定检小组：{{ item.role }}</view>
                        </view>
                    </view>
                    <view :class="['status-tag', getStatusClass(item.colorType)]">
                        {{ getStatusText(item.colorType) }}
                    </view>
                </view>
            </view>
        </view>
    </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import { getDeviceList } from "@/api/home-new/home-new";

export default {
    name: 'SelfCheckPage',
    components: {
        HomeContainer
    },
    data() {
        return {
            currentTab: 'all',
            tabs: [
                { label: '全部', value: 'all' },
                { label: '两周临期', value: 'twoWeeks' },
                { label: '一月临期', value: 'oneMonth' },
                { label: '已过期', value: 'expired' }
            ],
            allItems: [],
            redItems: [],
            orangeItems: [],
            yellowItems: []
        }
    },
    onLoad(options) {
        // 接收跳转参数
        if (options && options.tab) {
            this.currentTab = options.tab;
        }
        this.fetchDeviceList();
    },
    computed: {
        filteredItems() {
            switch (this.currentTab) {
                case 'all':
                    return this.allItems;
                case 'expired':
                    return this.redItems;
                case 'twoWeeks':
                    return this.orangeItems;
                case 'oneMonth':
                    return this.yellowItems;
                default:
                    return [];
            }
        }
    },
    methods: {
        switchTab(tabValue) {
            this.currentTab = tabValue;
            this.fetchDeviceList();
        },
        getStatusClass(colorType) {
            switch (colorType) {
                case 'RED':
                    return 'expired';
                case 'ORANGE':
                    return 'urgent';
                case 'YELLOW':
                    return 'normal';
                default:
                    return '';
            }
        },
        getStatusText(colorType) {
            switch (colorType) {
                case 'RED':
                    return '已过期';
                case 'ORANGE':
                    return '两周临期';
                case 'YELLOW':
                    return '一月临期';
                default:
                    return '';
            }
        },
        fetchDeviceList() {
            // 根据当前 tab 请求不同的接口
            let colorType = '';
            switch (this.currentTab) {
                case 'all':
                    colorType = 'MIXED';
                    break;
                case 'expired':
                    colorType = 'RED';
                    break;
                case 'twoWeeks':
                    colorType = 'ORANGE';
                    break;
                case 'oneMonth':
                    colorType = 'YELLOW';
                    break;
            }

            getDeviceList({ colorType }).then(res => {
                if (res.code === 200) {
                    const data = res.data || [];
                    switch (this.currentTab) {
                        case 'all':
                            this.allItems = data.map(item => this.formatDeviceItem(item));
                            break;
                        case 'expired':
                            this.redItems = data.map(item => this.formatDeviceItem(item));
                            break;
                        case 'twoWeeks':
                            this.orangeItems = data.map(item => this.formatDeviceItem(item));
                            break;
                        case 'oneMonth':
                            this.yellowItems = data.map(item => this.formatDeviceItem(item));
                            break;
                    }
                }
            }).catch(err => {
                console.error('获取设备列表失败', err);
            });
        },
        formatDeviceItem(item) {
            return {
                ...item,
                name: item.equipmentName || '空',
                serialNumber: item.equipmentCode || '空',
                location: item.installationLocation || '空',
                role: `${item.inspectionTeamLeaderName || ''}、${item.inspectionTeamMember1Name || ''}、${item.inspectionTeamMember2Name || ''}` || '空',
                date: this.formatDate(item.nextInspectionDueDate) || '空',
                colorType: item.colorType || 'YELLOW'
            };
        },
        formatDate(dateStr) {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
}
</script>

<style scoped>
.self-check-page {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
}

.tabs-section {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.tab-item {
    margin-right: 20px;
    padding: 5px 0;
    position: relative;
}

.tab-item:last-child {
    margin-right: 0;
}

.tab-text {
    font-size: 16px;
    color: #999;
}

.tab-item.active .tab-text {
    color: #409eff;
    font-weight: bold;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #409eff;
}

.cards-section {
    padding: 10px;
}

.check-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-row-column {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

.card-label {
    font-size: 14px;
    color: #333;
}

.card-date {
    font-size: 14px;
    color: #333;
}

.card-role {
    font-size: 14px;
    color: #333;
}

.status-tag {
    padding: 4px 12px;
    border-radius: 10px 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    margin: -12px -12px -12px 0;
    align-self: flex-end;
}

.status-tag.expired {
    background-color: #FF0000;
    color: #fff;
}

.status-tag.urgent {
    background-color: #FFA500;
    color: #fff;
}

.status-tag.normal {
    background-color: #FFD700;
    color: #333;
}
</style>
