<template>
	<view style="width: 100%;height: 100%;background-color: #F6F6F6;">
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<view style="padding: 20rpx 28rpx;background-color: #FFFFFF;">
			<!-- 头部 -->
			<view class="flex align-center" style="font-weight: bold;font-size: 30rpx;margin:30rpx 0;">
				<view style="width: 25%;">订单号:</view>
				<view style="width: 50%;">{{orderID}}</view>
				<view style="width: 25%;" class="flex justify-center">
					<view class="but" >门诊预约</view>
				</view>
			</view>
			<!-- 线 -->
			<u-line color="#EFEFEF" />
			<!-- 中部内容 -->
			<view style="font-size: 26rpx;background-color: #FFFFFF;">
				<view class="nr">
					<view class="left">患者:</view>
					<view class="right">{{name}}</view>
				</view>
				<view class="nr">
					<view class="left">年龄:</view>
					<view class="right">{{age}}</view>
				</view>
				<view class="nr">
					<view class="left">身份证号:</view>
					<view class="right">{{ID}}</view>
				</view>
				<view class="nr">
					<view class="left">预约时间:</view>
					<view class="right">{{appointment}}</view>
				</view>
				<view class="nr">
					<view class="left">门诊机构:</view>
					<view class="right">{{local}}</view>
				</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 客户资料 -->
		<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;">
			<view class="nr">
				<view class="left">下单时间:</view>
				<view class="right">{{placeTime}}</view>
			</view>
			<view class="nr">
				<view class="left">下单客户:</view>
				<view class="right">{{xiadankh}}</view>
			</view>
			<view class="nr">
				<view class="left">订单状态:</view>
				<view class="right" v-if="zt==0">未履行</view>
				<view class="right" v-else-if="zt==1">已完成</view>
			</view>
		</view>
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 底部按钮 -->
		<!-- 当订单状态为未接单  zt==0 -->
		<view class="bottomButton" v-if="zt == 0">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="queren">确认订单</u-button>
				</view>
			</view>
		</view>
		<!-- 当订单状态为  zt==1 -->
		<view class="bottomButton" v-else-if="zt == 1">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" :disabled="true">已完成</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
		},
		mounted() {

		},
		data() {
			return {
				// 上部数据
				orderID: 'ZX202000010', //订单号

				//中部数据
				name: '张一', //名字
				age: '一岁零2个月', //年龄
				ID: '513021198904041789', //身份证
				appointment:'2020年10月29日16:34:34',
				//下部数据
				placeTime: '', //下单时间
				xiadankh: '张大', //下单客户
				zt: 0, // 状态 0未履行 1已完成
				
				//下部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				}
			}
		},
		methods: {
			// 确认订单
			queren(e) {
				this.zt = 1
			},
			home(e){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.but {
		padding: 16rpx 30rpx;
		border-radius: 20rpx;
		background-color: #eaeaea;
		height: 50rpx;
		color: b1b1b1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
	}

	.nr {
		margin: 28rpx 0;
		display: flex;

		.left {
			width: 25%;
			color: #666666;
		}

		.right {
			width: 75%;
		}
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		z-index: 1;

		.b {
			/*按钮样式*/
			margin-right: 30rpx;
			padding: 20rpx 0rpx;
			height: 100%;
			width: 150rpx;
		}
	}
</style>
