<template>
    <div class="farm-select-page">
        <BaseHeader name="切换农场" />
        <div class="farm-list">
            <div
                v-for="farm in farmList"
                :key="farm.id"
                class="farm-card"
                :class="{ active: isCurrentFarm(farm) }"
                @click="onSelectFarm(farm)"
            >
                <div class="farm-info">
                    <div class="farm-name">{{ farm.farmName }}</div>
                    <div class="farm-address">{{ farm.address }}</div>
                </div>
                <div class="farm-action">
                    <span v-if="isCurrentFarm(farm)" class="btn-current">当前农场</span>
                    <span v-else class="btn-set-default">设为默认农场</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BaseHeader from '@/components/BaseHeader.vue'

const DEFAULT_FARM_KEY = 'DEFAULT_FARM_ID'

const MOCK_FARMS = [
    {
        id: 766,
        farmName: '从化荔博园合作社',
        address: '广东省广州市从化区某某街道',
    },
    {
        id: 101532,
        farmName: '莞荔园',
        address: '广东省东莞市某某街道',
    },
    {
        id: 768,
        farmName: '从化荔博园合作社',
        address: '广东省广州市从化区某某街道',
    },
    {
        id: 769,
        farmName: '从化荔博园合作社',
        address: '广东省广州市从化区某某街道',
    },
]

const route = useRoute()
const router = useRouter()
const farmList = ref([])
const currentFarmId = ref(null)

function normalizeFarm(item) {
    const id = item.id ?? item.farmId
    const farmName = item.farmName || item.name || '农场名称'
    const address =
        item.address ||
        [item.province, item.city, item.district, item.street].filter(Boolean).join('') ||
        '暂无地址'
    return { id, farmName, address }
}

function isCurrentFarm(farm) {
    return String(farm.id) === String(currentFarmId.value)
}

function onSelectFarm(farm) {
    if (isCurrentFarm(farm)) return
    localStorage.setItem(DEFAULT_FARM_KEY, String(farm.id))
    router.replace({
        path: '/adopt_map',
        query: {
            ...route.query,
            farmId: farm.id,
        },
    })
}

async function fetchFarmList() {
    // try {
    //     const { data } = await VE_API.lj_home.farmList()
    //     const list = Array.isArray(data) ? data : data?.list || data?.records || []
    //     if (list.length) {
    //         farmList.value = list.map(normalizeFarm)
    //         return
    //     }
    // } catch (err) {
    //     console.warn('[farm-select] farmList 请求失败，使用本地数据', err)
    // }
    farmList.value = MOCK_FARMS
}

onMounted(async () => {
    currentFarmId.value = route.query.farmId || localStorage.getItem(DEFAULT_FARM_KEY) || 766
    await fetchFarmList()
})
</script>

<style scoped lang="less">
.farm-select-page {
    min-height: 100vh;
    background: #F2F3F5;
}

.farm-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.farm-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    box-sizing: border-box;

    &.active {
        border-color: #FFA617;

        .farm-name {
            color: #ffa617;
        }
    }

    .farm-info {
        flex: 1;
        min-width: 0;
    }

    .farm-name {
        font-size: 14px;
        color: #1D2129;
        line-height: 22px;
    }

    .farm-address {
        font-size: 12px;
        color: rgba(32, 32, 32, 0.4);
        line-height: 18px;
    }

    .farm-action {
        flex-shrink: 0;
    }

    .btn-current {
        display: inline-block;
        padding: 0 8px;
        background: #FFA617;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        height: 22px;
        text-align: center;
        line-height: 22px;
    }

    .btn-set-default {
        color: #ffa617;
        font-size: 12px;
        white-space: nowrap;
    }
}
</style>
