<template>
	<view style="width: 100%;height: 100%;background-color: #F6F6F6;">
		<!-- 表单弹窗 -->
		<u-popup v-model="formshow" mode="center" border-radius="14" :closeable="false">
			<view style="width: 75vw;height: 60vh">
				<view class="flex justify-center align-center" style="height: 15%;font-size: 34rpx;font-weight: bold;">填写意见单</view>
				<view style="height: 70%;padding: 0 30rpx;">
					<view class="flex align-center" style="margin-bottom: 10rpx;">
						<text style="margin-right: 20rpx;">病症:</text>
						<input placeholder="请填写病症名称" @blur="bzblur" style="border-bottom: 1rpx solid #666666;"/>
					</view>
					<view class="flex align-center" style="margin-bottom: 10rpx;">
						<text style="margin-right: 20rpx;">病因:</text>
						<input placeholder="请填写患病因素" @blur="byblur" style="border-bottom: 1rpx solid #666666;"/>
					</view>
					
				</view>
			</view>
		</u-popup>
		
		<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" v-if="zl ==1 ">电话咨询</view>
					<view class="but" v-else-if="zl ==2 ">图文咨询</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" v-if="zl == 1">
					<view class="left">拨打时间:</view>
					<view class="right">{{callTime}}</view>
				</view>
				<view class="nr" v-if="zl == 2">
					<view class="left">病情描述:</view>
					<view class="right">{{ms}}</view>
				</view>
				<view class="nr" v-if="zl ==2">
					<view class="left">图片:</view>
					<view class="right">
						<image style="width: 124rpx;height: 124rpx;margin-right: 10rpx;" :src="photo1"></image>
						<image style="width: 124rpx;height: 124rpx;margin-right: 10rpx;" :src="photo2"></image>
					</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">{{receivingTime}}</view>
			</view>
			<view class="nr">
				<view class="left">订单状态:</view>
				<view class="right" v-if="zt==1">未接单</view>
				<view class="right" v-else-if="zt==2">进行中</view>
				<view class="right" v-else-if="zt==3">已完成</view>
				<view class="right" v-else>已取消</view>
			</view>
		</view>
		<!-- 上面都是相同的 电话咨询下面需要添加通话记录 且已经接单-->
		<view v-if="zl == 1&&!(zt==1)" style="margin-bottom: 100rpx;">
			<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;" v-for="item,index in callList " :key='index'>
				<view class="nr">
					<view class="left" style="font-weight: bold;">{{item.frequency}}</view>
					<view class="right"></view>
				</view>
				<view class="nr">
					<view class="left">拨打时间:</view>
					<view class="right">{{item.start}}</view>
				</view>
				<view class="nr">
					<view class="left">结束时间:</view>
					<view class="right">{{item.end}}</view>
				</view>
				<view class="nr">
					<view class="left">通话时长:</view>
					<view class="right">{{item.duration}}</view>
				</view>
			</view>
		</view>
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 底部按钮 -->
		<!-- 当订单状态为未接单  zt==1 -->
		<view class="bottomButton" v-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" @click="queren">确认订单</u-button>
				</view>
			</view>
		</view>
		<!-- 当订单状态为  zt==1 -->
		<view class="bottomButton" v-else-if="zt == 2">
			<!-- 左边的首页按钮 -->
			<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="bStyle" @click="huihu">发起会话</u-button>
				</view>
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="formshow = true">完成订单</u-button>
				</view>
			</view>
		</view>
		<!-- 当订单状态为未接单  zt==1 -->
		<view class="bottomButton" v-else-if="zt ==3">
			<!-- 左边的首页按钮 -->
			<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="bStyle" @click="huihua">会话记录</u-button>
				</view>
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="ckyj">查看意见</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.photo1 = 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png' //证件照
			this.photo2 = 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png' //证件照
			this.placeTime = '2020年10月28日11:35:06' //下单时间
			this.receivingTime = '' //接单时间
		},
		mounted() {

		},
		data() {
			return {
				/**********************      图文咨询，包括某些电话咨询      *********************/
				// 上部数据
				orderID: 'ZX202000010', //订单号
				zl: 1, //种类  1电话咨询 2图文咨询

				//中部数据
				name: '张一', //名字
				age: '一岁零2个月', //年龄
				ID: '513021198904041789', //身份证
				//病情描述
				ms: '病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述病情描述。',
				photo1: '', //证件照
				photo2: '', //证件照

				//下部数据
				placeTime: '', //下单时间
				receivingTime: '', //接单时间
				xiadankh: '张大', //下单客户
				zt: 1, // 状态
				// 1未接单	
				// 2进行中   显示未会话
				// 3已完成	
				// 4已取消
				//底部按钮样式
				/*********************     电话咨询必要数据          *****************************/
				callTime: '', //拨打时间
				callList: [{
					frequency: '通话5', //次数
					start: '2020年10月29日13:27:18', //开始时间
					end: '2020年10月29日13:27:33', //结束时间
					duration: '03:28:37', //通话时长
				}, {
					frequency: '通话4', //次数
					start: '2020年10月29日13:27:18', //开始时间
					end: '2020年10月29日13:27:33', //结束时间
					duration: '03:28:37', //通话时长
				}, {
					frequency: '通话3', //次数
					start: '2020年10月29日13:27:18', //开始时间
					end: '2020年10月29日13:27:33', //结束时间
					duration: '03:28:37', //通话时长
				}, {
					frequency: '通话2', //次数
					start: '2020年10月29日13:27:18', //开始时间
					end: '2020年10月29日13:27:33', //结束时间
					duration: '03:28:37', //通话时长
				}, {
					frequency: '通话1', //次数
					start: '2020年10月29日13:27:18', //开始时间
					end: '2020年10月29日13:27:33', //结束时间
					duration: '03:28:37', //通话时长
				}],

				//下部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				},
				//表单
				formshow:false,//提交表单弹窗
				bz:'',//病症
				by:'',//病因
				jl:''//结论
			}
		},
		methods: {
			// 确认订单
			queren(e) {
				this.zt = 2
			},
			//完成订单
			
			wancheng(e) {
				this.zt = 3
			},
			//发起会话
			huihua(e){
				
			},
			//查看意见
			ckyj(e){
				
			},
			//首页
			home(e){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//病症提交
			bzblur(e){
				e.datail.value = this.bz
			},
			byblur(e){
				e.datail.value = this.by
			},
		
		}
	};
</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>
