<template>
    <JyCommonHead ref="jy_head" background="jb">
        <template #center>
            <JySearch ref="jy_search" :disabled="false" @search="setHistory"></JySearch>
        </template>
        <template #bottom>
            <JyScreen v-if="!showHistory" @status="statusScreening" :filteredList="filteredList"></JyScreen>
            <!--  -->
            <jyHistory v-if="showHistory" class="history-list" @search="clickHistory"></jyHistory>
        </template>
    </JyCommonHead>
    <!-- 内容 -->
    <!-- 商品卡片组 加载更多 -->
    <JyContent ref="jy_content" v-if="!showHistory"></JyContent>
    <!-- 筛选详情弹窗 -->
    <JyScreening ref="jy_screening"></JyScreening>
</template>
<script setup>
import { ref, nextTick } from 'vue'
// 内容
import JyContent from '@/components/public/jy-shop-content'
// 筛选
import JyScreen from './components/jy-screen'
// 头部
import JyCommonHead from '@/components/public/jy-common-head'
// 搜索
import JySearch from '../components/jy-search'
// 筛选
import JyScreening from './components/jy-screening'
//历史记录
import jyHistory from './components/jy-history'
import {
    onReachBottom,
    onPullDownRefresh
} from '@dcloudio/uni-app';
// 头部组件的ref
const jy_head = ref(null)
// 内容ref
const jy_content = ref(null)
// 显示 搜索后的列表
const showHistory = ref(true)
// 搜索组件的ref
const jy_search = ref(null)
//
const conditions = ref({})
const jy_screening = ref(null)
const filteredList = ref([{
    label: '综合',
    value: 1,
    isDown: true,
    list: [{
        value: 1,
        text: '综合排序'
    }, {
        value: 2,
        text: '价格排序'
    }],
    slot: null
}, {
    label: '销量',
    value: 2,
    slot: null
}, {
    label: '价格',
    value: 3,
    isUp: true,
    isDown: true,
    slot: null
}, {
    label: '筛选',
    value: 4,
    slot: 'screening',
    fun: "openPopup"
}])
const fun = {
    openPopup: () => {
        jy_screening.value.open()
    }
}
//筛选状态变更
const statusScreening = (val) => {
    conditions.value = val
    conditions.value.currentId = val.label
    val.fun && fun[val.fun]()
}
//点击历史记录
const clickHistory = (val) => {
    jy_search.value.updateSearch(val)
}
// 搜索
const setHistory = (val) => {
    if (!val) {
        showHistory.value = true
        return
    }
    showHistory.value = false
    jy_head.value.updateAltitude()
    let arr = uni.getStorageSync('history') || []
    //添加到本地存储
    arr.push(val)
    //长度大于10个就删除第一个
    if (arr.length > 10) {
        arr.shift()
    }
    uni.setStorageSync('history', arr)
}
onReachBottom(() => {
    !showHistory.value ? jy_content.value.getData(false, 'onReachBottom') : uni.stopPullDownRefresh()

})
onPullDownRefresh(() => {
    !showHistory.value ? jy_content.value.getData(false, 'onPullDownRefresh') : uni.stopPullDownRefresh()
})
</script>
<style lang="scss" scoped>
.header-search {
    padding-right: 20rpx;

    .icon {
        margin-right: 20rpx;
    }
}
</style>