<template>
	<view data-component-name="diy-rubik-cube">
		<!-- 自定义 -->
		<view v-if="value.mode == 'custom-rubik-cube'">
			<view style="position: relative;"><rich-text :nodes="customHtml"></rich-text></view>
		</view>
		<view v-else :class="['rubik-cube', value.mode]" :style="rubikCubeWrapCss">
			<!-- 1左2右 -->
			<template v-if="value.mode == 'row1-lt-of2-rt'">
				<view class="template-left">
					<view :class="['item', value.mode]" @click="handlerClick(value.list[0].link)"
						@tap="handlerClick(value.list[0].link)"
						:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
						<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
							:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
					</view>
				</view>

				<view class="template-right">
					<template v-for="(item, index) in list">
						<template v-if="index > 0">
							<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)"
								@tap="handlerClick(item.link)"
								:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
								<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
									:style="item.pageItemStyle" :show-menu-by-longpress="true" />
							</view>
						</template>
					</template>
				</view>
			</template>

			<!-- 1左3右 -->
			<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
				<view class="template-left">
					<view :class="['item', value.mode]"
						:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }"
						@click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)">
						<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
							:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
					</view>
				</view>

				<view class="template-right">
					<view :class="['item', value.mode]"
						:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }"
						@click="handlerClick(value.list[1].link)" @tap="handlerClick(value.list[1].link)">
						<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'"
							:style="list[1].pageItemStyle" :show-menu-by-longpress="true" />
					</view>
					<view class="template-bottom">
						<template v-for="(item, index) in list">
							<template v-if="index > 1">
								<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)"
									@tap="handlerClick(item.link)" :style="{
										marginRight: value.imageGap * 2 + 'rpx',
										width: item.imgWidth,
										height: item.imgHeight + 'px'
									}">
									<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
										:style="item.pageItemStyle" :show-menu-by-longpress="true" />
								</view>
							</template>
						</template>
					</view>
				</view>
			</template>

			<template v-else>
				<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
					@click="handlerClick(item.link)" @tap="handlerClick(item.link)"
					:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
					<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
						:style="item.pageItemStyle" :show-menu-by-longpress="true" />
				</view>
			</template>
		</view>
	</view>
</template>

