<template>
	<view data-component-name="diy-picture" class="diy-picture" :style="style">
		<view class="fui-picture">
			<view v-for="(item, index) in value.list" style="line-height: 0;">
				<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)"
					v-if="item.link.wap_url" @click="handlerClick(item)" @tap="handlerClick(item)"></image>
				<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else
					@click="handlerClick(item)" @tap="handlerClick(item)"></image>
			</view>
			<!--   <view wx:if="{{!childitem.linkurl}}" bindtap="previewImg" data-src="{{childitem.imgurl}}" style="padding:{{diyitem.style.paddingtop==0?0:diyitem.style.paddingtop+'rpx'}} {{diyitem.style.paddingleft==0?0:diyitem.style.paddingleft+'rpx'}}" wx:for="{{diyitem.data}}" wx:for-index="childid" wx:for-item="childitem" wx:key="{{childid}}">
		        <image mode="widthFix" src="{{childitem.imgurl}}" style="{{bannerheight?'height:'+bannerheight+'px':'height:auto'}}"></image>
		    </view> -->
		</view>
	</view>
</template>

<script>
import DiyMinx from './minx.js'
export default {
	name: 'diy-picture',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			loading: true,
		};
	},
	created() {
		// this.getDataList();
	},
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) {
			// this.getDataList();
		}
	},
	mixins: [DiyMinx],
	computed: {
		style() {
			var css = '';
			css += 'background-color:' + this.value.contentBgColor + ';';
			if (this.value.elementAngle == 'round') {
				css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
			}
			return css;
		}
	},
	methods: {
		previewImg(img) {
			// #ifdef MP-WEIXIN
			uni.previewImage({
				current: 0,
				urls: [this.$util.img(img)],
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
			})
			// #endif
		},
		redirectTo(link) {
			if (link.wap_url) {
				if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
					this.$refs.login.open(link.wap_url);
					return;
				}
			}
			this.$util.diyRedirectTo(link);
		},

		async handlerClick(item) {
			await this.__$emitEvent({
				eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					if (item.link.wap_url) {
						this.redirectTo(item.link);
					} else {
						this.previewImg(item.imageUrl);
					}
				}
			})
		}
	}
};
</script>

<style lang="scss"></style>