<template>
	<!-- 商家详情弹窗 -->
	<u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
		<view class="son-wrap">
			<view class="head">
				{{detailData.name}}
			</view>
			<view style="flex: 1;overflow-y: scroll;">
				<view v-if="detailData.imgList&&detailData.imgList.length>0">
					<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="introduce">
						<view class="middle-title" v-if="detailData.introduce">
							介绍
						</view>
						<!-- <rich-text :nodes="detailData.introduce"></rich-text> -->
						<view v-html="detailData.introduce">
						</view>
						<view class="middle-title" style="margin-top: 20rpx;">
							用时参考
						</view>
						<view>
							建议游玩时长：{{detailData.timeSpent}}
						</view>
					</view>
					<!-- 开放时间 -->
					<view class="opentime">
						<view class="middle-title">开放时间</view>
						<view class="time-list">
							<view v-if="times.length==0">
								{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}
								~{{detailData.businessEnd?detailData.businessEnd.substr(0,5):""}}
							</view>
							<view v-for="(item,index) of times" :key="index" v-else>
								<text v-for="(items,b) of item" :key="b" style="margin-right: 30rpx;">
									{{items}}
								</text>
							</view>
						</view>
					</view>
					<!-- 优待政策 -->
					<view class="policy" v-if="policy">
						<view class="middle-title" style="padding-bottom: 4rpx;">
							{{policy.childTitle}}
						</view>
						<view v-for="(item,index) of policy.contentList" :key="index" style="margin-top: 20rpx;">
							{{item.content}}
						</view>
					</view>
					<!--景区设施 -->
					<view class="facilities" v-if="facilities">
						<view class="middle-title" style="padding-bottom: 4rpx;">
							{{facilities.title}}
						</view>
						<view class="fac-content" v-for="(item,a) of facilities.merchantChildTitleData" :key="a">
							<text class="fac-left">
								{{item.childTitle}}
							</text>
					
							<view class="fac-right">
								<text v-for="(items,b) of item.contentList" :key="b">
									{{items.content}}
								</text>
							</view>
						</view>
					</view>
					<!-- 出行贴士 -->
					<view class="travelTips" v-if="travelTips" @click="navigation()">
						<view class="middle-title" style="padding-bottom: 4rpx;">
							<text style="margin-right: 10rpx;">{{travelTips.title}}</text>
							<u-icon name='map-fill'></u-icon>
						</view>
						<view class="travel-content" v-for="(item,a) of travelTips.merchantChildTitleData" :key="a">
							<text class="travel-left">
								{{item.childTitle}}
							</text>
							<view class="travel-right">
								<text v-for="(items,b) of item.contentList" :key="b">
									{{items.content}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>		
		</view>
	</u-popup>
</template>

<script>
export default {
  props: ['detailData'],
  data() {
    return {
      currentNum:0,//轮播图下标
      showPop: false, //控制弹窗显示隐藏
      times:[], //时间数组
      policy:'', //优待政策列表
      facilities: '', //景区设施
      travelTips: '' //游玩提示
    }
  },
  watch: {
    detailData: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.times = []
          this.policy =''
          this.facilities = ''
          this.travelTips = ''
          if (newValue.merchantTitleData && newValue.merchantTitleData.length > 0) {
            let openTime = ''
            newValue.merchantTitleData.forEach((item) => {
              if (item.titleCode == 'scenic_base_info') {
                //基本信息
                item.merchantChildTitleData.forEach((items) => {
                  if (items.childTitleCode == '101001') {
                    //开放时间
                    openTime = items.contentList
                  }
                  if (items.childTitleCode == '101003') {
                    //优待政策
                    this.policy = items
                  }
                })
              }
              if (item.titleCode == 'scenic_facilities') {
                //景区设施,携程同步的数据没有这个模块
                this.facilities = item
              }
              if (item.titleCode == 'scenic_travel_tips') {
                //游玩贴士,携程同步的数据没有这个模块
                this.travelTips = item
              }
            })
            if (openTime.length > 0) {
              this.times = openTime.map((item) => {
                return item.content.split('；')
              })
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //---导航
    navigation(){
      uni.openLocation({
        latitude:this.detailData.latitude,
        longitude:this.detailData.longitude,
        name:this.detailData.name,
        address:this.detailData.address,
        success: function () {
          
        }
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
	.son-wrap{
		position: relative;
		height:80vh;
		display: flex;
		flex-direction:column;
	}
.head{
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	border-bottom: 1px solid #f5f5f5;
}
.head-name{
	flex: 1;
	text-align: center;
}
.middle{
	padding: 24rpx 24rpx 80rpx 24rpx;
	background: #f5f5f5;
	font-size: 24rpx;
}
.introduce{
	padding: 30rpx 16rpx;
	background: #fff;
}
.middle-title{
	font-size: 30rpx;
	font-weight: bold;
	padding-bottom: 24rpx;
	display: flex;
}
.opentime{
	padding: 30rpx 16rpx;
	background: #fff;
	margin-top: 24rpx;
}
.time-list>view:not(:first-child){
	margin-top: 20rpx;
}
.policy{
	padding: 30rpx 16rpx;
	background: #fff;
	margin-top: 24rpx;
}
.facilities{
	background: #fff;
	margin-top: 24rpx;
	padding: 30rpx 16rpx;
}
.fac-content{
	display: flex;
	margin-top: 20rpx;
}
.fac-left{
	width: 100rpx;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10rpx;
}
.travelTips{
	background: #fff;
	margin-top: 24rpx;
	padding: 30rpx 16rpx;
}
.travel-content{
	display: flex;
	margin-top: 20rpx;
}
.travel-left{
	width: 100rpx;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10rpx;
}
</style>