<template>
	<view class="px32">
		<view class="bg-white br16 p24 row u-m-t-32">
			<view>
				<u-image :src="cloudPath + 'img/banner.png'" width="260" height="172"></u-image>
			</view>
			<view class="ml20 flex1">
				<view class="nr bold-600">煎饼果子</view>
				<view class="text-999 mt10">周一指周日可用</view>
				<view class="mt20 row-between">
					<view class="row">
						<view class="primary">
							<price-format :price="12.9" :subscriptSize="22" :firstSize="40" :secondSize="32"></price-format>
						</view>
						<view class="u-m-l-8">
							<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="24" :secondSize="24" :price="16.9"></price-format>
						</view>
					</view>
					<view class="num nr">X1</view>
				</view>
			</view>
		</view>
		
		<view class="bg-white br16 p24 u-m-t-32">
			<view>
				备注
			</view>
			<view class="flex1 u-m-t-16 mask">
				xxxx
			</view>
		</view>
		
		<view class="bg-white br16 p24 u-m-t-32 nr row-between" @click="appointmentTime">
			<view>预约时间</view>
			<view class="row">
				<view class="u-m-r-10">16:00-16:30</view>
				<u-icon name="arrow-right" size="32"></u-icon>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
			<view class="bg-white br16 p24 u-m-t-32 nr">
				<view class="row-between">
					<view class="row-center">
						<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
						<view class="u-m-l-16 lg">微信</view>
					</view>
					
					<view class="flex1 row-end">
						<u-radio-group v-model="pay.weixin">
							<u-radio shape="circle" :active-color="themeColor"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		<!-- #endif -->
			
		<!-- #ifdef MP-ALIPAY -->
			<view class="bg-white br16 p24 u-m-t-32 nr">
				<view class="row-between">
					<view class="row-center">
						<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
						<view class="u-m-l-16 lg">支付宝</view>
					</view>
					
					<view class="flex1 row-end">
						<u-radio-group v-model="pay.alipay">
							<u-radio shape="circle" :active-color="themeColor"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		<!-- #endif -->
		
		<view class="fixed bg-white row-between px48 u-padding-top-20 u-padding-bottom-20">
			<view class="column u-text-center">
				<view class="row-center">
					<text class="count">共1件</text>
					<text class="u-m-l-8">合计：</text>
					<view class="primary">
						<price-format :price="12.9" :subscriptSize="34" :firstSize="56" :secondSize="34"></price-format>
					</view>
				</view>
			</view>
			<view class="u-m-l-64 flex1">
				<u-button hover-class="none"
					:customStyle="{height: '92rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" 
					:hair-line="false" 
					shape="circle">
						去支付
				</u-button>
			</view>
		</view>
		<appointment-time v-model="timePopup" @close="timePopup = false" @update="handleSubmitMobile"/>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				timePopup: false,
				pay: {
					weixin: 0,
					alipay: 0
				}
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			this.pay.weixin = 1
			//#endif
			
			//#ifdef MP-ALIPAY
			this.pay.alipay = 1
			//#endif
		},
		methods: {
			appointmentTime() {
				this.timePopup = true
			}
		}
	}
</script>

<style lang="scss">
	.num {
		color: #4E5969;
	}
	
	.mask {
		color: #86909C;
	}
	
	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.count {
		color: #86909C;
	}
</style>