<template>
	<view class="goods-cate">
		<scroll-view scroll-x="true" :scroll-left="tabsScrollLeft" @scroll="scroll">
			<view class="cate-list flex" id="tab_list">
				<view class="cate-item background-white radius10" :class="currentIndex==-1?'background-blue color-ff':''" id="tab_item" @tap="changeCateEv(-1)">
					<view class="txt font24">全部</view>
				</view>
				<view class="cate-item background-white radius10" :class="index==currentIndex?'background-blue color-ff':''" id="tab_item" v-for="(item,index) in cateList" :key="index" @tap="changeCateEv(index)">
					<view class="txt font24">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
    export default {
        name:'goods-list',
        data() {
            return {
				cateList:[], //分类列表
				currentIndex:-1,
				scrollLeft:0, 
				tabsScrollLeft:0,
            };
        },
		mounted() {
			// 查询分类
			this.getCateList();
		},
        methods:{
			// 查询分类
			getCateList(){
				this.$requst.get('/api/v1/goods/category').then(res=>{
					if(res.code == 0){
						console.log(res,'物品分类列表')
						let cateArr = [];
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.title
							}
							cateArr.push(obj)
						})
						this.cateList = cateArr;
					}
				})
			},
			
			// 分类选择事件
			changeCateEv(index) {
				if(index !== this.currentIndex){
					this.currentIndex = index;
					// 传值
					this.$emit('changeCateEv',index==-1?0:this.cateList[index].id);
					// 分类切换效果
					if(index!==-1){
						this.setTabList();
					}else{
						this.tabsScrollLeft = 0;
					}
				}
			},
			
			// 分类切换效果
			setTabList() {
				this.$nextTick(() => {
					if (this.cateList.length > 0) {
						//计算左滑距离
						this.setLeft()
					}
				})
			},
			
			//计算左滑距离
			setLeft() {
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0];
					this.getElementData('#tab_item', (res) => {
						let el = res[this.currentIndex]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			
			// 获取DOM距离
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			
			// 滚动
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			}
        }
    }
</script>

<style scoped>
	/* 分类列表 */
	.goods-cate{
		padding: 20rpx 20rpx 0;
		margin: 0 auto;
		overflow: hidden;
	}
	.cate-list .cate-item{
		margin: 0 6rpx;
		padding: 10rpx 25rpx;
		white-space: nowrap;
	}
	.cate-list .cate-item:first-child{
		margin-left: 0;
	}
	.cate-list .cate-item:last-child{
		margin-right: 0;
	}
	.cate-list .cate-item>.img{
		width: 100rpx;
		height: 100rpx;
	}
	.cate-list .cate-item>.img image{
		width: 100%;
		min-height: 100%;
	}
	.cate-list .cate-item>.txt{
		line-height: 1.5;
		text-align: center;
	}
</style>
