<template>
    <JyPopup ref="popup" type="bottom" title="筛选">
        <view class="content">
            <!-- 筛选内容 -->
            <JyLinkage v-if="scrollList.length > 0" ref="jy_linkage" class="jy-linkage" :scrollList="scrollList"
                @clickTips="onGoodItem">
            </JyLinkage>
            <!-- 幽灵盒子 -->
            <view class="jy-bottom-btn-ghost"></view>
            <view class="btn-group">
                <view class="reset" @click="reset">重置</view>
                <view class="determine" @click="close">确定</view>
            </view>
        </view>
    </JyPopup>
</template>
<script setup>
import { ref } from 'vue'
import JyLinkage from '../jy-linkage'
import JyPopup from '@/components/public/jy-popup'
const popup = ref(null)
const jy_linkage = ref(null)
const scrollList = ref([{
    "id": 6905,
    "goods_list": [
        {
            "id": 65825,
            "content": "享早餐指定饮品半价",
            "name": "晨间套餐",
            "tips": ['1', '2', '3']
        }
    ],
    "name": "早晨的享受"
},
{
    "id": 6906,
    "goods_list": [
        {
            "id": 65826,
            "content": "购买牛角包,享咖啡买一送一",
            "name": "午后小食",
            "tips": ['1', '2', '3']
        },
        {
            "id": 65827,
            "content": "购买鸡蛋饼,享茶饮半价",
            "name": "中午套餐",
            "tips": ['1', '2', '3']
        }
    ],
    "name": "午间时光"
}])
const onGoodItem = (item) => {
    console.log(item);
    uni.showToast({
        title: `点击了 ${item.name}`,
        icon: 'none'
    })
}
const reset = () => {
    jy_linkage.value.resetTips()
}
const close = () => {
    popup.value.close()
}
const open = () => {
    popup.value.open()
}
defineExpose({
    close, open
})
</script>
<style lang="scss" scoped>
page {
    background: #eee;
}

$bg-text: #F6F6F6;

.content {
    width: 100%;
    background: $uni-bg-color;
    //上面两个圆角
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;

    .jy-linkage {
        height: calc(100% - 120px);
        margin-bottom: 20rpx;
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30rpx 0;
        font-weight: 600;
        font-size: $uni-font-size-lg;
    }

    .close {
        position: absolute;
        right: 20rpx;
        top: 30rpx;
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
    }

    .jy-bottom-btn-ghost {
        height: 124rpx;
    }

    .btn-group {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        padding-bottom: 40rpx;
        width: 100%;

        .determine {
            width: 428rpx;
            height: 84rpx;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
        }

        .reset {
            /* 自动布局子元素 */
            width: 234rpx;
            height: 84rpx;
            border-radius: 10rpx;

            /* 自动布局 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #F6F8FE;
        }
    }
}
</style>