<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
    import * as NongzhiAPI from '@/api/model/nongzhi'
    import { useDictStore } from '@/store/modules/dict'

    const dictStore = useDictStore()

    // 下拉刷新
    onPullDownRefresh(() => {
        pageData.search.pageNo = 1
        pageData.products = []
        getGoodsList()
        setTimeout(function () {
            uni.stopPullDownRefresh()
            Message.toast('刷新成功')
        }, 1000)
    })

    onShow(() => {
        pageData.search.pageNo = 1
        pageData.products = []
        // 获取数据
        getGoodsList()

        initDict()
    })
    // 页面数据
    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' },
        ],
        rangeShow1: false,
        range1: '全部农资',
        categoryList1: [],
        rangeShow2: false,
        range2: '销量优先',
        categoryList2: [
            {
                text: '销量优先',
                value: 1,
                checked: true,
            },
            {
                text: '评分优先',
                value: 2,
            },
        ],

        search: {
            pageNo: 1,
            pageSize: 10,
            category: null,
        },

        // 商品列表
        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: '我要购买',
            // },
        ],
        total: 0,
    })

    function initDict() {
        pageData.categoryList1 = dictStore.getDictList.category.map((item) => {
            return {
                text: item.text,
                value: item.value,
            }
        })
        pageData.categoryList1.unshift({
            text: '全部农资',
            value: '',
        })
    }

    function getGoodsList() {
        NongzhiAPI.goodsList(pageData.search).then((res) => {
            console.log(res)
            const { records, total } = res
            pageData.products = [...pageData.products, ...records]
            pageData.total = total
        })
    }

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

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

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

    const ddmRange1 = ref()
    function rangeItemClick1(e) {
        pageData.range1 = e.text

        pageData.search.category = e.value
        pageData.search.pageNo = 1
        pageData.products = []
        getGoodsList()
    }
    function rangeClose1() {
        pageData.rangeShow1 = false
    }
    function filterTap1() {
        ddmRange1.value.show()
        pageData.rangeShow1 = true
    }
    const ddmRange2 = ref()
    function rangeItemClick2(e) {
        pageData.range2 = e.text
    }
    function rangeClose2() {
        pageData.rangeShow2 = false
    }
    function filterTap2() {
        ddmRange2.value.show()
        pageData.rangeShow2 = true
    }

    onReachBottom(() => {
        if (pageData.total <= pageData.products.length) {
            return
        }
        pageData.search.pageNo++
        getGoodsList()
    })
</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> -->
                    <fui-dropdown-menu
                        class="codefun-flex-row"
                        :size="28"
                        selectedColor="#465CFF"
                        :options="pageData.categoryList1"
                        @click="rangeItemClick1"
                        @close="rangeClose1"
                        :isCheckbox="false"
                        ref="ddmRange1"
                    >
                        <view class="fui-filter__item" @tap="filterTap1">
                            <text>{{ pageData.range1 }}</text>
                            <view class="fui-filter__icon" :class="{ 'fui-icon__ani': pageData.rangeShow1 }">
                                <fui-icon name="turningdown" :size="32" />
                            </view>
                        </view>
                    </fui-dropdown-menu>
                    <fui-dropdown-menu
                        class="codefun-flex-row"
                        :size="28"
                        selectedColor="#465CFF"
                        :options="pageData.categoryList2"
                        @click="rangeItemClick2"
                        @close="rangeClose2"
                        :isCheckbox="false"
                        ref="ddmRange2"
                    >
                        <view class="fui-filter__item" @tap="filterTap2">
                            <text>{{ pageData.range2 }}</text>
                            <view class="fui-filter__icon" :class="{ 'fui-icon__ani': pageData.rangeShow2 }">
                                <fui-icon name="turningdown" :size="32" />
                            </view>
                        </view>
                    </fui-dropdown-menu>
                </view>
                <view class="codefun-mt-6 codefun-flex-col codefun-self-stretch">
                    <view v-if="!pageData.products || pageData.products.length == 0" style="height: 700rpx">
                        <fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
                    </view>
                    <template v-else>
                        <view
                            class="codefun-flex-row list-item"
                            v-for="(product, index) 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"
                                :style="{
                                    'background-image': `url(${product.image})`,
                                }"
                            >
                                <view
                                    v-if="product.labels_dictText.split(',').length > 0"
                                    class="codefun-flex-col codefun-justify-start text-wrapper"
                                >
                                    <text class="font_3 text_4">{{ product.labels_dictText.split(',')[0] }}</text>
                                </view>
                            </view>
                            <view class="codefun-flex-col codefun-flex-1 codefun-self-start group_5 ml-13">
                                <text class="codefun-self-start font ellipsis">{{ product.name }}</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"
                                    :style="{
                                        'padding-right': pageData.products.length === index + 1 ? '0.75rem' : '0',
                                    }"
                                >
                                    <view class="codefun-self-start group_7">
                                        <text class="font_7">¥</text>
                                        <text class="font_5">{{ product.sellPrice }}</text>
                                    </view>
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
                                        @click.stop="onPurchaseClick(product)"
                                    >
                                        <text class="font_6">我要购买</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    :deep(.fui-dropdown__menu) {
        flex: none;
    }
    :deep(.fui-filter__item) {
        display: flex;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
    }
    :deep(.fui-dropdown__menu-list) {
        width: 32vw;
    }
    .ellipsis {
        width: 80%;
    }
    .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: calc(100vh - 44px);
        .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-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: 1em;
            color: #333333;
        }
    }
</style>
