<template>
	<!-- 商户列表首页 -->
	<view class="wrap">
		<view class="banner">
			<u-swiper :list="list" mode="number" height="350" indicator-pos="topRight"></u-swiper>
		</view>

		<view class="search">
			<view class="search-wrap">
				<view class="search-left">
					重庆
					<view class="line"></view>
				</view>

				<view class="search-right">
					<input class="search-input" placeholder="景区/商品/关键词搜索" v-model="searchData" />
					<text class="search-btn" @click="initList(true)">搜索</text>
				</view>
			</view>
		</view>

		<view class="merchant-wrap">
			<view>
				<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height:100%;width: 100%;">
						<view class="merchant-list" v-for="(item,index) in scenicList" :key='index'>
							<view class="list-left">
								<image :src="item.imgUrl"></image>
							</view>
							
							<view class="list-right">
								<view class="right1">
									{{item.name}}
								</view>
								
								<view class="right2">
									<view class="right2-left">
										<text v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">{{items}}</text>
									</view>
									
									<view class="right2-right">
										距您8km
									</view>
								</view>
								
								<view class="right3">
									<text class="right3-text" v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">
									{{items}}
									</text>
									<text>
										购买须知
										<u-icon name="arrow-right"></u-icon>
									</text>
								</view>
								
								<view class="right4">
									<view class="right4-left">
										已售10W+
									</view>
									
									<view class="right4-right">
										<text class="right4-price1">¥{{parseFloat(item.originalPrice)}}</text>
										<text class="right4-price2">
											¥<text style="font-size: 40rpx;font-weight: bold;">{{parseFloat(item.sellingPrice)}}</text> 
										</text>
										<text style="color: #ccc;">起</text>
									</view>
								</view>
							</view>
						</view>
						<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
					</scroll-view>
					
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<u-empty text="空空如也..." mode="list"></u-empty>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<u-empty text="空空如也..." mode="list"></u-empty>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      scenicList:[],//景区数据
      list: [
        {
          image: 'http://wx.pangdly.com/static/img/test7.6d14c2d.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: 'http://wx.pangdly.com/static/img/test8.1cf812b.jpg',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: 'http://wx.pangdly.com/static/img/test9.b3dd44c.jpg',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }
      ],
      tabList: [{
        name: '热门景点'
      }, {
        name: '本地必吃'
      }, {
        name: '特价酒店'
      }],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      searchData:'',//搜索框的值
    }
  },
  onLoad(option) {
	 this.initList()
  },
  methods: {
    //---tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    //---swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    //---由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    //---加载数据
    initList(click){
      let data = {
        type: 1, //类型：1景区、2酒店、餐饮
        pageIndex:1,//第几页
        pageSize:20, //每页有多少条
      }
      if(click){
        //如果是点击进行搜索
        data.search=this.searchData
      }
      this.$request('scenic/user/merchant/findMerchantList', data).then(res => {
			  if (res.code == '00') {
			    this.scenicList=res.data.list||[]
          this.scenicList.forEach((item, index) => {
            item.tag = item.tag.split(',')
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
}
.search {
	padding: 0 24rpx;
	position: relative;
	top: -40rpx;
}
.search-wrap {
	background: #fff;
	border-radius: 44rpx;
	box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	height: 80rpx;
	padding: 0 20rpx;
}
.search-left {
	display: flex;
}
.line {
	width: 2rpx;
	background: #ccc;
	margin: 0 20rpx;
}
.search-right {
	display: flex;
	flex: 1;
	align-items: center;
}
.search-input {
	flex: 1;
	padding-right: 40rpx;
}
.search-btn {
	background: $blue;
	color: #fff;
	border-radius: 32rpx;
	padding: 12rpx 24rpx;
}
.merchant-wrap{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.swiper-box{
	flex: 1;
}
.merchant-list{
	padding: 0 24rpx;
	margin-top: 32rpx;
	display: flex;
	font-size: 24rpx;
}
.list-left image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 16rpx;
	margin-right: 20rpx;
}
.list-right{
	flex: 1;
	width: 0;
}
.right1{
	width: 100%;
	color: #191919;
	font-weight: bold;
	font-size: 32rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.right2{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
}
.right2-left text{
	color: $blue;
	border: 1px solid $blue;
	font-size: 20rpx;
	padding: 2rpx 4rpx;
	border-radius: 2rpx;
	width: 110rpx;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.right2 text:not(:last-child){
	margin-right: 10rpx;
}
.right2-right{
	color: #999999;
}
.right3{
	margin-top: 16rpx;
}
.right3-text::after{
	display: inline-block;
	content: "";
	height: 20rpx;
	width: 2rpx;
	background: #ccc;
	margin: 0 10rpx;
}
.right4{
	display: flex;
	margin-top: 10rpx;
	justify-content: space-between;
	align-items: center;
}
.right4-left{
	color: $red;
}
.right4-price1{
	 color: #999;
	 text-decoration:line-through;
	 font-size: 28rpx;
}
.right4-price2{
	color: $red;
	margin: 0 10rpx;
}
</style>
