<template>
	<!-- 20221216 -->
	<view class="project-call-layer-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 有效商品 -->
			<ty-layer-pop-up v-if="show" @overlayClick="close">
				<view class="layer-content padding-top-50 radius-20 bg-ff text-center" @click.stop="">
					<view class="text-34 text-bold text-33">拨打客服热线</view>
					
					<view class="margin-top-45 text-26 text-1a">客服在线时间为</view>
					
					<view class="margin-top-20 text-32 text-bold text-1a">{{serviceTime}}</view>
					<view class="margin-top-60 margin-lr-65 flex align-center justify-between">
						<view class="btn line-btn" @click="close">取消</view>
						<view class="btn full-btn" @click="call">确认</view>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: { //是否显示浮层
				type: Boolean,
				default: false
			},
			serviceTime: {
				type: String,
				default: ''
			},
			serviceHotLine: {
				type: String,
				default: ''
			}
		},
		methods: {
			/**
			 * 关闭浮层
			 */
			close() {
				this.$emit("update:show", false)
			},
			
			/**
			 * 拨打电话
			 */
			call(){
				this.cn.callPhone(this.serviceHotLine)
			}
		}
	}
</script>

<style scoped>
	.layer-content {
		position: fixed;
		left: 75rpx;
		top: calc(50vh - 220rpx);
		width: 600rpx;
		height: 440rpx;
	}
	
	.btn{
		width: 220rpx;
		height: 60rpx;
		line-height: 56rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}
	
	.line-btn {
		border: 2rpx solid var(--main);
		color: var(--main);
	}
	
	.full-btn {
		background: linear-gradient(to right, var(--main), var(--mainGradient));
		border: 2rpx solid var(--main);
		color: #fff;
	}
</style>
