<template>
    <div id="selectPreservation">
        <div>
            <!-- <img src="@/assets/images/public/service.png" class="service_img" alt="" /> -->
        </div>
        <div class="tlf">
            <div style="padding: 13px 12px">
                <van-search v-model="searchParams" placeholder="输入关键字" show-action @clear="handleClear">
                    <template #left-icon>
                        <!-- <img src="@/assets/images/public/search.png" style="width: 12px" alt="" /> -->
                    </template>
                    <template #action>
                        <div style="display: flex; align-items: center">
                            <div class="line"></div>
                            <div slot="action" @click="onSearch('0')" class="reddish">搜索</div>
                        </div>
                    </template>
                </van-search>
            </div>
        </div>
        <div class="commodity">
            <!--// 左侧导航内容 -->
            <div class="leftNav">
                <ul>
                    <li v-for="(item, index) in shopList" :key="index" :class="{ typeStyle: index === currentIndex }"
                        @click="onClickNav(index)">
                        <span class="leftTit" :class="{ typeFontSize: index === currentIndex }">
                            {{ singleWordMenu ? `“ ${item.menuName[0]} ”` : item.menuName }}
                        </span>
                    </li>
                </ul>
            </div>
            <!--// 右侧商品内容 -->
            <div class="rightContent">
                <ul ref="shopContent">
                    <li class="eventList" v-for="(item, index) in shopList" :key="index">
                        <div class="rightTtitle">{{ item.menuName }}
                        </div>
                        <ul>
                            <li class="gather" v-for="(subItem, index) in item.children" :key="index"
                                @click="goList(item, subItem)">
                                <img :src="subItem.img" />
                                <div class="distance">
                                    <div class="shopName">{{ subItem.menuName }}</div>
                                </div>
                            </li>
                            <div style="height: 1px"></div>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>
import { Popup, Search } from 'vant'
import BScroll from 'better-scroll'
import { shopList } from '@/views/service/js/mock/shop-list'
import { fetchServiceList } from "@/api/service-list"
import { getEcosystemByValue } from '@/assets/js/utils/ecosystem'

