<template>
	<view style="width: 100%;height: 100%;">
		<view class="header-content">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/mybanner.png" style="width:100%;height:260rpx;"></image>
		</view>
		<view style="padding: 50rpx 30rpx;">
			<!-- 头像 名字 按钮 -->
			<view class="flex" style="margin-bottom: 50rpx;">
				<!-- 头像 -->
				<view style="width: 20%;display: flex;align-items: center;">
					<image :src="img" mode="aspectFit" style="height: 100rpx;width: 100rpx;border-radius: 50%;"></image>
				</view>
				<!-- 名字 -->
				<view style="width: 52%;color: #FFFFFF;display: grid;align-items: center;">
					<view style="font-weight: bold;font-size: 36rpx;">{{name}}</view>
					<view style="font-size: 26rpx;">{{bz}}</view>
				</view>
				<!-- 按钮 -->
				<view style="width: 25%;display: flex;align-items: center;">
					<u-button shape="circle" :custom-style="customStyle" :hair-line="false">设置备注</u-button>
				</view>
			</view>
			<!-- 用户资料 -->
			<view class="zl">
				anges...
				16:31:10.759 项目 'dortor' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
				16:31:33.184 开始差量编译...16:31:10.394 开始差量编译...
				16:31:10.756 DONE Build complete. Watching for changes...
				16:31:10.759 项目 'dortor' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
				16:31:33.184 开始差量编译...
			</view>
			<!-- 已购服务 -->
			<view>
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">已购服务</view>
				<view v-for="(item,index) in tclist" :key="index" style="margin-bottom: 20rpx;">
					<view class="taocan">
						<view class="tc_left">
							{{item.id}}
						</view>
						<view class="tc_right">
							<view>
								<view style="margin-bottom: 20rpx;">{{item.fw}}</view>
								<view style="margin-bottom: 30rpx;">{{item.dd}}</view>
								<view>有效期:{{item.startTime}}至{{item.endTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 历史问诊 -->
			<view style="margin-bottom: 50rpx;">
				<!-- 标题 -->
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">历史问诊</view>
				<!-- 卡片 -->
				<view class="lswz_card" v-for="(ritem,index) in recordlist" :key="index">
					<!-- 上部分 完成 问诊渠道-->
					<view style="display: flex;margin-bottom: 25rpx;">
						<view style="width: 80%;display: flex;color: #666666;align-items:center;">
							<!-- 小点 -->
							<view style="height: 12rpx;width: 12rpx;background-color: #666666;border-radius: 50%;margin: 0 10rpx;"></view>
							<!-- true为已完成 false未完成 -->
							<text v-if="ritem.complete">已完成</text>
							<text v-else>未完成</text>
						</view>
						<view style="width: 20%;">
							<u-button size="mini" shape="circle">门诊预约</u-button>
						</view>
					</view>
					<u-line color="#EFEFEF" />
					<!-- 下部分 资料 -->
					<view style="margin-top: 15rpx;">
						<view style="font-size: 26rpx;">
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">患者:</view>
								<view style="width: 80%;">{{ritem.name}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">年龄:</view>
								<view style="width: 80%;">{{ritem.age}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">订单号:</view>
								<view style="width: 80%;">{{ritem.orderID}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">下单时间:</view>
								<view style="width: 80%;">{{ritem.xdTime}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">结束时间:</view>
								<view style="width: 80%;">{{ritem.jsTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 患者档案 -->
			<view style="margin-bottom: 200rpx;">
				<!-- 标题 -->
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">患者档案</view>
				<!-- 列表 -->
				<view class="hzda_list" v-for="(ditem,index) in dalist" @click="clickda" :key='index' :data-index="index">
					<!-- 头像 -->
					<view class="flex align-center justify-start " style="width: 18%;">
						<image :src="ditem.img" style="height: 72rpx;width: 72rpx;border-radius: 50%;"></image>
					</view>
					<!-- 信息 -->
					<view style="width: 70%">
						<view style="font-size: 30rpx;color: #333333;font-weight: bold;">{{ditem.name}}</view>
						<view style="color: #999999;font-size: 26rpx;">
							<text style="margin-right: 20rpx;" v-if="ditem.sex == 0">未知</text>
							<text style="margin-right: 20rpx;" v-else-if="ditem.sex == 1">男</text>
							<text style="margin-right: 20rpx;" v-else>女</text>
							<text>{{ditem.age}}</text>
						</view>
					</view>
					<!-- 箭头 -->
					<view class="flex align-center justify-end" style="width: 10%;">
						<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="bottomButton">
			<view class="b">
				<u-button shape="circle" :custom-style="bStyle">电话随访</u-button>
			</view>
			<view class="b">
				<u-button shape="circle" :custom-style="btStyle" v-if="!guanzhu" @click="gzclick">关注</u-button>
				<u-button shape="circle" :custom-style="bfStyle" v-else @click="gzclick">已关注</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		mounted() {

		},
		data() {
			return {
				guanzhu: false,
				//底部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				},
				bfStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#ffffff',
					backgroundColor: '#0B73B9'
				},
				//收藏按钮样式
				customStyle: {
					width: '100%',
					height: '80rpx',
					backgroundColor: '#3a8fc5',
					color: '#FFFFFF',
					fontSize: '28rpx',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					border: '1rpx solid #3a8fc5'
				},
				//头像路径
				img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png',
				//名字
				name: '渣渣宝',
				bz: '备注备注备注备注',
				//已购服务
				tclist: [{
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '2020年10月27日09:59:06', //开始时间
					endTime: '2020年10月27日09:59:12' //结束时间
				}, {
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '2020年10月27日10:26:11', //开始时间
					endTime: '2020年10月27日10:26:15' //结束时间
				}, {
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '2020年10月27日10:26:24', //开始时间
					endTime: '2020年10月27日10:26:27' //结束时间
				}],
				//历史问诊
				recordlist: [{
					//完成状态
					complete: true,
					//问诊渠道 1.电话咨询 2.图文咨询 3.门诊预约 4.疫苗接种预约 5.儿保预约 
					zl: '1',
					//姓名
					name: '渣渣宝',
					// 年龄
					age: '1岁零2个月',
					// 订单号
					orderID: 'ZX202000010',
					//下单时间
					xdTime: '2020年10月27日10:22:23',
					// 结束时间
					jsTime: '2020年10月27日10:22:49'
				}, {
					//完成状态
					complete: true,
					//问诊渠道 1.电话咨询 2.图文咨询 3.门诊预约 4.疫苗接种预约 5.儿保预约 
					zl: '2',
					//姓名
					name: '渣渣宝',
					// 年龄
					age: '1岁零2个月',
					// 订单号
					orderID: 'ZX202000010',
					//下单时间
					xdTime: '2020年10月27日10:22:23',
					// 结束时间
					jsTime: '2020年10月27日10:22:49'
				}, {
					//完成状态
					complete: true,
					//问诊渠道 1.电话咨询 2.图文咨询 3.门诊预约 4.疫苗接种预约 5.儿保预约 
					zl: '3',
					//姓名
					name: '渣渣宝',
					// 年龄
					age: '1岁零2个月',
					// 订单号
					orderID: 'ZX202000010',
					//下单时间
					xdTime: '2020年10月27日10:22:23',
					// 结束时间
					jsTime: '2020年10月27日10:22:49'
				}, {
					//完成状态
					complete: true,
					//问诊渠道 1.电话咨询 2.图文咨询 3.门诊预约 4.疫苗接种预约 5.儿保预约 
					zl: '4',
					//姓名
					name: '渣渣宝',
					// 年龄
					age: '1岁零2个月',
					// 订单号
					orderID: 'ZX202000010',
					//下单时间
					xdTime: '2020年10月27日10:22:23',
					// 结束时间
					jsTime: '2020年10月27日10:22:49'
				}],
				dalist: [{
					img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png', //头像
					name: '渣渣宝', //名字
					sex: '0', //性别 0.未知 1.男 2.女
					age: '10天' //年龄
				}, {
					img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png', //头像
					name: '渣渣宝', //名字
					sex: '1', //性别 0.未知 1.男 2.女
					age: '50天' //年龄
				}, {
					img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png', //头像
					name: '渣渣宝', //名字
					sex: '2', //性别 0.未知 1.男 2.女
					age: '500年' //年龄
				}]
			}
		},
		methods: {
			//点击档案
			clickda(e) {
				console.log(this.dalist[e.currentTarget.dataset.index])
				uni.navigateTo({
					url: 'patientda'
				})
			},
			//点击关注
			gzclick(e) {
				console.log(this.guanzhu)
				if (this.guanzhu) {
					this.guanzhu = false
				} else {
					this.guanzhu = true
				}

			}
		}
	};
</script>

<style scoped lang="scss">
	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;

	}

	.custom-style {
		width: 100%;
		height: 80rpx;
		backgroundolor: #3a8fc5;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 资料
	.zl {
		padding: 34rpx 28rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		text-indent: 2em;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
		font-size: 26rpx;
	}

	// 套餐
	.taocan {
		width: 710rpx;
		height: 230rpx;
		position: relative;
		display: flex;
		border-radius: 10rpx;

		background: radial-gradient(circle at right top, transparent 15rpx, #ffffff 0) top left / 152rpx 51% no-repeat,
			radial-gradient(circle at right bottom, transparent 15rpx, #ffffff 0) bottom left /152rpx 51% no-repeat,
			radial-gradient(circle at left top, transparent 15rpx, #ffffff 0) top right /560rpx 51% no-repeat,
			radial-gradient(circle at left bottom, transparent 15rpx, #ffffff 0) bottom right /560rpx 51% no-repeat;
		filter: drop-shadow(0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.04));
	}

	//套餐左
	.tc_left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 151rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-right: 1rpx dashed #f6f6f6;
	}

	// 套餐右
	.tc_right {
		display: flex;
		align-items: center;
		width: 550rpx;
		padding: 30rpx 20rpx;
		font-size: 20rpx;
	}

	//lswz_card历史问诊的卡片
	.lswz_card {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	//hzda_list患者档案的列表
	.hzda_list {
		background-color: #FFFFFF;
		display: flex;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
	}

	//底部按钮
	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #FFFFFF;
		z-index: 1;

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