<script setup>
import {onMounted, onUnmounted, ref} from 'vue';
import Taro from '@tarojs/taro';
// import deviceIcon from '../../assets/deviceIcon.png'
import TabBar from '../../components/TabBar.vue'
import {useFlightStore} from "../../stores";
import {storeToRefs} from "pinia";
// import { storeToRefs } from 'pinia';
// import { useSupervisionStore } from '../../stores';

Taro.hideHomeButton();

const { getRecordList } = useFlightStore();
// const { flightList, flightExtra, flightQueries } = storeToRefs(useFlightStore());

const list = ref([]);

let timer;
Taro.useDidShow(() => {
    timer = setInterval(() => {
        getList();
    }, 3000);
});

Taro.useDidHide(() => {
    if (timer) {
        clearInterval(timer);
    }
})

onMounted(() => {

});

onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
    }
});

getList();
function getList() {
    getRecordList().then(data => {
        list.value = [...data];
    }).catch(({ msg }) => {
        if (msg)  openToast('warn', msg);
    });
}

// 暂时注释掉原有的API调用代码
// const { getFieldList } = useSupervisionStore();
// const { fieldList } = storeToRefs(useSupervisionStore());

// Taro.useDidShow(() => {
//     // 使用虚拟数据，暂时注释掉API调用
//     // getFieldList().catch(err => {
//     //     Taro.showToast({
//     //         title: err?.description || '获取场地列表失败',
//     //         icon: 'none'
//     //     });
//     // });
// });

// function onRefresh() {
//     // 使用虚拟数据，暂时注释掉API调用
//     // return getFieldList().finally(() => {
//     //     Taro.stopPullDownRefresh();
//     // });
//     Taro.stopPullDownRefresh();
// }
//
// Taro.usePullDownRefresh(() => {
//     onRefresh();
// });

function onNavTo({ airfieldId, droneSn, recordId }) {
    Taro.navigateTo({
        url: `/pages/supervisionMap/index?airfieldId=${airfieldId}&droneSn=${droneSn}&recordId=${recordId}`,
    });
}
</script>

<template>
    <div :class="s.root">
        <div class="field-list">
            <div class="field-card" v-for="item in list" :key="item.recordId" @click="onNavTo(item)">
                <div class="field-image">
                    <img :src="'http://gcs-edu.obs.cn-east-2.myhuaweicloud.com/tmp/2025/05/tmp_1746237402612144307.png' || item.airfield.imageUrl" alt="场地图片" />
                    <div class="status-badge" :class="{ 'in-progress': true }">
                        {{ '进行中' }}
                    </div>
                </div>
                <div class="field-info">
                    <div class="student-info">
                        <div class="student-name">{{ item.className }}: {{ item.studentName }}</div>
                        <div class="teacher-name">指导教师：{{ item.teacherName }}</div>
                    </div>
                    <div class="field-name">
                        <span class="icon">📍</span>
                        {{ item.airfieldName }}
                    </div>
                    <div class="info-item">
                        <span class="label">飞机编号：</span>
                        <span class="value">{{ item.droneSn || '暂无' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">开始时间：</span>
                        <span class="value">{{ item.startTime }}</span>
                    </div>
                </div>
            </div>
        </div>

        <nut-empty v-if="!list.length" description="暂无数据" />

    </div>

    <TabBar />
</template>

<style lang="less" module="s">
.root {
    min-height: 100vh;
    background-color: #f2fbff;
    padding: 16px;
    box-sizing: border-box;

    :global {
        .field-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
            padding: 0;

            .field-card {
                background-color: #ffffff;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
                transition: all 0.3s ease;

                &:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
                }

                .field-image {
                    width: 100%;
                    height: 160px;
                    overflow: hidden;
                    background-color: #f0f0f0;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .status-badge {
                        position: absolute;
                        top: 12px;
                        right: 12px;
                        padding: 4px 12px;
                        border-radius: 12px;
                        font-size: 12px;
                        font-weight: 500;
                        color: #fff;
                        background-color: rgba(0, 0, 0, 0.6);

                        &.in-progress {
                            background-color: #1890ff;
                        }

                        &.passed {
                            background-color: #52c41a;
                        }

                        &.failed {
                            background-color: #ff4d4f;
                        }
                    }
                }

                .field-info {
                    padding: 12px;

                    .student-info {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 8px;

                        .student-name {
                            font-size: 16px;
                            font-weight: 600;
                            color: #1a1a1a;
                        }

                        .teacher-name {
                            font-size: 12px;
                            color: #666;
                            background-color: #f5f5f5;
                            padding: 2px 8px;
                            border-radius: 4px;
                        }
                    }

                    .field-name {
                        font-size: 14px;
                        color: #333;
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                        background-color: #f8f8f8;
                        padding: 6px 8px;
                        border-radius: 6px;

                        .icon {
                            margin-right: 4px;
                            font-size: 14px;
                        }
                    }

                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                        font-size: 13px;
                        line-height: 1.4;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .label {
                            color: #666;
                            margin-right: 8px;
                            flex-shrink: 0;
                            min-width: 70px;
                        }

                        .value {
                            color: #333;
                            flex: 1;
                        }
                    }
                }
                .basic-info {
                    background-color: #f8f8f8;
                    border-radius: 8px;
                    padding: 12px;
                    margin-bottom: 12px;

                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .label {
                            color: #666;
                            font-size: 13px;
                            margin-right: 8px;
                            flex-shrink: 0;
                            min-width: 70px;
                        }

                        .value {
                            color: #1a1a1a;
                            font-size: 13px;
                            flex: 1;
                        }
                    }
                }

                .error-info {
                    background-color: #fff2f0;
                    border-radius: 8px;
                    padding: 12px;

                    .error-title {
                        font-size: 14px;
                        font-weight: 500;
                        color: #ff4d4f;
                        margin-bottom: 8px;
                    }

                    .error-list {
                        .error-item {
                            padding: 8px;
                            background-color: rgba(255, 77, 79, 0.1);
                            border-radius: 4px;
                            margin-bottom: 8px;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .error-phase {
                                font-size: 13px;
                                font-weight: 500;
                                color: #ff4d4f;
                                margin-bottom: 4px;
                            }

                            .error-desc {
                                font-size: 12px;
                                color: #666;
                                margin-bottom: 4px;
                            }

                            .error-time {
                                font-size: 12px;
                                color: #999;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
