<template>
	<view class="many-goods-list">
		<u-tabs class="utabs" @change="tabsChange" keyName="title" :list="value.list" :current="cateIndex"
			lineColor="var(--base-color)" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.15)'
			}" :inactiveStyle="{
				color: '#999',
				transform: 'scale(1)'
			}"></u-tabs>

		<!-- <div style="height: 24rpx;"></div> -->

		<!-- <scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">
			<view
				v-for="(item, index) in value.list"
				class="scroll-item"
				:class="{ active: index == cateIndex }"
				:id="'a' + index"
				:key="index"
				@click="changeCateIndex(item, index)"
			>
				<view class="item-wrap">
					<view class="split-line" v-if="index > 0"></view>
					<view class="cate">
						<view class="name">{{ item.title }}</view>
						<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		 -->
		<diy-goods-list v-show="cateIndex==0" :value.sync="goodsValue0" ref="diyGoodsList0">
		</diy-goods-list>
		<!-- <diy-goods-list v-if="cateIndex==0" :value.sync="goodsValue0" ref="diyGoodsList0">
		</diy-goods-list> -->

		<diy-goods-list v-show="cateIndex==1" :value.sync="goodsValue1" ref="diyGoodsList1">
		</diy-goods-list>
		<diy-goods-list v-show="cateIndex==2" :value.sync="goodsValue2" ref="diyGoodsList2">
		</diy-goods-list>
		<diy-goods-list v-show="cateIndex==3" :value.sync="goodsValue3" ref="diyGoodsList3">
		</diy-goods-list>
		<diy-goods-list v-show="cateIndex==4" :value.sync="goodsValue4" ref="diyGoodsList4">
		</diy-goods-list>
		<diy-goods-list v-show="cateIndex==5" :value.sync="goodsValue5" ref="diyGoodsList5">
		</diy-goods-list>

	</view>
</template>

