<template>
	<view class="diy-merch-list">
		<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
			<view class="merch-wrap" :style="warpCss">
				<view :class="['list-wrap', value.style]" :style="warpCss">
					<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index"
						:style="itemCss" @click="handlerClick(item)" @tap="handlerClick(item)">
						<view class="merch-img">
							<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix"
								@error="imgError(index)" />
						</view>
						<view class="info-wrap">
							<text class="title">{{ item.merch_name }}</text>
							<text class="desc">{{ item.desc }}</text>
							<view class="read-wrap"></view>
						</view>
					</view>
				</view>
			</view>
		</x-skeleton>
		<view v-else :style="warpCss">
			<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide']">
				<!-- #ifdef MP -->
				<view class="uni-scroll-view-content">
					<!-- #endif -->

					<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index"
						:style="{ width: 100 / 4 + '%' }" @click="handlerClick(item)" @tap="handlerClick(item)">
						<view class="graphic-img" v-if="value.mode != 'text'"
							:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
							<image
								:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
								mode="aspectFill" :show-menu-by-longpress="true"
								style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;" />
						</view>
						<text class="graphic-text"
							style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
							{{ item.merch_name }}
						</text>
					</view>

					<!-- #ifdef MP -->
				</view>
				<!-- #endif -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
// 文章
import DiyMinx from './minx.js'
export default {
	name: 'diy-article',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			list: [
				/*{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				},
				{
					merch_name:'品牌',
					merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
				}*/
			],
			loading: true,
			skeletonConfig: {
				gridRows: 1,
				gridRowsGap: '40rpx',
				headWidth: '160rpx',
				headHeight: '160rpx',
				textRows: 2
			}
		};
	},
	created() {
		this.getList();
	},
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) {
			this.getList();
		}
	},
	computed: {
		warpCss() {
			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;';
			}
			console.log(obj)
			return obj;
		},
		// 子项样式
		itemCss() {
			var obj = '';
			obj += 'background-color:' + this.value.elementBgColor + ';';
			if (this.value.elementAngle == 'round') {
				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;';
			}
			if (this.value.ornament.type == 'shadow') {
				obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
			}
			if (this.value.ornament.type == 'stroke') {
				obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
			}
			return obj;
		}
	},
	methods: {
		getList() {
			console.log(121)
			var data = {
				num: this.value.count
			};
			console.log(this.value)
			if (this.value.sources == 'diy') {
				data.num = 0;
				data.merch_id_arr = this.value.merchIds.toString();
			}

			this.$api.sendRequest({
				url: '/merch/api/merch/lists',
				data: data,
				success: res => {
					if (res.code == 0 && res.data) {
						let data = res.data;
						this.list = data;
					}
					this.loading = false;
				}
			});
		},
		toDetail(item) {
			this.$util.redirectTo('/pages_promotion/merch/detail', {
				merch_id: item.merch_id
			});
		},
		imgError(index) {
			if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
		},
		async handlerClick(item) {
			await this.__$emitEvent({
				eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					this.toDetail(item);
				}
			})
		}
	}
};
</script>
<style>
/* 单行滑动 */
.merch-nav.singleSlide>>>.uni-scroll-view-content {
	display: flex;
}
</style>
<style lang="scss">
.merch-nav {
	padding: 16rpx;
	box-sizing: border-box;

	&.singleSlide {
		.merch-nav-item {
			flex-shrink: 0;
		}
	}

	&.pageSlide {
		position: relative;

		.merch-nav-wrap {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 100%;
		}
	}

	.merch-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 14rpx 0;
		box-sizing: border-box;

		.graphic-text {
			padding-top: 12rpx;
			line-height: 1.5;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			width: 100%;
			text-align: center;

			&.alone {
				padding-top: 0;
			}
		}

		&.text {

			.graphic-text {
				padding-top: 0;
			}
		}

		.graphic-img {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			font-size: 24rpx;

			.tag {
				position: absolute;
				top: -10rpx;
				right: -24rpx;
				color: #fff;
				border-radius: 24rpx;
				border-bottom-left-radius: 0;
				transform: scale(0.8);
				padding: 8rpx 16rpx;
				line-height: 1;
				font-size: 24rpx;
			}

			.icon {
				font-size: 50rpx;
				color: $color-sub;
			}
		}
	}
}

.merch-wrap {
	.list-wrap {
		&.style-1 {
			.item {
				display: flex;
				padding: 20rpx;
				margin-top: 24rpx;

				&:first-of-type {
					margin-top: 0;
				}

				.merch-img {
					margin-right: 20rpx;
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 100%;
					}
				}

				.info-wrap {

					// flex: 1;
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					.desc {
						color: #888
					}

					.title {
						font-weight: bold;
						// margin-bottom: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 30rpx;
						line-height: 1.5;
					}

					.abstract {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: $font-size-tag;
					}

					.read-wrap {
						display: flex;
						color: #999ca7;
						justify-content: flex-start;
						align-items: center;
						margin-top: 10rpx;
						line-height: 1;

						text {
							font-size: $font-size-tag;
						}

						.iconfont {
							font-size: 36rpx;
							vertical-align: bottom;
							margin-right: 10rpx;
						}

						.category-icon {
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							background: $base-color;
							margin-right: 10rpx;
						}

						.date {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>