<template>
	<view>

		<uni-swipe-action>
			<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> -->
				<view class="searchshop commnonpadding">

					<view class="searchgooditem flex boxsizing">
						<view class="shopleftimg">
							<image src="../../static/shop.png" mode=""></image>
						</view>
						<view class="shopright">
							<view class="shopname">湖北省南阳市南阳面粉厂</view>
							<view class="shopmiddle flexone">
								<view class="shopmiddleleft">
									8.2
								</view>
								<view class="shopmiddleright">
									<view class="star flex">
										<view class="starimg">
											<image src="../../static/shixing.png" mode=""></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode=""></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode=""></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode=""></image>
										</view>
										<view class="starimg">
											<image src="../../static/kongxing.png" mode=""></image>
										</view>
									</view>
									<view class="haoping">好评率96%</view>
								</view>
							</view>
							<view class="shopdizhi flexone">
								<view class="shopdiimg">
									<image src="../../static/shopaddress.png" mode=""></image>
								</view>
								<view class='shopli'>距离256km</view>
							</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	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
			})
		},
		methods: {
			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, index) {
				console.log(e)
				
				let {
					content
				} = e
				// if (content.text === '删除') {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '是否删除',
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				// console.log('88888')
				// 				this.swipeList.splice(index, 1)
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// } else if (content.text === '添加') {
				// 	if (this.swipeList.length < 10) {
				// 		this.swipeList.push({
				// 			id: new Date().getTime(),
				// 			options: [{
				// 				text: '置顶'
				// 			}, {
				// 				text: '标记为已读',
				// 				style: {
				// 					backgroundColor: 'rgb(254,156,1)'
				// 				}
				// 			}, {
				// 				text: '删除',
				// 				style: {
				// 					backgroundColor: 'rgb(255,58,49)'
				// 				}
				// 			}],
				// 			content: '新增'
				// 		})
				// 		uni.showToast({
				// 			title: `添加了一条数据`,
				// 			icon: 'none'
				// 		})
				// 	} else {
				// 		uni.showToast({
				// 			title: `最多添加十条数据`,
				// 			icon: 'none'
				// 		})
				// 	}
				// } 
					console.log('777889789')
					uni.showToast({                                                                                               
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					})
				

			}
		}
	}
</script>

<style>
	@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>