<template>
	<view>
		<view class="nodata" v-if="swipeList.length==0">
			暂无数据
		</view>

		<uni-swipe-action v-else>
			<uni-swipe-action-item v-for="(item,index) in swipeList" :options="item.options" :key="item.id" @change="swipeChange"
			 @click="swipeClick($event,index,)">
				<!-- <text class="cont">{{item.content}}</text> -->
				<!-- @click="swipeClick($event,index)" -->
				<view class="searchshop commnonpadding" @click.stop="shopdetail" :data-id="item.store_id">
					<view class="searchgooditem flex boxsizing">
						<view class="shopleftimg">
							<image :src="item.store.image" mode=""></image>item
						</view>
						<view class="shopright">
							<view class="shopname">{{item.store.name}}</view>
							<view class="shopmiddle flexone">
								<view class="shopmiddleleft">
									{{item.store.score}}
								</view>
								<view class="shopmiddleright">
									<view class="star flex">
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.store.star>=2"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.store.star>=4"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.store.star>=6"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.store.star>=8"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.store.star>=10"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
									</view>
									<view class="haoping">好评率{{item.store.probability}}%</view>
								</view>
							</view>
							<view class="shopdizhi flexone">
								<view class="shopdiimg">
									<image src="../../static/shopaddress.png" mode=""></image>
								</view>
								<view class='shopli'>距离{{item.store.distance}}km</view>
							</view>
						</view>
					</view>
				</view>

			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniSection,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {

				swipeList: [{
					id: 1,
					options: [{
						text: '取消收藏',
						style: {
							backgroundColor: '#DAD7DB'
						}
					}],
					content: 'item2'
				}, ]

			}
		},
		onReady() {
			this.$nextTick(() => {
				this.isOpened = true
			})
			// 获取店铺收藏列表
			this.getcollectshop()
		},
		methods: {
			// 获取收藏店铺
			getcollectshop() {
				let that = this;
				var url = 'store/collect_list';
				var params = {

				}
				console.log(params)
				app.post(url, params).then((res) => {
					let shoplist = res.data.data;
					shoplist.forEach(function(value, index, array) {
						value.options = [{
							text: '取消收藏',
							style: {
								backgroundColor: '#DAD7DB'
							},
							id: value.store_id
						}]
					})
					that.swipeList = shoplist;
					this.$forceUpdate()
					console.log(that.swipeList)
					console.log(res)

				}).catch((err) => {
					console.log(err)
				})
			},
			// 店铺详情
			shopdetail(e) {
				console.log(33493490)
				let id = e.currentTarget.dataset.id;
				console.log(id)
				uni.navigateTo({
					url: '/pages/nearshop/shopdetail?shopid=' + id
				})
			},
			bindClick(e) {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				})
			},
			setOpened() {
				this.isOpened = !this.isOpened
			},
			change(e) {
				this.isOpened = e
				console.log('返回：', e);
			},
			swipeChange(e) {
				console.log('返回：', e);
			},
			swipeClick(e, indexitem) {
				console.log(e)

				let that = this;
				var url = 'store/collect';
				var params = {
					store_id:e.content.id
				}
				console.log(params)
				app.post(url, params).then((res) => {
					uni.showToast({
						title:'取消收藏成功',
						icon:"none"
					})
					
					that.getcollectshop()

				}).catch((err) => {
					console.log(err)
				})




			}
		}
	}
</script>

<style>
	.nodata{
		margin-top:140rpx;
	}
	@import url('../../base/homepage');

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		/* src: url('~@/static/uni.ttf') format('truetype'); */
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.cont {
		flex: 1;
		height: 45px;
		line-height: 45px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		font-size: 15px;
		border-bottom-color: #F5F5F5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}
</style>