<template>
	<view>
		<view class="banner" v-if="detailData">
			<u-swiper :list="detailData.imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
				<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{detailData.imgList.length}}</text>
				</view>
			</u-swiper>
		</view>
		<view class="middle">
			<view class="middle-introduce">
				<view class="introduce-one">
					<view class="merchantname">
						重庆湖广会馆
					</view>
					<view class="businesstime">
						<view style="font-size: 24rpx;">
							<text style="color: #3688ff;margin-right: 20rpx;">开园中</text>
							<text style="color: #999;">09:00~18:30</text>
						</view>
						<view style="display: flex;">
							<text>详情</text>
							<u-icon name='arrow-right'></u-icon>
						</view>
					</view>
				</view>
				<view class='introduce-two'>
					<text>
						5分
					</text>
					<text>
						0条好评
					</text>
				</view>
				
				<view class="introduce-three">
					<view style="flex: 1;margin-right: 20rpx;">
					重庆市市辖区渝中区联合国际大厦
					</view>
					<view class="introduce-icon">
						<u-icon name='map-fill' color='#3688ff' size='44'></u-icon>
						<text></text>
						<u-icon name='phone-fill' color='#3688ff' size='44'></u-icon>
					</view>
				</view>
			</view>
			
			<view class="middle-list">
				<view>
					<view>
						景区门票
					</view>
					<view>
						<text>无需换票</text>
						<text></text>
						<text>随时可退</text>
					</view>
				</view>
				
				<view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
  data() {
    return {
      ticketList:[],//门票列表
      detailData:'',//详情数据
      currentNum:0,//轮播图下标
    }
  },
  onLoad(option) {
    this.nowTime=parseInt(new Date().Format('hhmm'))
    this.companyId=this.$commonjs.getCompanyId(option)||''
    this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
    this.channelType = this.$commonjs.getKey(option,'channelType')|| 0
    this.initProduct()
    this.initDetail()
  },
  methods: {
    //---产品加载
    initProduct(){
      this.ticketList=[]
      let data={
        merchantId:this.merchantId,//商户id
        type:1,//类型：1景区、2酒店、3餐饮
        channelType:this.channelType,//渠道Id
      }
      this.$request('scenic/user/product/findProductList',data).then((res)=>{
        if(res.code=='00'){
          let list=res.data.list||[]
          list.forEach((item,index)=>{
            //营业时间重新组成
            if(item.businessTime){
              item.businessTime=item.businessTime.split(';')
            }
            //等于7为特价
            if(item.channelType!=7){
              this.ticketList.push(item)
            }
          })
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    //---详情加载
    initDetail(){
      let data={
        userId:uni.getStorageSync('userId')||'',
        openid:uni.getStorageSync('openid')||'',
        id:this.merchantId,//商户id
        isDetail:1,//商户详情
      }
      this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
        if(res.code=='00'){
          this.detailData=res.data
          if(this.detailData.tag){
            this.tagArr=this.detailData.tag.split(',')
          }
          let start=''
          let end=''
          if(this.detailData.businessStart){
            start=parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0,5)))
          }
          if(this.detailData.businessEnd){
            end=parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0,5)))
          }
          if(start<this.nowTime<end){
            this.status='开园中'
          }else{
            this.status='闭园中'
          }
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
    
      })
    },
  }
}
</script>

<style scoped lang="scss">
.middle{
	position: relative;
	top: -40rpx;
}
.middle-introduce{
	background: #FFFFFF;
	padding: 30rpx 20rpx 0 20rpx;
	border-radius: 24rpx 24rpx 0 0;
}
.introduce-one{
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 20rpx;
}
.merchantname{
	font-size:30rpx;
	font-weight: bold;
}
.businesstime{
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.introduce-two{
	border-bottom: 1px solid #e5e5e5;
	padding: 20rpx 0;
	font-size: 24rpx;
}
.introduce-two text:first-child{
	color:$red;
	font-weight: bold
}
.introduce-two text:first-child::after{
	display: inline-block;
	width: 2rpx;
	height: 20rpx;
	background: #999999;
	content: '';
	margin: 0 10rpx;
}
.introduce-two text:last-child{
	color:#999999;
}
.introduce-three{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	color: #666666;
	font-size: 24rpx;
	align-items: center;
}
.introduce-icon{
	display: flex;
	align-items: center;
}
.introduce-icon text{
	display: inline-block;
	margin: 0 12rpx;
	width: 1px;
	background: #e5e5e5;
	height: 30rpx;
}
.middle-list{
	background: #FFFFFF;
	margin-top: 20rpx;
}
</style>