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

    // 页面数据
    const pageData = reactive({
        // 顶部横幅
        bannerImage: '/static/images/codefun/d31968c08e972e2a5fbc02faa5bd4317.png',

        // 排序选项
        sortOptions: [
            { id: 1, name: '全部农资', icon: '/static/images/codefun/9d95536ccd060c6fc9346ac04d0aae51.png' },
            { id: 2, name: '销量优先', icon: '/static/images/codefun/9d95536ccd060c6fc9346ac04d0aae51.png' },
        ],

        // 商品列表
        products: [
            {
                id: 1,
                tag: {
                    text: '政府背书',
                    show: true,
                },
                image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
                title: '有机肥料',
                description: '高效环保有机肥，适合各类农作物',
                price: '220',
                actionText: '我要购买',
            },
            {
                id: 2,
                tag: {
                    text: '',
                    show: false,
                },
                image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
                title: '复合肥料',
                description: '氮磷钾均衡配方，促进作物全面发育',
                price: '180',
                actionText: '我要购买',
            },
            {
                id: 3,
                tag: {
                    text: '热销',
                    show: true,
                },
                image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
                title: '生物农药',
                description: '天然无害杀虫剂，保护作物安全',
                price: '120',
                actionText: '我要购买',
            },
            {
                id: 4,
                tag: {
                    text: '推荐',
                    show: true,
                },
                image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
                title: '农用薄膜',
                description: '高透光耐老化，保温保湿效果好',
                price: '350',
                actionText: '我要购买',
            },
        ],
    })

    // 排序选项点击事件
    function onSortOptionClick(option: any) {
        console.log('点击排序选项:', option)
        // 在这里添加具体的排序选项点击逻辑
    }

    // 商品点击事件
    function onProductClick(product: any) {
        console.log('点击商品:', product)
        // 在这里添加具体的商品点击逻辑
    }

    // 购买按钮点击事件
    function onPurchaseClick(product: any) {
        console.log('点击购买按钮:', product)
        // 在这里添加具体的购买按钮点击逻辑
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-mt-14 codefun-flex-col group_3">
            <image class="image_8" :src="pageData.bannerImage" />
            <view class="codefun-mt-12 codefun-flex-col section_2">
                <view class="codefun-flex-row codefun-justify-between equal-division group_4">
                    <view
                        v-for="option in pageData.sortOptions"
                        :key="option.id"
                        class="codefun-flex-row codefun-items-center"
                        @click="onSortOptionClick(option)"
                    >
                        <text class="font_2" :class="`text_${option.id + 1}`">{{ option.name }}</text>
                        <image class="codefun-ml-6 codefun-shrink-0 image_9" :src="option.icon" />
                    </view>
                </view>
                <view class="codefun-mt-6 codefun-flex-col codefun-self-stretch">
                    <view
                        class="codefun-flex-row list-item"
                        v-for="product in pageData.products"
                        :key="product.id"
                        @click="onProductClick(product)"
                    >
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center section_3"
                        >
                            <view v-if="product.tag.show" class="codefun-flex-col codefun-justify-start text-wrapper">
                                <text class="font_3 text_4">{{ product.tag.text }}</text>
                            </view>
                        </view>
                        <view class="codefun-flex-col codefun-flex-1 codefun-self-start group_5 ml-13">
                            <text class="codefun-self-start font">{{ product.title }}</text>
                            <text class="codefun-self-start font_4 text_5 mt-11">{{ product.description }}</text>
                            <view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_6 mt-11">
                                <view class="codefun-self-start group_7">
                                    <text class="font_7">¥</text>
                                    <text class="font_5">{{ product.price }}</text>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
                                    @click.stop="onPurchaseClick(product)"
                                >
                                    <text class="font_6">{{ product.actionText }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ml-5 {
        margin-left: 10rpx;
    }
    .ml-13 {
        margin-left: 26rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .page {
        padding-bottom: 32rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        .section {
            padding: 28rpx 28rpx 28rpx 36rpx;
            background-color: #5db66f;
            mix-blend-mode: NOTTHROUGH;
            .group {
                padding: 4rpx 0;
                .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_2 {
                padding: 4rpx 0 4rpx 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.88rpx;
                }
                .pos {
                    position: absolute;
                    right: 0.66rpx;
                    top: 50%;
                    transform: translateY(-50%);
                    .image_5 {
                        width: 42rpx;
                        height: 40rpx;
                    }
                    .image_7 {
                        width: 34rpx;
                        height: 30rpx;
                    }
                }
            }
        }
        .group_3 {
            padding: 0 28rpx;
            .image_8 {
                width: 92.5333vw;
                height: 37.3333vw;
            }
            .section_2 {
                padding: 28rpx 24rpx 0;
                background-color: #ffffff;
                border-radius: 18.56rpx;
                mix-blend-mode: NOTTHROUGH;
                .equal-division {
                    align-self: center;
                    .font_2 {
                        font-size: 28rpx;
                        font-family: DingTalk Sans;
                        line-height: 24.44rpx;
                        color: #333333;
                    }
                    .text_2 {
                        line-height: 25.92rpx;
                    }
                    .image_9 {
                        width: 20rpx;
                        height: 10rpx;
                    }
                    .text_3 {
                        line-height: 25.92rpx;
                    }
                }
                .group_4 {
                    width: 495.28rpx;
                }
                .list-item {
                    padding: 24rpx 0;
                    border-bottom: solid 2rpx #eeeeee;
                    .section_3 {
                        padding: 12rpx 0 116rpx;
                        background-image: url('/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        width: 160rpx;
                        height: 160rpx;
                        .text-wrapper {
                            padding: 8rpx 0;
                            background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f 100%);
                            border-radius: 0rpx 8rpx 8rpx 0rpx;
                            mix-blend-mode: NOTTHROUGH;
                            .font_3 {
                                font-size: 20rpx;
                                font-family: DingTalk Sans;
                                line-height: 17.3rpx;
                                color: #ffffff;
                            }
                            .text_4 {
                                margin-left: 12rpx;
                                margin-right: 4rpx;
                                line-height: 18.7rpx;
                            }
                        }
                    }
                    .group_5 {
                        margin-top: 16rpx;
                        .font_4 {
                            font-size: 24rpx;
                            font-family: DingTalk Sans;
                            line-height: 24.44rpx;
                            color: #999999;
                        }
                        .text_5 {
                            line-height: 22.92rpx;
                        }
                        .group_6 {
                            padding-left: 4rpx;
                            .group_7 {
                                margin-top: 16rpx;
                                line-height: 24.44rpx;
                                height: 24.44rpx;
                                .font_7 {
                                    font-size: 24rpx;
                                    font-family: DingTalk Sans;
                                    line-height: 17.3rpx;
                                    font-weight: 700;
                                    color: #f2130d;
                                }
                                .font_5 {
                                    font-size: 32rpx;
                                    font-family: DingTalk Sans;
                                    line-height: 24.44rpx;
                                    color: #f2130d;
                                }
                            }
                            .text-wrapper_2 {
                                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: 22.16rpx;
                                    color: #ffffff;
                                }
                            }
                        }
                    }
                }
            }
        }
        .font {
            font-size: 32rpx;
            font-family: DingTalk Sans;
            line-height: 29.8rpx;
            color: #333333;
        }
    }
</style>