export default {
    components: {
        [Popup.name]: Popup,
        [Search.name]: Search,
    },
    props: {
    },
    data() {
        return {
            singleWordMenu: this.$route.query.swe,
            shopList: [],
            searchParams: '',
            imgUrls: {
                // 无数据
                noData: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/健康管理/u102.png',
            },
            userInfo: {},
            InterUrl: '',
            serviceType: '',
            scrollY: 0, // 右侧滑动的时候距离顶部的值
            rightSide: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
            //模拟的商品数据
            isclick: false,
            selectId: '',
        }
    },
    //计算属性
    computed: {
        // 计算出当前分类的下标
        currentIndex() {
            const { scrollY, rightSide } = this //拿到每次滑动的值以及每一个分类的下标值
            // console.log(scrollY, rightSide)
            if (this.isclick) {
                return this.selectId
            }
            // console.log('滚动的值及每一个分类的下标值...', this)
            //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
            //获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
            const index = rightSide.findIndex((top, index) => {
                // scrollY>=当前top &amp;&amp; scrollY<下一个top
                // console.log(scrollY, top, rightSide[index + 1], scrollY >= top, scrollY < rightSide[index + 1], '------')

                return scrollY >= top && scrollY < rightSide[index + 1]
            })
            // console.log(index, 'index')

            // 返回结果
            return index
        },
    },
    created() {

        // 获取 list 内容
        fetchServiceList({ menuCode: getEcosystemByValue(this.$route.params.ecosystem) }).then(res => {
            this.shopList = res.content.content[0].children
            // 在数据加载完成后，等待DOM更新后再初始化滚动
            this.$nextTick(() => {
                this.initializeRoll()
                this.initializeOwn()
            })
        })
        // 进入保全项清空一下相关保存的信息
        window.sessionStorage.removeItem('paymentDTO') // 删除暂存的银行信息
        window.sessionStorage.removeItem('temporaryDetail') // 删除补发保单暂存的数据/追加投资暂存数据
        window.sessionStorage.removeItem('bussInfoVO') // 删除电子发票暂存的列表信息(电子发票申请接口需要)
        window.sessionStorage.removeItem('selectedTab')
        if (this.$route.query.shareUrlId) {
            sessionStorage.setItem('shareUrlId', this.$route.query.shareUrlId)
        }
        if (localStorage.token) {
            this.getUser()
        }
        this.getInterUrl()
    },
    mounted() {
        //页面激活时触发
        // this.$mm.pages.current.rect()
        //this.getUser()
        //this.getInterUrl()
        // 滚动初始化已移到数据加载完成后执行
    },

    methods: {
        onSearch(type) {
            if ((type == '0' || type == '1') && !this.searchParams) {
                this.handleClear() // 修正方法名为handleClear
                return
            }

            // 遍历所有菜单项
            for (let i = 0; i < this.shopList.length; i++) {
                const item = this.shopList[i]
                // 确保item.children存在
                if (!item.children || !Array.isArray(item.children)) {
                    continue
                }

                // 遍历子菜单
                for (let j = 0; j < item.children.length; j++) {
                    const ele = item.children[j]

                    // 搜索关键字
                    if (type == '0' || type == '1') {
                        // 使用menuName代替text，确保menuName存在
                        if (ele.menuName && ele.menuName.includes(this.searchParams)) {
                            this.onClickNav(i) // 使用当前索引i，而不是item.id
                            console.log('找到匹配项：', ele.menuName)
                            return // 找到匹配后立即返回，停止搜索
                        }
                    }
                    // 按类型搜索
                    else if (type == '2' && this.serviceType) {
                        console.log('按类型搜索:', ele.type, this.serviceType)

                        if (ele.type == this.serviceType) {
                            this.onClickNav(i) // 使用当前索引i
                            console.log('找到匹配类型：', ele.type)
                            return // 找到匹配后立即返回，停止搜索
                        }
                    }
                }
            }

            // 如果没有找到匹配项
            console.log('没有找到匹配项')
        },
        handleClear() {
            // 清除搜索并返回到第一个分类
            this.searchParams = ''
            this.onClickNav(0) // 直接使用0，不需要Number转换
        },
        getUser() {

        },
        // 获取智能客服跳转地址
        getInterUrl() {
        },
        goList(item, subItem) {
            // 注册进
            ecosystem.active = subItem
            ecosystem.services = item

            this.$router.push({
                name: 'service-info',
                params: {
                    ecosystem: this.$route.params.ecosystem,
                    position: item.children.findIndex(item => item.id == subItem.id) + 1
                }
            })
        },
        // 初始化滚动
        initializeRoll() {
            // 检查DOM元素是否存在
            const leftNavEl = document.querySelector('.leftNav')
            const rightContentEl = document.querySelector('.rightContent')

            if (!leftNavEl || !rightContentEl) {
                console.error('滚动容器元素未找到')
                return
            }

            // 销毁已存在的实例以防止重复创建
            if (this.leftScroll) {
                this.leftScroll.destroy()
            }
            if (this.foodsScroll) {
                this.foodsScroll.destroy()
            }

            // new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
            this.leftScroll = new BScroll('.leftNav', {
                click: true,
                scrollY: true,
                mouseWheel: true
            })

            // 组件实例上挂属性
            this.foodsScroll = new BScroll('.rightContent', {
                scrollY: true,
                probeType: 3, // 因为惯性滑动不会触发
                click: true,
                mouseWheel: true
            })

            // 给右侧列表绑定scroll监听
            this.foodsScroll.on('scroll', ({ x, y }) => {
                this.scrollY = Math.abs(y)
            })
            // 给右侧列表绑定scroll结束的监听
            this.foodsScroll.on('scrollEnd', ({ x, y }) => {
                // console.log('操作结束的下标值' + x, y)
                // this.scrollY = Math.abs(y)
                this.isclick = false
            })
        },
        // 初始化rightSide
        initializeOwn() {
            // 检查DOM元素是否存在
            if (!this.$refs.shopContent) {
                console.error('shopContent ref is not found')
                return
            }

            // 初始化rightSide
            const rightSide = []
            let top = 0
            rightSide.push(top)
            // 找到所有分类下的li
            const lis = this.$refs.shopContent.getElementsByClassName('eventList') //获取dom元素lii（eventList），对其进行操作

            // 检查是否找到元素
            if (!lis || lis.length === 0) {
                console.error('No eventList elements found')
                return
            }

            // slice() 方法返回一个新的数组对象
            Array.prototype.slice.call(lis).forEach((li) => {
                top += li.clientHeight //相当于top = top + li.clientHeight
                rightSide.push(top)
            })

            //更新数据
            this.rightSide = rightSide
            // console.log('每一个分类的下标' + rightSide)
        },
        //左侧点击事件
        onClickNav(index) {
            console.log(index)
            //拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置
            const scrollY = this.rightSide[index]
            // 点击的分类成为当前分类，索引当前选中的导航标题
            // console.log(scrollY, 'scrollY')
            this.isclick = true
            this.selectId = index
            this.scrollY = scrollY
            // 平滑滑动右侧列表
            this.foodsScroll.scrollTo(0, -scrollY, 1000)
        },
    },
    beforeDestroy() {
        // 组件销毁前移除滚动事件监听器
        window.removeEventListener('scroll', this.onScroll)
    },
}
</script>

