<!-- 农场详情 -->
<script setup lang="ts">
import RegisterDialog from './register-dialog.vue'
import * as turf from '@turf/turf'
import type { Page } from './config'
import Navigate from '@/utils/page/navigate'
import {
    addDefaultGeoJSONSource,
    addDefaultSplotLayer,
    addDefaultSymbolLayer,
    useMapbox,
    flyTo,
} from '@/components/Map/Mapbox/hook'
import { getText } from '@/utils/dict/area'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'

// 页面参数
const page = reactive<Page>({
    id: 'example-mapbox',
    init: false,
    requests: 0,
    latest: null,
    query: {},
})

const model = reactive({
    id: '',
    name: '',
    lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`,
    address: '',
    description: '',
    // 地块、位置信息 GeoJSON
    plots: [],
    // 设备信息
    devices: [],
    // 分类标签
    categoryTabs: [
        { id: null, name: '全部' },
        { id: 1, name: '种植' },
        { id: 2, name: '养殖' },
        { id: 3, name: '采摘' },
        { id: 4, name: '其他' },
    ],
    search: {
        pageNo: 1,
        pageSize: 10,
        publishstatu: 1,
        type: null,
        createBy: '',
    },
    employmentList: [],
    loading: false,
    total: 0,
    requestDebounce: null,
    // 用户当前位置
    userLocation: {
        longitude: uni.getStorageSync('location').lon,
        latitude: uni.getStorageSync('location').lat,
    },
    // 选中的用工信息
    selectedEmployment: null,
    showEmploymentPopup: false,
    searchText: '',
    // 标记点击事件是否已绑定
    clickEventBound: false,
})

onLoad((options) => {
    model.id = options.id
    model.name = decodeURIComponent(options.name)
    model.search.pageNo = 1
    model.search.publishstatu = 1
    model.search.createBy = ''
    model.employmentList = []
    getEmploymentList()
})

// 地图组件
const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat]
const registerDialogRef = ref()
const [registerMap, map] = useMapbox({
    style: { center, zoom: 12 },
    onLoaded: (data) => {
        // 渲染用户当前位置
        renderUserLocation()
    },
    onSourceRequestHandle: () => {
        page.requests--
        if (page.requests === 0) {
            Message.hideLoading()
        }
    },
    onSourceRequestErrorHandle: () => {
        Message.hideLoading()
    },
    onMapEvent: (event) => {
        // 处理来自 renderjs 层的自定义事件
        if (event.type === 'custom' && event.name === 'navigateToDetail') {
            console.log('接收到导航事件，id:', event)
            registerDialogRef.value.open({ id: event.data })
            // Navigate.to(`/pages/linghuoyonggong/detail/index?id=${event.data}`)
        }
    },
})

// 创建弹框HTML内容
function createPopupHTML(employment) {
    if (!employment) return ''

    const distance = getDistanceText(employment)
    const stars = getStarsHTML(employment)
    console.log('employment', employment)
    return `
        <div style="
            max-width: 280px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        ">
            <div style="display: flex; gap: 6px; margin-bottom: 12px;">
                <!-- 左侧图标 -->
                <div style="
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                ">
                   <img src="${employment.picture}" style="width: 48px; height: 48px; border-radius: 50%;" />
                </div>
                
                <!-- 右侧内容 -->
                <div style="flex: 1; min-width: 0;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                        <div style="
                            font-size: 16px;
                            font-weight: 600;
                            color: #333333;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            flex: 1;
                        ">${employment.name}</div>
                        <div style="
                            background: #E8F5E9;
                            color: #4CAF50;
                            padding: 2px 8px;
                            border-radius: 12px;
                            font-size: 12px;
                            white-space: nowrap;
                            margin-left: 8px;
                        ">📍 ${distance}</div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; font-size: 13px; color: #666666; margin-bottom: 8px;">
                        <span>⏱ 时长${
                            employment.daysDiff || getDaysDiff(employment.starttime, employment.estimatedendtime)
                        }天</span>
                        <span>👥 需${employment.workers || 0}人</span>
                        <span>💰 ${employment.price || 0}元/天</span>
                    </div>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div style="display: flex; align-items: center; gap: 4px;">
                    ${stars.html}
                    <span style="font-size: 13px; color: #666666; margin-left: 4px;">${stars.rating}</span>
                </div>
                <a href="#" onclick="window.navigateToDetail('${employment.id}'); return false;" style="
                    display: inline-block;
                    padding: 6px 20px;
                    background: linear-gradient(135deg, #5DB66F 0%, #4CAF50 100%);
                    color: white;
                    text-decoration: none;
                    border-radius: 16px;
                    font-size: 14px;
                    font-weight: 500;
                    outline: none;
                    border: none;
                    transition: opacity 0.2s;">
                    我想去
                </a>
            </div>
        </div>
    `
}

// 渲染用户位置
function renderUserLocation() {
    const markerId = `my-local`
    // 修复 App 端图片路径问题
    const imageUrl = '/static/images/local-map.png'
    let finalImageUrl = imageUrl

    // #ifdef APP-PLUS
    // 在 App 端使用绝对路径
    finalImageUrl = `./static/images/local-map.png`
    // #endif

    const iconSize: [number, number] = [40, 40] // 图标大小

    // 使用 addMarker 添加到地图，带上 popup 和自定义图标
    map.addMarker(
        markerId,
        [model.userLocation.longitude, model.userLocation.latitude],
        '',
        false, // 不默认打开
        finalImageUrl, // 自定义图标图片URL
        iconSize, // 图标大小
    )
}

// 渲染用工标记
function renderEmploymentMarkers() {
    if (!map) {
        console.warn('地图未初始化')
        return
    }

    console.log('渲染用工标记数量:', model.employmentList.length)
    console.log('用工数据:', model.employmentList)

    // 使用 Marker 方式渲染带自定义图标的标记
    model.employmentList.forEach((item) => {
        if (item.longitude && item.latitude) {
            const markerId = `employment-marker-${item.id}`
            let imageUrl = item.picture || '/static/images/linghuoyonggong/default-icon.png'
            const iconSize: [number, number] = [40, 40] // 图标大小

            // #ifdef APP-PLUS
            // 处理 App 端图片路径
            if (imageUrl.startsWith('/static/')) {
                imageUrl = `.${imageUrl}`
            }
            // #endif

            // 使用 addMarker 添加到地图，带上 popup 和自定义图标
            map.addMarker(
                markerId,
                [item.longitude, item.latitude],
                createPopupHTML(item),
                false, // 不默认打开
                imageUrl, // 自定义图标图片URL
                iconSize, // 图标大小
            )
        }
    })

    // 绑定点击事件标记
    if (!model.clickEventBound) {
        console.log('标记点击事件已绑定')
        model.clickEventBound = true
    }
}
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
    model.search.type = tab.id
    model.search.pageNo = 1
    model.employmentList = []
    getEmploymentList()
    // 在这里添加具体的分类标签点击逻辑
}

function getEmploymentList() {
    // 如果正在加载或没有更多数据，直接返回
    if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) {
        return
    }
    model.loading = true
    try {
        LinghuoyonggongAPI.employmentList(model.search).then(async (res) => {
            const { records, total } = res
            // 批量处理数据，避免多次DOM操作
            const processedRecords = records.map((item) => {
                // 缓存区域处理结果
                item.area = getText(item.area, ' / ')

                // 计算天数并缓存结果
                if (item.starttime && item.estimatedendtime) {
                    item.daysDiff = getDaysDiff(item.starttime, item.estimatedendtime)
                }

                return item
            })

            // 一次性更新数据，避免多次响应式更新
            if (model.search.pageNo === 1) {
                model.employmentList = processedRecords
            } else {
                // 避免重复数据加载
                const existingIds = new Set(model.employmentList.map((item) => item.id))
                const newRecords = processedRecords.filter((item) => !existingIds.has(item.id))
                model.employmentList = [...model.employmentList, ...newRecords]
            }

            model.total = total

            // 数据加载完成后渲染地图标记
            nextTick(() => {
                renderEmploymentMarkers()
            })
        })
    } catch (error) {
        console.error('获取用工列表失败:', error)
        // 这里可以添加用户友好的错误提示
        // uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
    } finally {
        model.loading = false
        model.requestDebounce = null
    }
}

// 获取时间差
function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
    // 将输入转换为Date对象
    const d1 = new Date(date1)
    const d2 = new Date(date2)

    // 检查日期是否有效
    if (Number.isNaN(d1.getTime()) || Number.isNaN(d2.getTime())) {
        throw new TypeError('无效的日期格式')
    }

    // 设置时间部分为00:00:00，只比较日期部分
    d1.setHours(0, 0, 0, 0)
    d2.setHours(0, 0, 0, 0)

    // 计算两个日期之间的毫秒差
    const diffTime = Math.abs(d2.getTime() - d1.getTime())

    // 转换为天数
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

    return diffDays
}

// 回到当前位置
function backToUserLocation() {
    if (map && model.userLocation.longitude && model.userLocation.latitude) {
        flyTo(map, [model.userLocation.longitude, model.userLocation.latitude], 15, 0.5)
        uni.showToast({
            title: '已回到当前位置',
            icon: 'none',
            duration: 1500,
        })
    } else {
        // 重新获取用户位置
        uni.getLocation({
            type: 'wgs84',
            success: (res) => {
                if (res.longitude !== 0 && res.latitude !== 0) {
                    model.userLocation.longitude = res.longitude
                    model.userLocation.latitude = res.latitude

                    // 更新缓存位置
                    uni.setStorageSync('location', {
                        lon: res.longitude,
                        lat: res.latitude,
                    })

                    // 飞到用户位置
                    flyTo(map, [res.longitude, res.latitude], 15, 0.5)

                    uni.showToast({
                        title: '已获取并回到当前位置',
                        icon: 'none',
                        duration: 1500,
                    })
                }
            },
            fail: (err) => {
                console.error('获取位置失败:', err)
                uni.showToast({
                    title: '获取位置失败，请检查定位权限',
                    icon: 'none',
                    duration: 2000,
                })
            },
        })
    }
}

// 关闭弹框
function closeEmploymentPopup() {
    model.showEmploymentPopup = false
    model.selectedEmployment = null
}

// 计算距离显示
function getDistanceText(employment) {
    if (!employment || !employment.longitude || !employment.latitude) {
        return '未知'
    }

    // 使用turf计算距离
    const from = turf.point([model.userLocation.longitude, model.userLocation.latitude])
    const to = turf.point([employment.longitude, employment.latitude])
    const distance = turf.distance(from, to, { units: 'kilometers' })

    if (distance < 1) {
        return `${Math.round(distance * 1000)}m`
    }
    return `${distance.toFixed(1)}km`
}

// 生成星级HTML
function getStarsHTML(employment) {
    // 获取紧急程度，默认为0
    const urgentdegree = Number(employment.urgentdegree) || 0
    // 确保评级在0-5之间
    const rating = Math.max(0, Math.min(5, urgentdegree))
    
    let html = ''
    for (let i = 1; i <= 5; i++) {
        if (i <= rating) {
            html += '<span style="color: #FF9800; font-size: 16px;">★</span>'
        } else {
            html += '<span style="color: #E0E0E0; font-size: 16px;">★</span>'
        }
    }
    
    return {
        html,
        rating
    }
}
// 发布用工
function handlePublish() {
    Navigate.to('/pages/linghuoyonggong/form')
}
onNavigationBarButtonTap((e) => {
    console.log(e)
    if (e.index === 0) {
        Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
    }
})
</script>

<template>
    <view class="page h-95_dl_5vh bg-#E6F5E8 flex flex-col justify-between">
        <view class="h-200rpx p-3">
            <view class="w-full h-60rpx border-rd-3xl!">
                <fui-input
                    :bottomLeft="0"
                    class="w-full h-full border-rd-3xl!"
                    borderTop
                    placeholder="请输入搜索内容"
                    placeholderStyle="color: #CCCCCC; font-weight: 400; font-family: PingFangSC-Regular;"
                    v-model="model.searchText"
                >
                    <template #left>
                        <view class="fui-left__icon">
                            <fui-icon name="search" color="#CCCCCC" :size="36" />
                        </view>
                    </template>
                </fui-input>
            </view>
            <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
                <view
                    v-for="tab in model.categoryTabs"
                    :key="tab.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center"
                    :class="[tab.id === model.search.type ? 'text-wrapper' : 'text-wrapper_2']"
                    @click="onCategoryTabClick(tab)"
                >
                    <text class="font_2 text_2">
                        {{ tab.name }}
                    </text>
                </view>
            </view>
        </view>
        <!-- 地图组件 -->
        <!-- <view class="h-730 overflow-hidden map-box"> -->
        <view class="overflow-hidden map-box" style="height: calc(100vh - 200rpx)">
            <!-- 地图组件 -->
            <Mapbox @register="registerMap" />

            <!-- 回到当前位置按钮 -->
            <view class="location-control" @click="backToUserLocation">
                <view class="location-button">
                    <image src="/static/images/toLocal.png" style="width: 58rpx; height: 58rpx"></image>
                    <!-- <fui-icon name="location" color="#5DB66F" :size="36" /> -->
                </view>
            </view>
        </view>
        <fui-fab position="right" distance="30" bottom="240" width="96" @click="handlePublish">
            <view class="text-white text-center">
                <view class="fab-icon" />
                <view style="font-size: 24rpx">发布</view>
            </view>
        </fui-fab>
        <RegisterDialog ref="registerDialogRef" />
    </view>
</template>

<style lang="scss" scoped>
//
.page {
    min-height: 100vh;
    background: #e6f5e8;

    .map-box {
        // #ifdef APP-PLUS
        position: relative;
        top: 0;
        // #endif
        // #ifdef H5
        position: relative;
        top: 0;
        // #endif
        width: 690rpx;
        left: 30rpx;
        border-radius: 20rpx;
        background: #e6f5e8;
    }

    .group_2 {
        .text-wrapper {
            flex: 1 1 120rpx;
            background-color: #5db66f;
            border-radius: 19998rpx;
            line-height: 60rpx;
            height: 60rpx;

            .text_2 {
                color: #ffffff;
            }
        }

        .text-wrapper_2 {
            flex: 1 1 120rpx;
            line-height: 60rpx;
            background-color: #ffffff;
            border-radius: 19998rpx;
            height: 60rpx;

            .text_3 {
                line-height: 25.88rpx;
            }

            .text_4 {
                line-height: 26.16rpx;
            }

            .text_5 {
                line-height: 25.96rpx;
            }

            .text_6 {
                line-height: 25.68rpx;
            }
        }
    }

    // 回到当前位置控制按钮样式
    .location-control {
        position: absolute;
        bottom: 100rpx;
        right: 10rpx;
        z-index: 1000;

        .location-button {
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 80rpx;
            // height: 80rpx;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10rpx);
            // border: 2rpx solid #5db66f;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.95);
                background: linear-gradient(135deg, #5db66f 0%, #4caf50 100%);

                :deep(.fui-icon) {
                    color: #ffffff !important;
                }
            }

            &:hover {
                transform: scale(1.05);
                box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
            }
        }
    }
}
::v-deep .mapboxgl-popup {
    max-width: 568rpx !important;
}
::v-deep .fui-fab__btn-main {
    background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
    box-shadow: 0px 1px 8px #5db66f;
}
::v-deep .mapboxgl-popup a {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}
</style>
