<template>
	<view class="warp">
		<view class="list">
			<view class="item" v-for="(item,index) in images" :key="index" @click.stop="picClick(images,index)">
				<image mode="aspectFill" :src="item.thumb || item.path"></image>
				<view class="shop-del" @tap.stop="shopChoose(item,index)">
					<image class="delimg" :src='STATIC_URL+"shop-del.png"'></image>
				</view>
				<view class="shop-add" v-if="item.checked">
					<view class="">
						<text class="active" @tap.stop="relationShop(item,index,'images')">关联商品</text>
						<text class="lines"></text>
						<text class="active" @tap.stop="del(item,index,'images')">删除图片</text>
					</view>
				</view>
			</view>
			<view class="item" v-if="images.length < 3">
				<image @tap="handleUploadImage('images')" :src='STATIC_URL+"32.png"'></image>
			</view>
		</view>
		<!-- <view class="shop-pic">
      <view class="background-image sure" @tap="sure"> {{ i18n['保存'] }}</view>
    </view> -->




	</view>
</template>
<script>
	import {
		UploadImage
	} from '@/common/utils/index'
	export default {
		data() {
			return {
				images_ids: '',
				images: [],
				index: '',
				count: 3
			}
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['店铺轮播图'])
		},
		onShow() {
			this.getStore()
		},
		methods: {
			//获取店铺信息
			getStore() {
				this.$api.post(global.apiUrls.getShopSwiper).then(res => {
					if (res.data.code == 1) {
						this.images = res.data.data;
						this.images.forEach(item => {
							item.checked = false
						})
					}
					console.log(this.images)
				})
			},
			del(item, index, type) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该轮播图',
					confirmColor: "#FF9300",
					success(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.getDelShopSwiper, {
								aid: item.aid
							}).then(res => {
								that.$message.info(res.data.msg)
								that.images.splice(index, 1)
							})
						}
					}
				})
			},
			shopChoose(item, index) {
				let list = this.images;
				this.images[index].checked = !this.images[index].checked;
				list = list.map((item, i) => {
					if (i == index) {
						item.checked = item.checked;
					} else {
						item.checked = false;
					}
					item.checked = item.checked;
					return item;
				})
				this.images = list
				console.log(this.images)
			},
			picClick(item, index) {
				console.log(item)
				uni.previewImage({
					urls: item,
					current: index
				});
			},
			relationShop(item, index) {
				uni.navigateTo({
					url: '/pages/md/associatedGoods/associatedGoods?thumb=' + item.thumb + '&id=' + item.aid
				})
			},
			// 上传图片
			handleUploadImage(imgtype) {
				let that = this;
				uni.chooseImage({
					count: 1, // 默认3
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImage(res.tempFiles, {
							complete: function(res) {
								console.log(res);
								that[imgtype].push(...res);
								that.sure(res[0].path)
							},
						})

					}
				});
			},
			sure(character) {
				let that = this;
				console.log(character)
				that.$api.post(global.apiUrls.getAddShopSwiper, {
					thumb: character,
				}).then(res => {
					that.$message.info(res.data.msg)
					that.getStore()
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;

		.list {
			width: 686rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.item {
				margin-top: 30rpx;
				position: relative;

				.shop-del {
					width: 52rpx;
					height: 52rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					border-radius: 50%;

					.iconfont {
						font-size: 20rpx;
						color: #fff;
					}
				}

				.shop-add {
					width: 136rpx;
					height: 122rpx;
					position: absolute;
					top: 76rpx;
					right: 16rpx;
					background: #fff;
					box-shadow: 0px 3px 24px 1px rgba(153, 153, 153, 0.16);

					view {
						width: 136rpx;
						height: 122rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						font-size: 24rpx;

						.active {
							display: block;
							height: 64rpx;
							line-height: 64rpx;
						}

						.lines {
							width: 104rpx;
							height: 0px;
							border-bottom: 1rpx solid #FFFFFF;
							opacity: 0.12;
						}
					}
				}
			}

			image {
				width: 334rpx;
				height: 250rpx;
				border-radius: 8rpx;
			}

			.delimg {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.shop-pic {
			width: 702rpx;
			height: 400rpx;
			margin: 0 auto;

			image {
				width: 702rpx;
				height: 400rpx;
			}

			.background-image {
				width: 686rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #fff;
				position: fixed;
				bottom: 64rpx;
				left: 32rpx;
				background: linear-gradient(126deg, #FFB037 0%, #FE6304 100%);
				border-radius: 100rpx;
			}

			.sure {
				bottom: 184rpx;
			}
		}
	}
</style>