<script>
// 魔方、橱窗
import htmlParser from '@/common/js/html-parser';
import DiyMinx from './minx.js'
export default {
	name: 'diy-rubik-cube',
	props: {
		value: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			customHtml: ''
		};
	},
	created() {
		if (this.value.mode == 'custom-rubik-cube') {
			this.value.diyHtml = this.value.diyHtml.replace(/&quot;/g, '"');
			this.customHtml = htmlParser(this.value.diyHtml);
		} else {
			var singleRow = {
				'row1-of2': {
					ratio: 2,
					width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) + 'px) / 2)'
				},
				'row1-of3': {
					ratio: 3,
					width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 4) + 'px) / 3)'
				},
				'row1-of4': {
					ratio: 4,
					width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 6) + 'px) / 4)'
				}
			};

			if (singleRow[this.value.mode]) {
				this.calcSingleRow(singleRow[this.value.mode]);
			} else if (this.value.mode == 'row2-lt-of2-rt') {
				this.calcFourSquare();
			} else if (this.value.mode == 'row1-lt-of2-rt') {
				this.calcRowOneLeftOfTwoRight();
			} else if (this.value.mode == 'row1-tp-of2-bm') {
				this.calcRowOneTopOfTwoBottom();
			} else if (this.value.mode == 'row1-lt-of1-tp-of2-bm') {
				this.calcRowOneLeftOfOneTopOfTwoBottom();
			}
		}
	},
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) { }
	},
	computed: {
		list() {
			var arr = JSON.parse(JSON.stringify(this.value.list));
			arr.forEach((item, index) => {
				item.pageItemStyle = this.countBorderRadius(this.value.mode, index);
			});
			return arr;
		},
		rubikCubeWrapCss() {
			var obj = '';
			obj += 'background-color:' + this.value.componentBgColor + ';';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		}
	},
	methods: {
		/**
		 * 魔方：单行多个，平分宽度
		 * 公式：
		 * 宽度：屏幕宽度/2，示例：375/2=187.5
		 * 比例：原图高/原图宽，示例：322/690=0.46
		 * 高度：宽度*比例，示例：187.5*0.46=86.25
		 */
		calcSingleRow(params) {
			uni.getSystemInfo({
				success: res => {
					let maxHeight = 0;

					this.list.forEach((item, index) => {
						var ratio = item.imgHeight / item.imgWidth;

						let width = res.windowWidth - uni.upx2px(this.value.margin.both *
							2); // 减去左右间距
						if (this.value.imageGap > 0) {
							width -= uni.upx2px(params.ratio * this.value.imageGap * 2); // 减去间隙
						}
						item.imgWidth = width / params.ratio;
						item.imgHeight = item.imgWidth * ratio;

						if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item
							.imgHeight;
					})

					this.list.forEach((item, index) => {
						item.widthStyle = params.width;
						item.imgHeight = maxHeight;
					});
				}
			})
		},
		/**
		 * 魔方：四方型，各占50%
		 */
		calcFourSquare() {
			uni.getSystemInfo({
				success: res => {
					let maxHeightFirst = 0;
					let maxHeightTwo = 0;
					this.list.forEach((item, index) => {
						var ratio = item.imgHeight / item.imgWidth;
						item.imgWidth = res.windowWidth;
						item.imgWidth -= uni.upx2px(this.value.margin.both * 4);
						if (this.value.imageGap > 0) {
							item.imgWidth -= uni.upx2px(this.value.imageGap * 2);
						}
						item.imgWidth = item.imgWidth / 2;
						item.imgHeight = item.imgWidth * ratio;


						// 获取每行最大高度
						if (index <= 1) {
							if (maxHeightFirst == 0 || maxHeightFirst < item.imgHeight) {
								maxHeightFirst = item.imgHeight;
							}
						} else if (index > 1) {
							if (maxHeightTwo == 0 || maxHeightTwo < item.imgHeight) {
								maxHeightTwo = item.imgHeight;
							}
						}
					});
					this.list.forEach((item, index) => {
						item.imgWidth = 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) +
							'px) / 2)';
						item.widthStyle = item.imgWidth;
						if (index <= 1) {
							item.imgHeight = maxHeightFirst;
						} else if (index > 1) {
							item.imgHeight = maxHeightTwo;
						}
					});
				}
			});
		},
		/**
		 * 魔方：1左2右
		 */
		calcRowOneLeftOfTwoRight() {
			let rightHeight = 0; // 右侧两图平分高度
			let divide = 'left'; // 划分规则，left：左，right：右
			if (this.list[1].imgWidth === this.list[2].imgWidth) divide = 'right';
			uni.getSystemInfo({
				success: res => {
					this.list.forEach((item, index) => {
						if (index == 0) {
							var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
							item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
							item.imgWidth = item.imgWidth / 2;
							item.imgHeight = item.imgWidth * ratio;
							rightHeight = (item.imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
							item.imgWidth += 'px';
						} else {
							item.imgWidth = this.list[0].imgWidth;
							item.imgHeight = rightHeight;
						}
					});
				}
			});
		},
		/**
		 * 魔方：1上2下
		 */
		calcRowOneTopOfTwoBottom() {
			var maxHeight = 0;
			uni.getSystemInfo({
				success: res => {
					this.list.forEach((item, index) => {

						var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
						if (index == 0) {
							item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4);
						} else if (index > 0) {
							item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
							item.imgWidth = item.imgWidth / 2;
						}

						item.imgHeight = item.imgWidth * ratio;

						// 获取最大高度
						if (index > 0 && (maxHeight == 0 || maxHeight < item.imgHeight))
							maxHeight = item.imgHeight;

					});
					this.list.forEach((item, index) => {
						item.imgWidth += 'px';
						item.widthStyle = item.imgWidth;
						if (index > 0) item.imgHeight = maxHeight;
					});
				}
			});
		},
		/**
		 * 魔方：1左3右
		 */
		calcRowOneLeftOfOneTopOfTwoBottom() {
			uni.getSystemInfo({
				success: res => {
					this.list.forEach((item, index) => {
						// 左图
						if (index == 0) {
							var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
							item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
							item.imgWidth = item.imgWidth / 2;
							item.imgHeight = item.imgWidth * ratio;
						} else if (index == 1) {
							item.imgWidth = this.list[0].imgWidth;
							item.imgHeight = (this.list[0].imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
						} else if (index > 1) {
							item.imgWidth = (this.list[0].imgWidth - uni.upx2px(this.value.imageGap * 2)) / 2;
							item.imgHeight = this.list[1].imgHeight;
						}
					});

					this.list.forEach((item, index) => {
						item.imgWidth += 'px';
						item.imgHeight;
					});
				}
			});
		},
		countBorderRadius(type, index) {
			var obj = '';
			if (this.value.elementAngle == 'right') {
				return obj;
			}
			var defaultData = {
				'row1-lt-of2-rt': [
					['border-top-right-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
				],
				'row1-lt-of1-tp-of2-bm': [
					['border-top-right-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
					['border-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
				],
				'row1-tp-of2-bm': [
					['border-bottom-left-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
				],
				'row2-lt-of2-rt': [
					['border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
					['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
				],
				'row1-of4': [
					['border-top-right-radius', 'border-bottom-right-radius'],
					['border-radius'],
					['border-radius'],
					['border-top-left-radius', 'border-bottom-left-radius']
				],
				'row1-of3': [
					['border-top-right-radius', 'border-bottom-right-radius'],
					['border-radius'],
					['border-top-left-radius', 'border-bottom-left-radius']
				],
				'row1-of2': [
					['border-top-right-radius', 'border-bottom-right-radius'],
					['border-top-left-radius', 'border-bottom-left-radius']
				]
			};

			defaultData[type][index].forEach((item, index) => {
				// obj += item + ':' + this.value.aroundRadius * 2 + 'rpx;';
				obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
			});
			return obj;
		},

		async handlerClick(link) {
			await this.__$emitEvent({
				eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					this.$util.diyRedirectTo(link);
				}
			})
		}
	}
};
</script>
<style lang="scss">
.rubik-cube {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.rubik-cube .item {
	text-align: center;
	line-height: 0;
	overflow: hidden;
}

.rubik-cube .item image {
	width: 100%;
	max-width: 100%;
	height: 100%;
}

// 一行两个
.rubik-cube .item.row1-of2 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of2:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of2:nth-child(2) {
	margin-right: 0 !important;
}

// 一行三个
.rubik-cube .item.row1-of3 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of3:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of3:nth-child(3) {
	margin-right: 0 !important;
}

// 一行四个
.rubik-cube .item.row1-of4 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of4:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of4:nth-child(4) {
	margin-right: 0 !important;
}

// 两左两右
.rubik-cube .item.row2-lt-of2-rt {
	// width: 50%;
	display: inline-block;
	box-sizing: border-box;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
	margin-right: 0 !important;
	margin-top: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

// 一左两右
.rubik-cube .template-left,
.rubik-cube .template-right {
	// width: 50%;
	box-sizing: border-box;
}

.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
	margin-bottom: 0;
}

.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
	margin-bottom: 0 !important;
}

.rubik-cube.row1-lt-of2-rt .template-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

// 一上两下
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
	// width: 50%;
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
	// width: 50%;
	box-sizing: border-box;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

// 一左三右
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
	width: 100%;
	box-sizing: border-box;
}

.rubik-cube .template-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rubik-cube .template-bottom .item:nth-child(2) {
	margin-right: 0 !important;
}
</style>