<template>
	<view class="bigBox">
		<view class="time">
			{{time}}
		</view>
		<view class="middle">
			<view class="title">
				<image  src="../../../static/img/common/pangdingLogo.png"  class="logo">
					
				</image>
				
				<view class="title-right">
					<view>胖丁</view>
					<view class="title-right-bottom">亲爱的用户，很高兴为您服务!</view>
				</view>
			</view>
			
			<view class="scenic">
				<image  src="../../../static/img/common/pangdingLogo.png"  class="logo">
					
				</image>
				
				<view class="scenic-right">
					<view>胖丁</view>
					<view class="scenic-content">
						<view class="scenic-title">
							常见问题回复
						</view>
						<view class="scenic-total">
							<view v-for="(item,index) in scenicList" :key="index" @click="scenicClick(index)" :class="{on:active==index}">
								<text>{{item.merchantName}}</text>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="question">
				<image  src="../../../static/img/common/pangdingLogo.png"  class="logo">
					
				</image>
				
				<view class="question-right">
					<view>胖丁</view>
					<view class="question-content">
						<view class="question-title">
							{{merchantName}}
						</view>
						<view class="question-total">
							<view class="question-list" v-for="(item,index) in scenicQuestion" :key='index'>
								<view>
									问：{{item.merchantQuestion}}
								</view>
								<view>
									答：{{item.merchantAnswer}}
								</view>
							</view>
							<view style="margin-top: 30rpx;">
								<view>如需咨询其他问题，请拨打电话</view>
								<view @click="phoneCall()" style="color: rgb(55, 136, 255);font-weight: bold;">
									{{scenicTelephone}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
  data() {
    return {
      time:'',//时间
      scenicList:[],//景区列表
      scenicQuestion:[],//选中景区答案
      merchantName:'',//选中的景区
      scenicTelephone:'',//景区电话号码
      active:0,//选中下标
    }
  },
  onLoad() {
    this.getTime()
    this.getQuestion()
  },
  methods: {
    //---获取时间
    getTime(){
      let timer=new Date()
      let hour=timer.getHours()
      let minute=timer.getMinutes()
      if(minute<10){
        minute='0'+minute
      }
      this.time=hour+':'+minute
    },
    //---获取问题
    getQuestion(){
      let data={
        pageSize:99999
      }
      this.$request('scenic/productConfig/findScenicQuestion',data).then(res => {
			  if (res.code == '00') {
			    this.scenicList=res.data.list
          this.scenicQuestion=this.scenicList[0].questions
          this.merchantName=this.scenicList[0].merchantName
          this.scenicTelephone=this.scenicList[0].scenicTelephone
			  } else {
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
			
    },
    //---景区点击切换
    scenicClick(index){
      this.active=index
      this.scenicQuestion=this.scenicList[index].questions
      this.merchantName=this.scenicList[index].merchantName
      this.scenicTelephone=this.scenicList[index].scenicTelephone
    },
    //---拨打电话
    phoneCall(){
      uni.makePhoneCall({
        phoneNumber:this.scenicTelephone //仅为示例
      })
    },
  }
}
</script>

<style lang="scss">
	.bigBox{
		color: #666666;
	}
.time{
	text-align: center;
	margin: 30rpx 0;
	font-size: 28rpx;
}
.logo{
	width:72rpx;
	height:72rpx;
}
.middle{
	padding: 0 30rpx;
}
.title{
	display: flex;
}
.title-right{
	padding-left: 30rpx;
	flex: 1;
}
.title-right-bottom{
	background: #ffffff;
	padding: 20rpx;
	border-radius:10rpx;
	margin-top: 10rpx;
}
.scenic,.question{
	margin-top: 30rpx;
	display: flex;
}
.scenic-right,.question-right{
	padding-left: 30rpx;
	flex: 1;
}
.scenic-content,.question-content{
	background: #ffffff;
	margin-top: 10rpx;
	border-radius: 10rpx;
}
.scenic-title,.question-title{
	font-size: 30rpx;
	color: #191919;
	font-weight: bold;
	padding: 20rpx;
	border-bottom: 1px solid #f5f5f5;
}
.scenic-total{
	padding: 0rpx 20rpx 20rpx 20rpx;
	>view{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
}
.scenic-total .on{
	color: rgb(55, 136, 255);
}
.question{
	padding-bottom: 60rpx;
}
.question-total{
	padding: 0rpx 20rpx 20rpx 20rpx;
}
.question-list{
	margin-top: 20rpx;
	>view{
		margin-top: 10rpx;
	}
	:first-child{
		color: #191919;
		font-weight: bold;
	}
}
	
</style>