<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.scheduleTsBox{
    // width: 60%;
    // position: absolute;
    // top: 118rpx;
    // left: 80rpx;
    // right: 300rpx;
    overflow: hidden;
}
.scheduleT-text{

}
.scheduleText{
    font-weight: 500;
    font-size: 32rpx;
    color: #ACCEFF;
    white-space: nowrap;
    margin-left: 22rpx;
    margin-right: 22rpx;
    margin-top: 22rpx;
    padding: 0 20rpx;
}
.scheduleText text{
    display: block;
}
.scheduleText view{
    border-radius: 4rpx;
    height: 8rpx;
    margin-top: 15rpx;
}
.scheduleText.active{
    color: #FFFFFF;
}
.scheduleText.active view{
    background: #FBCF20;
}
</style>
<template>
    <view>
        <scroll-view class="scheduleTsBox" :scroll-x="true"
        :scroll-left="scrollLeft">
                <view class="scheduleT-text row-aic-n">
                    <template v-for="(item,index) in list">
                        <view class="scheduleText" :id="`refs_${index+1}`"
                        :class="[params.type==item.id?'active':'']"
                        :key="index"
                        @click="getType(item)">
                        <text>{{ item.name }}</text>
                        <view></view>
                        </view>
                    </template>
                </view>
        </scroll-view>
    </view>
</template>
<script>
    export default {
        props:['titles','params'],
        data(){
            return {
                list: [],
                scrollLeft: 0
            }
        },
        watch:{
            titles: {
                handler(newVal, oldVal) {
                    this.list = JSON.parse(JSON.stringify(newVal))
                    // 使用 $nextTick 等待 DOM 渲染完成
                    this.$nextTick(() => {
                        this.list.forEach((x, index) => {
                        // 查询当前元素的位置
                        uni.createSelectorQuery()
                            .in(this) // 限定在当前组件内查询（关键！）
                            .select(`#refs_${index + 1}`) // 匹配元素的 id
                            .fields({
                                position: true, // 获取位置信息（left/top）
                                size: true      // 获取尺寸（width/height）
                            })
                            .exec((res) => {
                                if (res[0]) {
                                    const { left, top, width, height } = res[0];
                                    // console.log(`元素 ${index} 的横向位置（left）:`, left); // 单位：px
                                    // console.log(`元素 ${index} 的宽度:`, width);
                                    x.left = width*(index)
                                } else {
                                    console.log(`未找到元素 refs_${index + 1}`);
                                }
                            });
                        });
                    });
                },
                deep: true,
                immediate: true
            },
            params: {
                handler(newVal, oldVal) {
                    this.$nextTick(() => {
                        let findIndex = this.list.findIndex(x => x.id == newVal.type)
                        if(findIndex != -1) {
                            this.scrollLeft = this.list[findIndex].left
                            if(this.scrollLeft>0){
                                uni.setStorageSync("teamLeadr", {
                                    scrollLeft: this.scrollLeft
                                })
                            }
                        }
                    })
                },
                deep: true,
                immediate: true
            },
        },
        components: {
            
        },
        mounted(){
            this.scrollLeft = uni.getStorageSync("teamLeadr").scrollLeft
        },
        methods:{
            getType(item){
                this.$emit('change',item)
            }
        }
    }
</script>