<script>
	export default {
		name: 'diy-many-goods-list',
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				}
			},
		},
		data() {
			return {
				cateIndex: 0, // 当前选中的分类id
				goodsValue0: null, // 商品列表数据
				goodsValue1: null,
				goodsValue2: null,
				goodsValue3: null,
				goodsValue4: null,
				goodsValue5: null,

			};
		},
		created() {
			this.goodsValue0 = this.value.list[0]
			this.goodsValue1 = this.value.list[1]
			this.goodsValue2 = this.value.list[2]
			this.goodsValue3 = this.value.list[3]
			this.goodsValue4 = this.value.list[4]
			this.goodsValue5 = this.value.list[5]
			console.log(this.value, '组件的总数据');
			this.changeCateIndex(this.value.list[0], 0, true);
			// this.changeCateIndex(this.value.list[0], 0);
		},
		mounted() {
			// this.$nextTick(_ => {
			// 	this.changeCateIndex(this.value.list[0], 0, true);
			// })
		},
		methods: {

			tabsChange(e) {
				this.changeCateIndex(e, e.index, true);
			},

			changeCateIndex(item, index, isFirst) {

				console.log(this.cateIndex, '之前的tab');
				this.cateIndex = Number(item.newCategoryId) - 1;
				console.log(this.cateIndex, '之后的tab');
				this.goodsValue = {}
				this["goodsValue" + index] = {
					sources: item.sources,
					categoryId: item.categoryId,
					categoryName: item.categoryName,
					newCategoryId: item.newCategoryId,
					newCategoryName: item.newCategoryName,
					goodsId: item.goodsId,
					componentBgColor: this.value.componentBgColor,
					componentAngle: this.value.componentAngle,
					topAroundRadius: this.value.topAroundRadius,
					bottomAroundRadius: this.value.bottomAroundRadius,
					elementBgColor: this.value.elementBgColor,
					elementAngle: this.value.elementAngle,
					topElementAroundRadius: this.value.topElementAroundRadius,
					bottomElementAroundRadius: this.value.bottomElementAroundRadius,
					count: this.value.count,
					nameLineMode: this.value.nameLineMode,
					template: this.value.template,
					style: this.value.style,
					ornament: this.value.ornament,
					sortWay: this.value.sortWay,
					saleStyle: this.value.saleStyle,
					tag: this.value.tag,
					btnStyle: this.value.btnStyle,
					goodsNameStyle: this.value.goodsNameStyle,
					theme: this.value.theme,
					priceStyle: this.value.priceStyle,
					slideMode: this.value.slideMode,
					imgAroundRadius: this.value.imgAroundRadius,
					cartEvent: this.value.cartEvent,
					cateName: this.cateIndex + 1,
					tabsTitle: item.title,
					pageStyle: this.value.pageStyle
				};
				console.log("goodsValue" + index, '切换之后的数据');
				console.log(this["goodsValue" + index], '切换之后的数据源头');

				// this.goodsValue0 = {
				// 	sources: item.sources,
				// 	categoryId: item.categoryId,
				// 	categoryName: item.categoryName,
				// 	newCategoryId: item.newCategoryId,
				// 	newCategoryName: item.newCategoryName,
				// 	goodsId: item.goodsId,
				// 	componentBgColor: this.value.componentBgColor,
				// 	componentAngle: this.value.componentAngle,
				// 	topAroundRadius: this.value.topAroundRadius,
				// 	bottomAroundRadius: this.value.bottomAroundRadius,
				// 	elementBgColor: this.value.elementBgColor,
				// 	elementAngle: this.value.elementAngle,
				// 	topElementAroundRadius: this.value.topElementAroundRadius,
				// 	bottomElementAroundRadius: this.value.bottomElementAroundRadius,
				// 	count: this.value.count,
				// 	nameLineMode: this.value.nameLineMode,
				// 	template: this.value.template,
				// 	style: this.value.style,
				// 	ornament: this.value.ornament,
				// 	sortWay: this.value.sortWay,
				// 	saleStyle: this.value.saleStyle,
				// 	tag: this.value.tag,
				// 	btnStyle: this.value.btnStyle,
				// 	goodsNameStyle: this.value.goodsNameStyle,
				// 	theme: this.value.theme,
				// 	priceStyle: this.value.priceStyle,
				// 	slideMode: this.value.slideMode,
				// 	imgAroundRadius: this.value.imgAroundRadius,
				// 	cartEvent: this.value.cartEvent,
				// 	cateName: this.cateIndex + 1,
				// 	tabsTitle: item.title,
				// 	pageStyle: this.value.pageStyle
				// };
				// 如果是第一次加载，不需要执行下面代码
				// #ifdef APP
				if (isFirst) return;
				// #endif
				// // #ifndef APP
				// if (this["goodsValue" + index].goodsId > 20) {
				// 	if (isFirst) return;
				// }
				// // #endif



				this.$refs["diyGoodsList" + index].goodsValue = this["goodsValue" + index];
				this.$refs["diyGoodsList" + index].list = [];
				this.$refs["diyGoodsList" + index].getGoodsList();
				this.$refs["diyGoodsList" + index].page = 1;
				this.$refs["diyGoodsList" + index].nodata = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	scroll-view {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 40rpx 20rpx;

		.scroll-item {
			display: inline-block;
			text-align: center;
			vertical-align: top;

			.item-wrap {
				display: flex;
				align-items: center;
			}

			.split-line {
				display: inline-block;
				width: 1rpx;
				height: 30rpx;
				// background-color: #e5e5e5;
				margin: 0 20rpx;
			}

			&.active {
				.name {
					font-weight: bold;
				}

				.desc {
					color: #ffffff;
					border-radius: 20rpx;
				}
			}

			.name {
				font-size: 32rpx;
				color: $color-title;
				line-height: 1;
			}

			.desc {
				font-size: $font-size-tag;
				color: $color-tip;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 10rpx;
				min-width: 120rpx;
			}
		}
	}
</style>