<template>
	<!-- 客服 -->
	<u-popup :show="showPop" :round="20" @close="showPop = false">
		<view class="son-wrap">
			<view class="title">
				<view style="flex: 1; text-align: center"> 客服电话 </view>
				<u-icon name="close" @click="showPop = false"></u-icon>
			</view>
			<view class="middle">
				<view class="list" v-for="(item, index) in scenicList" :key="index" @click="makePhone(item.phone)">
					<text> {{ item.name }}: </text>
					<text>
						{{ item.phone }}
					</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
  props: ['scenicList'],
  data() {
    return {
      showPop: false //控制弹窗显示隐藏
    }
  },
  methods: {
    //---拨打电话
    makePhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      })
    }
  }
}
</script>

<style scoped lang="scss">
.son-wrap {
	position: relative;
	height: 65vh;
	display: flex;
	flex-direction: column;
}
.title {
	display: flex;
	font-size: 32rpx;
	font-weight: bold;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
}
.middle {
	flex: 1;
	overflow-y: scroll;
}
.list {
	height: 100rpx;
	border-bottom: 1px solid #e6e6e6;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
