<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
    import ApplyDialog from './components/apply-dialog.vue'

    import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
    import Navigate from '@/utils/page/navigate'

    onLoad((option) => {
        pageData.search.serviceType = Number(option.type) || 1
    })

    onShow(() => {
        pageData.search.pageNo = 1
        pageData.farmMachineList = []
        getFarmMachineList()
        getCascader()
    })

    const options = ref([])
    const pageData = reactive({
        loading: false,
        // 分类标签
        categoryTabs: [
            { id: 1, name: '找农机' },
            { id: 2, name: '干农活' },
        ],
        search: {
            pageNo: 1,
            pageSize: 10,
            serviceType: 1,
        },
        farmMachineList: [],
        total: 0,
    })

    function getFarmMachineList() {
        pageData.loading = true
        NongjifuwuAPI.farmMachineList(pageData.search)
            .then((res) => {
                const { records, total } = res
                pageData.farmMachineList = [...pageData.farmMachineList, ...records]
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }

    function getCascader() {
        NongjifuwuAPI.cascaderHn().then((res) => {
            options.value = res[0].children;
        })
    }

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        console.log('点击分类标签:', tab)
        pageData.search.serviceType = tab.id
        // 在这里添加具体的分类标签点击逻辑
        pageData.search.pageNo = 1
        pageData.farmMachineList = []
        getFarmMachineList()
    }

    function handlePublish() {
        if (pageData.search.serviceType === 1) {
            Navigate.to(`/pages/nongjifuwu/machine-form?type=${pageData.search.serviceType}`)
        }
        if (pageData.search.serviceType === 2) {
            Navigate.to(`/pages/nongjifuwu/farm-form?type=${pageData.search.serviceType}`)
        }
    }
    // 查看详情
    function handleDetails(item: any) {
        if (pageData.search.serviceType === 1) {
            Navigate.to(`/pages/nongjifuwu/machine-form?id=${item.id}&&type=${pageData.search.serviceType}`)
        }
        if (pageData.search.serviceType === 2) {
            Navigate.to(`/pages/nongjifuwu/farm-form?id=${item.id}&&type=${pageData.search.serviceType}`)
        }
    }
    // 我有需要
    const applyDialogRef = ref()
    function handleApply(item: any) {
        applyDialogRef.value.open(item)
    }

    function getScope(scope: any) {
        if (!scope || !options.value || options.value.length === 0) {
            return []
        }

        const values = scope.split(',')
        const labels = []

        // 递归查找label
        const findLabel = (nodes, value) => {
            for (const node of nodes) {
                if (node.value === value) {
                    return node.label
                }
                if (node.children && node.children.length > 0) {
                    const found = findLabel(node.children, value)
                    if (found) {
                        return found
                    }
                }
            }
            return null // 如果没找到，返回原始value
        }

        for (const value of values) {
            const label = findLabel(options.value, value.trim())
            labels.push(label)
        }

        return labels.join(' / ')
    }

    onReachBottom(() => {
        console.log('触底了')
        if (pageData.total <= pageData.farmMachineList.length) return
        pageData.search.pageNo++
        getFarmMachineList()
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group_2">
            <view class="codefun-flex-row codefun-justify-between section_2">
                <text class="font_2 text_2">服务区域</text>
                <view class="codefun-flex-row codefun-items-center">
                    <text class="font_2 text_3">选择市县乡镇</text>
                    <image
                        class="codefun-shrink-0 image_7 codefun-ml-4"
                        src="/static/images/codefun/774cfe989f8417dc655fb301635f5893.png"
                    />
                </view>
            </view>
            <view class="codefun-flex-row section_3">
                <view
                    v-for="item in pageData.categoryTabs"
                    :key="item.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
                    :class="item.id === pageData.search.serviceType ? 'text-wrapper' : ''"
                    @click="onCategoryTabClick(item)"
                >
                    <text class="font_2" :class="item.id === pageData.search.serviceType ? 'text_4' : 'text_5'">{{
                        item.name
                    }}</text>
                </view>
            </view>
            <view
                v-if="!pageData.farmMachineList || pageData.farmMachineList.length == 0"
                class="codefun-flex-col codefun-relative section_4"
                style="height: 700rpx"
            >
                <fui-empty marginTop="100" src="/src/static/images/no-data.png" title="暂无数据" />
            </view>
            <view class="codefun-flex-col codefun-relative section_4">
                <view class="codefun-flex-row group_6" v-for="item in pageData.farmMachineList" :key="item.id">
                    <image
                        class="codefun-shrink-0 codefun-self-center image_8"
                        :src="item.picture"
                        @click="handleDetails(item)"
                    />
                    <view style="width: 70%">
                        <view
                            class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center"
                            @click="handleDetails(item)"
                        >
                            <text class="font text_6">{{ item.name }}</text>
                            <text class="font_3 text_7 ellipsis" style="width: 100%; margin: 26rpx 0"
                                >服务范围：{{ getScope(item.scope) }}</text
                            >
                        </view>
                        <view class="flex justify-between" style="width: 100%">
                            <view class="group_5" @click="handleDetails(item)">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_8">{{ item.price }}</text>
                                <text class="font_7">/亩</text>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2"
                                @click="handleApply(item)"
                            >
                                <text class="font_5">我有需要</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- <view class="codefun-flex-row group_6">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/e3f873f79cdddaee3655c048852302e3.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font text_9">小麦播种机</text>
                            <text class="font_3 text_10">服务范围：全市各区县</text>
                            <view class="group_7">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_11">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_2 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view>
                <view class="codefun-flex-row group_8">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/da314c458ad5d6714cfe7ee8524ccd9c.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font text_12">多功能拖拉机</text>
                            <text class="font_3 text_13">服务范围：全市各区县</text>
                            <view class="group_9">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_14">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_3 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view> -->
                <!-- <view class="codefun-flex-col codefun-justify-start codefun-relative section_5">
                    <view class="codefun-shrink-0 section_6" />
                    <text class="font_8 text_15 pos_4">夏收专享：收割机服务8折优惠</text>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 pos_3">
                        <text class="font_2 text_16">立即预约</text>
                    </view>
                </view> -->
                <!-- <view class="codefun-flex-row group_10">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/3500502108a998fe7f49363a276af806.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font">水稻插秧机</text>
                            <text class="font_3 text_17">服务范围：全市各区县</text>
                            <view class="group_11">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_18">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_4 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view> -->
            </view>
            <!-- <view class="codefun-flex-col section_7">
                <view class="grid">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
                        <text class="font_3 text_19">农机类型</text>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_2">
                        <view class="codefun-flex-row codefun-items-center">
                            <image
                                class="codefun-shrink-0 image_9"
                                src="/static/images/codefun/bf7b1672e65ba021aa79827f30014280.png"
                            />
                            <text class="font_3 text_20 codefun-ml-8">作业地点</text>
                        </view>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_4">
                        <view class="codefun-flex-row codefun-items-center">
                            <image
                                class="codefun-shrink-0 image_11"
                                src="/static/images/codefun/206576465476f031295c48dcef261286.png"
                            />
                            <text class="font_3 text_21 codefun-ml-4">作业时间</text>
                        </view>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-items-center grid-item_4">
                        <image class="image_12" src="/static/images/codefun/43220b5bebf6a41ff3f05e6ec94ce9f0.png" />
                        <text class="font_3 text_22 codefun-ml-4">联系方式</text>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-12">
                    <view class="codefun-flex-row codefun-items-center grid-item group_12">
                        <image class="image_13" src="/static/images/codefun/a83082710831140b897349a7f3bd46d9.png" />
                        <text class="font_3 text_23 codefun-ml-8">简要说明作业需求</text>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-mt-12"
                    >
                        <text class="font_8 text_24">发布需求</text>
                    </view>
                </view>
            </view> -->
        </view>
    </view>
    <fui-fab position="right" distance="10" 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>

    <ApplyDialog ref="applyDialogRef" />
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style scoped lang="scss">
    .page {
        padding-bottom: 12rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        .section {
            padding: 24rpx 24rpx 24rpx 32rpx;
            background-color: #5db66f;
            mix-blend-mode: NOTTHROUGH;
            .image {
                border-radius: 64rpx;
                width: 108rpx;
                height: 42rpx;
            }
            .image_2 {
                mix-blend-mode: NOTTHROUGH;
                width: 34rpx;
                height: 22rpx;
            }
            .image_3 {
                mix-blend-mode: NOTTHROUGH;
                width: 30rpx;
                height: 22rpx;
            }
            .image_4 {
                width: 48rpx;
                height: 22rpx;
            }
            .group {
                padding: 8rpx 0;
                .image_6 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 14rpx;
                    height: 26rpx;
                }
                .pos_2 {
                    position: absolute;
                    left: 6rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .text {
                    color: #ffffffe6;
                    line-height: 29.5rpx;
                }
                .image_5 {
                    width: 44rpx;
                    height: 44rpx;
                }
                .pos {
                    position: absolute;
                    right: 0.66rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
        .group_2 {
            padding: 16rpx 24rpx;
            height: 1598rpx;
            .section_2 {
                padding: 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .text_2 {
                    line-height: 25.82rpx;
                }
                .text_3 {
                    color: #999999;
                    line-height: 26.04rpx;
                }
                .image_7 {
                    width: 22rpx;
                    height: 12rpx;
                }
            }
            .section_3 {
                margin-top: 24rpx;
                padding-bottom: 8rpx;
                background-color: #ffffff66;
                border-radius: 32rpx;
                border: solid 2rpx #ffffffcc;
                .text-50p {
                    width: 50%;
                    height: 122rpx;
                    padding: 0.75rem 0 1.625rem;
                }
                .text-wrapper {
                    padding: 24rpx 0 56rpx;
                    background-color: #ffffff;
                    border-radius: 32rpx;
                    .text_4 {
                        line-height: 26.02rpx;
                    }
                }
                .text_5 {
                    color: #5db66f;
                    line-height: 25.82rpx;
                }
            }
            .font_2 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #333333;
            }
            .section_4 {
                margin-top: -48rpx;
                padding: 0 16rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_6 {
                    padding: 24rpx 8rpx;
                    border-bottom: solid 2rpx #eeeeee;
                    .group_4 {
                        margin-left: 24rpx;
                        .text_6 {
                            line-height: 30.18rpx;
                        }
                        .text_7 {
                            margin-top: 24rpx;
                            line-height: 22.42rpx;
                        }
                        .group_5 {
                            margin-top: 40rpx;
                            line-height: 24.6rpx;
                            .text_8 {
                                line-height: 24.44rpx;
                            }
                        }
                    }
                    .view {
                        margin-top: 112rpx;
                    }
                    .text_9 {
                        line-height: 29.72rpx;
                    }
                    .text_10 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_7 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_11 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_2 {
                        margin-top: 116rpx;
                    }
                }
                .group_8 {
                    padding: 24rpx 8rpx;
                    .text_12 {
                        line-height: 30.12rpx;
                    }
                    .text_13 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_9 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_14 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_3 {
                        margin-top: 116rpx;
                    }
                }
                .image_8 {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }
                .font_6 {
                    font-size: 24rpx;
                    line-height: 17.3rpx;
                    font-weight: 700;
                    color: #f2130d;
                }
                .font_4 {
                    font-size: 32rpx;
                    line-height: 24.6rpx;
                    color: #f2130d;
                }
                .font_7 {
                    font-size: 24rpx;
                    line-height: 24.6rpx;
                    color: #999999;
                }
                .text-wrapper_2 {
                    padding: 16rpx 0;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .font_5 {
                        font-size: 24rpx;
                        line-height: 18rpx;
                        color: #ffffff;
                    }
                }
                .section_5 {
                    margin-right: 4rpx;
                    overflow: hidden;
                    border-radius: 16rpx;
                    background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                    border-top: solid 2rpx #eeeeee;
                    .section_6 {
                        background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                        height: 96rpx;
                    }
                    .text_15 {
                        line-height: 26.02rpx;
                    }
                    .pos_4 {
                        position: absolute;
                        left: 30.26rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .text-wrapper_3 {
                        padding: 8rpx 0;
                        background-color: #ffffff;
                        border-radius: 12rpx;
                        width: 146.14rpx;
                        .text_16 {
                            color: #2e7d32;
                            line-height: 25.92rpx;
                        }
                    }
                    .pos_3 {
                        position: absolute;
                        right: 29.24rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .group_10 {
                    padding: 32rpx 8rpx 16rpx;
                    .text_17 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_11 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_18 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_4 {
                        margin-top: 112rpx;
                    }
                }
            }
            .section_7 {
                margin-top: 24rpx;
                padding: 32rpx 8rpx 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .grid {
                    margin-right: 16rpx;
                    height: 160rpx;
                    display: grid;
                    grid-template-rows: repeat(2, minmax(0, 1fr));
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    row-gap: 26rpx;
                    column-gap: 20rpx;
                    .grid-item_2 {
                        padding: 16rpx 24rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_9 {
                            width: 20rpx;
                            height: 28rpx;
                        }
                        .text_20 {
                            line-height: 22.06rpx;
                        }
                    }
                    .image_10 {
                        width: 16rpx;
                        height: 10rpx;
                    }
                    .grid-item_4 {
                        padding: 16rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_11 {
                            width: 28rpx;
                            height: 29rpx;
                        }
                        .text_21 {
                            line-height: 21.98rpx;
                        }
                        .image_12 {
                            width: 28rpx;
                            height: 28rpx;
                        }
                        .text_22 {
                            line-height: 22.42rpx;
                        }
                    }
                }
                .grid-item {
                    padding: 24rpx 16rpx;
                    border-radius: 12rpx;
                    border: solid 2rpx #eeeeee;
                    .text_19 {
                        line-height: 22.12rpx;
                    }
                    .image_13 {
                        width: 25rpx;
                        height: 25rpx;
                    }
                    .text_23 {
                        color: #999999;
                        line-height: 22.32rpx;
                    }
                }
                .group_12 {
                    margin-right: 16rpx;
                }
                .text-wrapper_4 {
                    margin-left: 8rpx;
                    padding: 24rpx 0;
                    background-color: #ff9800;
                    border-radius: 200rpx;
                    .text_24 {
                        line-height: 25.96rpx;
                    }
                }
            }
            .font_3 {
                font-size: 24rpx;
                line-height: 22.16rpx;
                color: #555555;
            }
            .font_8 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #ffffff;
            }
        }
        .font {
            font-size: 32rpx;
            line-height: 29.8rpx;
            color: #333333;
        }
    }

    ::v-deep .fui-fab__btn-main {
        background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
        box-shadow: 0px 1px 8px #5db66f;
    }
</style>
