<template>
	<view data-component-name="diy-group" class="diy-group">
		<view v-for="(item, index) in diyDataArray" :key="index" :style="item.pageStyle">
			<!-- 动态组件加载 -->
			<component 
				:is="getComponent(item.componentName)" 
				v-if="shouldShowComponent(item)" 
				:value="item" 
				v-bind="getComponentProps(item)"
			></component>
			
			<!-- 自定义扩展组件 -->
			<diy-comp-extend :value="item"></diy-comp-extend>
		</view>
	</view>
</template>

<script>
// 组件组展示
import DiyMinx from './minx.js'
import diyCompExtend from './diy-comp-extend.vue'

export default {
	name: 'DiyGroup',
	mixins: [DiyMinx],
	components: {
		diyCompExtend
	},
	props: {
		diyData: {
			type: Object,
			default: () => ({})
		},
		scrollTop: {
			type: [String, Number],
			default: '0'
		},
		haveTopCategory: {
			type: Boolean,
			default: false
		},
		followOfficialAccount: {
			type: Object,
			default: () => ({})
		},
	},
	data() {
		return {
			diyGlobalData: null,
			// 动态组件映射
			componentMap: {
				StoreShow: () => import('./diy-store.vue'),
				Kefu: () => import('./diy-kefu.vue'),
				Form: () => import('./diy-form.vue'),
				StoreLabel: () => import('./diy-store-label.vue'),
				Picture: () => import('./diy-picture.vue'),
				Listmenu: () => import('./diy-listmenu.vue'),
				Text: () => import('./diy-text.vue'),
				Notice: () => import('./diy-notice.vue'),
				GraphicNav: () => import('./diy-graphic-nav.vue'),
				ImageAds: () => import('./diy-img-ads.vue'),
				Search: () => import('./diy-search.vue'),
				RichText: () => import('./diy-rich-text.vue'),
				HorzLine: () => import('./diy-horz-line.vue'),
				HorzBlank: () => import('./diy-horz-blank.vue'),
				Coupon: () => import('./diy-coupon.vue'),
				GoodsList: () => import('./diy-goods-list.vue'),
				ManyGoodsList: () => import('./diy-many-goods-list.vue'),
				RubikCube: () => import('./diy-rubik-cube.vue'),
				Video: () => import('./diy-video.vue'),
				Seckill: () => import('./diy-seckill.vue'),
				Pintuan: () => import('./diy-pintuan.vue'),
				Groupbuy: () => import('./diy-groupbuy.vue'),
				Pinfan: () => import('./diy-pinfan.vue'),
				Bargain: () => import('./diy-bargain.vue'),
				Presale: () => import('./diy-presale.vue'),
				Notes: () => import('./diy-notes.vue'),
				FloatBtn: () => import('./diy-float-btn.vue'),
				LiveInfo: () => import('./diy-live.vue'),
				FenxiaoGoodsList: () => import('./diy-fenxiao-goods-list.vue'),
				GoodsRecommend: () => import('./diy-goods-recommend.vue'),
				GoodsBrand: () => import('./diy-goods-brand.vue'),
				Article: () => import('./diy-article.vue'),
				MerchList: () => import('./diy-merch-list.vue'),
				MemberInfo: () => import('./diy-member-info.vue'),
				MemberMyOrder: () => import('./diy-member-my-order.vue'),
				QuickNav: () => import('./diy-quick-nav.vue'),
				PaymentQrcode: () => import('./diy-payment-qrcode.vue'),
				HotArea: () => import('./diy-hot-area.vue'),
				FollowOfficialAccount: () => import('./diy-follow-official-account.vue'),
				Map: () => import('./diy-map.vue'),
				Audio: () => import('./diy-audio.vue'),
				ImageNav: () => import('./diy-image-nav.vue'),
				Digit: () => import('./diy-digit.vue'),
				VideoList: () => import('./diy-video-list.vue'),
				BottomNav: () => import('./diy-bottom-nav.vue'),
				CategoryItem: () => import('./diy-category-item.vue'),
				Category: () => import('./diy-category.vue'),
				Icon: () => import('./diy-icon.vue'),
				Group: () => import('./diy-group.vue')
			}
		};
	},
	created() {
		this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData || {}));
	},
	computed: {
		topNavColor() {
			var color = '';
			if (this.diyData.global && this.diyData.global.topNavBg) {
				color = 'transparent';
				if (this.scrollTop > 20 && this.diyData.global.topNavColor) {
					color = this.diyData.global.topNavColor;
				} else {
					color = 'transparent';
				}
			} else if (this.diyData.global && this.diyData.global.topNavColor) {
				color = this.diyData.global.topNavColor;
			}
			return color;
		},
		// 修改属性样式
		setPagestyle() {
			if (!this.diyGlobalData || !this.diyGlobalData.value || !Array.isArray(this.diyGlobalData.value)) {
				return [];
			}
			this.diyGlobalData.value.forEach((item, index) => {
				item.pageStyle = '';
				// 给每个组件增加位置属性，用于定位，搜索、分类导航等定位
				item.moduleIndex = index + 1;

				// 特殊处理搜索框 当显示位置为滚动至顶部固定时，只设置背景颜色
				if (item.componentName == 'Search' && item.positionWay == 'fixed') {
					// item.pageStyle = 'background-color:' + item.pageBgColor + ';';
					return false;
				}

				item.pageStyle += 'background-color:' + (item.pageBgColor || '') + ';';
				if (item.margin) {
					item.pageStyle += 'padding-top:' + (item.margin.top || 0) * 2 + 'rpx' + ';';
					item.pageStyle += 'padding-bottom:' + (item.margin.bottom || 0) * 2 + 'rpx' + ';';
					item.pageStyle += 'padding-right:' + (item.margin.both || 0) * 2 + 'rpx' + ';';
					item.pageStyle += 'padding-left:' + (item.margin.both || 0) * 2 + 'rpx' + ';';
				}
			});

			return this.diyGlobalData.value;
		},
		// 过滤组件的渲染
		diyDataArray() {
			let data = [];
			let showModuleData = [];
			
			// 安全获取store中的模块显示数据
			try {
				if (this.$store && this.$store.state && this.$store.state.diyGroupShowModule) {
					showModuleData = JSON.parse(this.$store.state.diyGroupShowModule);
					// 确保showModuleData是数组
					if (!Array.isArray(showModuleData)) {
						showModuleData = [];
					}
				}
			} catch (e) {
				showModuleData = [];
			}

			const diyDataArr = this.setPagestyle;
			
			if (showModuleData.length) {
				if (showModuleData.includes('null')) return [];

				diyDataArr.forEach((item, index) => {
					if (item && item.componentName && showModuleData.includes(item.componentName)) {
						data.push(item);
					}
				});
			} else {
				data = diyDataArr;
			}
			return data;
		}
	},
	methods: {
		// 获取组件
		getComponent(componentName) {
			return this.componentMap[componentName] || null;
		},
		
		// 判断组件是否应该显示
		shouldShowComponent(item) {
			// 检查是否有对应的组件映射
			if (!this.componentMap[item.componentName]) {
				return false;
			}
			
			// 根据组件名称和附加组件状态进行判断
			const addonChecks = {
				StoreShow: 'store',
				StoreLabel: 'store',
				Coupon: 'coupon',
				Seckill: 'seckill',
				Pintuan: 'pintuan',
				Groupbuy: 'groupbuy',
				Pinfan: 'pinfan',
				Bargain: 'bargain',
				Presale: 'bargain',
				Notes: 'notes'
			};
			
			const addonName = addonChecks[item.componentName];
			if (addonName) {
				return this.addonIsExist[addonName];
			}
			
			// 小程序直播组件特殊处理
			if (item.componentName === 'LiveInfo') {
				// #ifdef MP-WEIXIN
				return true;
				// #endif
				// #ifndef MP-WEIXIN
				return false;
				// #endif
			}
			
			return true;
		},
		
		// 获取组件属性
		getComponentProps(item) {
			const props = {};
			
			// 为特定组件添加额外属性
			switch (item.componentName) {
				case 'Search':
					props.topNavColor = this.topNavColor;
					props.global = this.diyGlobalData.global;
					props.haveTopCategory = this.haveTopCategory;
					props.followOfficialAccount = this.followOfficialAccount;
					break;
				case 'ManyGoodsList':
					props.global = this.diyGlobalData.global;
					props.scrollTop = this.scrollTop;
					break;
				case 'MemberInfo':
					props.global = this.diyGlobalData.global;
					break;
			}
			
			return props;
		}
	}
};
</script>

<style lang="scss">
.diy-group {
	width: 100%;
}
</style>