<script setup lang="ts">
    import { reactive } from 'vue'

    // 页面数据
    const pageData = reactive({
        // 分类标签
        categoryTabs: [
            { id: 1, name: '全部' },
            { id: 2, name: '种植' },
            { id: 3, name: '养殖' },
            { id: 4, name: '采摘' },
            { id: 5, name: '其他' },
        ],

        // 用工类型标签
        employmentTabs: [
            { id: 1, name: '推荐用工' },
            { id: 2, name: '我的用工' },
        ],

        // 用工列表
        employmentList: [
            {
                id: 1,
                image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
                title: '蔬菜种植',
                duration: '预计3天',
                people: '需要5人',
                price: '150元/天',
                distance: '3.2km',
                rating: '4',
                actionText: '我想去',
                icons: {
                    duration:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
                    people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
                    price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
                    location:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
                },
            },
            {
                id: 2,
                image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
                title: '果树修剪',
                duration: '预计5天',
                people: '需要3人',
                price: '180元/天',
                distance: '2.1km',
                rating: '5',
                actionText: '我想去',
                icons: {
                    duration:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
                    people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
                    price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
                    location:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
                },
            },
            {
                id: 3,
                image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
                title: '水稻插秧',
                duration: '预计7天',
                people: '需要8人',
                price: '120元/天',
                distance: '5.6km',
                rating: '3',
                actionText: '我想去',
                icons: {
                    duration:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
                    people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
                    price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
                    location:
                        'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
                },
            },
        ],

        // 底部图片
        bottomImage:
            'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=da7c9ea8588c4314497b9c7ce7d4e632.png',
    })

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        console.log('点击分类标签:', tab)
        // 在这里添加具体的分类标签点击逻辑
    }

    // 用工类型标签点击事件
    function onEmploymentTabClick(tab: any) {
        console.log('点击用工类型标签:', tab)
        // 在这里添加具体的用工类型标签点击逻辑
    }

    // 用工项点击事件
    function onEmploymentItemClick(item: any) {
        console.log('点击用工项:', item)
        // 在这里添加具体的用工项点击逻辑
    }

    // "我想去"按钮点击事件
    function onActionButtonClick(item: any) {
        console.log('点击"我想去"按钮:', item)
        // 在这里添加具体的"我想去"按钮点击逻辑
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col codefun-self-stretch">
            <view class="codefun-mt-14 codefun-flex-row group_2">
                <view
                    v-for="tab in pageData.categoryTabs"
                    :key="tab.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center"
                    :class="[tab.id === 1 ? 'text-wrapper' : 'text-wrapper_2', tab.id > 1 ? 'codefun-ml-12' : '']"
                    @click="onCategoryTabClick(tab)"
                >
                    <text class="font_2" :class="[`text_${tab.id + 1}`]">
                        {{ tab.name }}
                    </text>
                </view>
            </view>
            <view class="codefun-mt-14 codefun-flex-col group_3">
                <view class="codefun-flex-row section_2">
                    <view
                        v-for="tab in pageData.employmentTabs"
                        :key="tab.id"
                        class="codefun-flex-col codefun-justify-start codefun-items-center"
                        :class="[
                            tab.id === 1 ? 'text-wrapper_3' : '',
                            tab.id > 1 ? 'codefun-self-start' : '',
                            tab.id > 1 ? 'ml-55' : '',
                        ]"
                        @click="onEmploymentTabClick(tab)"
                    >
                        <text class="font_2" :class="[`text_${tab.id + 6}`]">
                            {{ tab.name }}
                        </text>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-relative list">
                    <view
                        class="codefun-flex-col list-item"
                        v-for="item in pageData.employmentList"
                        :key="item.id"
                        @click="onEmploymentItemClick(item)"
                    >
                        <view class="codefun-flex-row">
                            <image class="image_7" :src="item.image" />
                            <view class="codefun-flex-col codefun-flex-1 codefun-self-center group_4">
                                <text class="codefun-self-start font">{{ item.title }}</text>
                                <view
                                    class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-11"
                                >
                                    <image class="image_9" :src="item.icons.duration" />
                                    <text class="font_4">{{ item.duration }}</text>
                                    <image class="image_9" :src="item.icons.people" />
                                    <text class="font_4">{{ item.people }}</text>
                                    <image class="image_9" :src="item.icons.price" />
                                    <text class="font_4 text_10">{{ item.price }}</text>
                                </view>
                            </view>
                            <image class="codefun-self-start image_8" :src="item.icons.location" />
                            <text class="codefun-self-start font_3 text_9">{{ item.distance }}</text>
                        </view>
                        <view class="codefun-mt-8 codefun-flex-row codefun-justify-between codefun-items-center">
                            <view class="flex-center">
                                <fui-rate :score="item.rating" :size="36" />
                                <text class="font_5 ml-1">{{ item.rating }}</text>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                @click.stop="onActionButtonClick(item)"
                            >
                                <text class="font_6 text_12">{{ item.actionText }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <image class="codefun-self-end image_7 image_12 mt-269" :src="pageData.bottomImage" />
    </view>
</template>

<style scoped lang="scss">
    .mt-19 {
        margin-top: 38rpx;
    }
    .ml-55 {
        margin-left: 110rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-269 {
        margin-top: 538rpx;
    }
    .page {
        padding-bottom: 128rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        .section {
            padding: 26rpx 28rpx 26rpx 36rpx;
            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 8rpx 6rpx;
                .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: 0 28rpx;
            .text-wrapper {
                padding: 24rpx 0;
                flex: 1 1 120rpx;
                background-color: #5db66f;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                height: 72rpx;
                .text_2 {
                    color: #ffffff;
                }
            }
            .text-wrapper_2 {
                flex: 1 1 120rpx;
                padding: 24rpx 0;
                background-color: #ffffff;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                height: 72rpx;
                .text_3 {
                    line-height: 25.88rpx;
                }
                .text_4 {
                    line-height: 26.16rpx;
                }
                .text_5 {
                    line-height: 25.96rpx;
                }
                .text_6 {
                    line-height: 25.68rpx;
                }
            }
        }
        .group_3 {
            padding: 0 28rpx;
            height: 685rpx;
            .section_2 {
                padding-bottom: 8rpx;
                background-color: #ffffff66;
                border-radius: 32rpx;
                border-left: solid 2rpx #ffffffcc;
                border-right: solid 2rpx #ffffffcc;
                border-top: solid 2rpx #ffffffcc;
                border-bottom: solid 2rpx #ffffffcc;
                .text-wrapper_3 {
                    padding: 24rpx 0 52rpx;
                    background-color: #ffffff;
                    border-radius: 32rpx;
                    width: 348rpx;
                    height: 102rpx;
                    .text_7 {
                        color: #333333;
                        line-height: 26.16rpx;
                    }
                }
                .text_8 {
                    margin-top: 20rpx;
                    color: #5db66f;
                }
            }
            .list {
                margin-top: -44rpx;
                padding: 0 24rpx;
                background-color: #ffffff;
                border-radius: 12.76rpx;
                mix-blend-mode: NOTTHROUGH;
                .list-item {
                    padding: 20rpx 0;
                    border-bottom: solid 2rpx #eeeeee;
                    .group_4 {
                        margin-left: 16rpx;
                        .image_9 {
                            width: 24rpx;
                            height: 24rpx;
                        }
                        .font_4 {
                            font-size: 24rpx;
                            font-family: DingTalk Sans;
                            line-height: 22rpx;
                            color: #999999;
                        }
                        .text_10 {
                            line-height: 23.36rpx;
                        }
                    }
                    .image_8 {
                        margin-left: 8rpx;
                        margin-top: 16rpx;
                        width: 22rpx;
                        height: 26rpx;
                    }
                    .font_3 {
                        font-size: 24rpx;
                        font-family: DingTalk Sans;
                        line-height: 17.6rpx;
                        color: #5db66f;
                    }
                    .text_9 {
                        margin: 20rpx 16rpx 0 8rpx;
                        line-height: 19.42rpx;
                    }
                    .font_5 {
                        font-size: 28rpx;
                        font-family: DingTalk Sans;
                        color: #999999;
                    }
                    .text_11 {
                        margin-left: 172rpx;
                    }
                    .text-wrapper_4 {
                        padding: 12rpx 0;
                        background-color: #5db66f;
                        border-radius: 400rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 136rpx;
                        height: 48rpx;
                        .font_6 {
                            font-size: 24rpx;
                            font-family: DingTalk Sans;
                            line-height: 22rpx;
                            color: #ffffff;
                        }
                        .text_12 {
                            line-height: 22.18rpx;
                        }
                    }
                }
            }
        }
        .font_2 {
            font-size: 28rpx;
            font-family: DingTalk Sans;
            line-height: 26.02rpx;
            color: #1f2937;
        }
        .font {
            font-size: 32rpx;
            font-family: DingTalk Sans;
            line-height: 29.82rpx;
            color: #333333;
        }
        .image_7 {
            width: 96rpx;
            height: 96rpx;
        }
        .image_12 {
            margin-right: 58rpx;
        }
    }
</style>