<style lang="scss" scoped>
#selectPreservation {
    background: rgb(247, 249, 255);

    width: 100%;

    // position: relative;
    .vanP {
        width: 300px;
        box-sizing: border-box;
        padding: 16px 15px;
        border-radius: 10px;

        .smsTit {
            height: 25px;
            font-size: 18px;
            font-weight: bold;
            color: #f65c38;
            line-height: 25px;
            text-align: center;
            padding-bottom: 20px;
        }

        .smsCont {
            line-height: 22px;
            font-size: 14px;
            color: #2e2e30;
            text-align: center;
        }

        .buttons {
            display: flex;
            width: 100%;
            padding-top: 32px;
            justify-content: center;

            .sub {
                padding: 7px 45px;
                color: #fff;
                background-color: #f65c38;
                text-align: center;
                border-radius: 20px;
            }
        }
    }
}

.service_img {
    width: 100%;
}

.tlf {
    text-align: left;
    width: 100%;
    background-color: transparent !important;
    z-index: 5;

    .van-search {
        padding: 0 12px;
        border-radius: 5px;
        border: 1px solid #e1e1e1;
    }

    .van-search__content {
        background-color: #fff;
        padding: 0;
    }

    .van-search__action {
        padding: 0;
    }

    .line {
        // width: 1px;
        height: 14px;
        border: 1px solid #ff7d19;
        opacity: 0.1;
    }

    .reddish {
        padding: 0px 10px;
        font-family: PingFangTC, PingFangTC;
        font-weight: 500;
        font-size: 13px;
        color: #ff7d19 !important;
        text-align: left;
        font-style: normal;
    }
}

.commodity {
    /* 最大的盒子样式 */
    margin-top: 103px;
    display: flex;
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.leftNav {
    /* 左侧大盒子的整体样式 */
    width: 110px;
    background: rgb(248, 248, 248);
}

.typeStyle {
    /* 左侧导航选中的样式 */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    // border-left: 2px solid rgb(255, 94, 121);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ff7d19;
    line-height: 32px;
}

.typeStyle::before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: #ff7d19;
    border-radius: 0px 2px 2px 0px;
    position: absolute;
    left: 0;
}

.leftTit {
    /* 左侧导航标题默认样式 */
    padding: 11px 16px;
    display: flex;
    height: 40px;
    justify-content: center;
    font-size: 13px;
    align-items: center;
}

.typeFontSize {
    font-size: 14px;
}

.rightContent {
    /* 右侧大盒子的整体样式 */
    flex: 1;

    ul li:last-child {
        height: 100vh;
    }
}

.rightTtitle {
    /* 右侧标题样式 */
    padding: 15px 0 0px 23px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 15px;
    color: #333333;
    line-height: 32px;
    // background: rgb(248, 248, 248);
    margin: 0;
}

.gather {
    /* 右侧每一个商品的样式 */
    margin-top: 18px;
    display: flex;
    // margin: 16px;
    align-items: center;
    display: inline-block;
    width: 33%;
    text-align: center;
    vertical-align: top;
}

.distance {
    /* 右侧图片与描述间距 */
    // padding-left: 6px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.gather img {
    /* 右侧图片样式 */
    width: 24px;
    height: 25px;
    vertical-align: middle;
}

:last-child {
    /* 点击左侧导航右侧内容与左边对齐 */
    margin-bottom: 0;
}

.shopName {
    /* 右侧商品标题字体大小 */
    padding-top: 8px;
    font-family: PingFangSC;
    font-size: 13px;
    color: #000000;
    line-height: 15px;
    width: 60px;
}

.saleGood {
    /* 右侧月售好评样式 */
    font-size: 10px;
    color: rgb(147, 153, 159);
    padding: 4px 0px;
}

.saleGood span:first-child {
    /* 月售样式 */
    padding-right: 10px;
}

.price {
    /* 价格样式 */
    font-weight: bold;
    font-size: 14px;
    color: rgb(255, 94, 121);
}
</style>