<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"
        :scrollLeft="scrollLeft">
                <view class="scheduleT-text row-aic-n">
                    <template v-for="(item,index) in list">
                        <view class="scheduleText" :id="item.val"
                        :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: ''
            }
        },
        watch:{
            titles: {
                handler(newVal, oldVal) {
                    this.list = JSON.parse(JSON.stringify(newVal))
                },
                deep: true,
                immediate: true
            },
            params: {
                handler(newVal, oldVal) {
                    
                },
                deep: true,
                immediate: true
            }	
        },
        components: {
            
        },
        mounted(){
            
        },
        methods:{
            getType(item){
                this.$emit('change',item)
            }
        }
    }
</script>