<template>
	<view>
		<view class="express">
			<!-- Step Navigation -->
			<view class="strideList">
				<view class="strideItem" :class="{active: step == 1}" @tap="changeItem(1)">基础<br />信息</view>

				<view class="icons">
					<image
						:src="step != 2 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
						mode="widthFix" />
				</view>

				<view class="strideItem" :class="{active: step == 2}" @tap="changeItem(2)">病历<br />信息</view>

				<view class="icons">
					<image
						:src="step != 3 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
						mode="widthFix" />
				</view>

				<view class="strideItem" :class="{active: step == 3}" @tap="changeItem(3)">生活<br />方式</view>

				<view class="icons">
					<image
						:src="step != 4 ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/play_2.png'"
						mode="widthFix" />
				</view>

				<view class="strideItem" :class="{active: step == 4}" @tap="changeItem(4)">授权<br />用户</view>
			</view>

			<!-- Step 1: Basic Information -->
			<view class="basic" v-if="step == 1">
				<view class="basic_row">
					<view class="basic_row_tit">姓名</view>
					<view class="basic_row_con">
						<input v-model="name" placeholder="请填写您的姓名" placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">电话</view>
					<view class="basic_row_con">
						<input v-model="phone" type="number" maxlength="11" placeholder="请填写您的电话"
							placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">性别</view>
					<view class="basic_row_con">
						<view class="sex" :class="{active2: sex == 'man'}" @tap="changeSex('man')">
							<view class="cir"></view>男
						</view>

						<view class="sex" :class="{active2: sex == 'woman'}" @tap="changeSex('woman')">
							<view class="cir"></view>女
						</view>
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">出生日期</view>
					<view class="basic_row_con" @tap="changeShow">
						<input v-model="time" disabled placeholder="请选择您的出生日期"
							placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">身高</view>
					<view class="basic_row_con">
						<input v-model="height" placeholder="请填写身高(单位cm)" placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row none">
					<view class="basic_row_tit">体重</view>
					<view class="basic_row_con">
						<input v-model="weight" placeholder="请填写体重(单位Kg)" placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="btn" @click="headerStepClick">下一步</view>
			</view>

			<!-- Step 2: Medical Information -->
			<view class="infomation" v-if="step == 2">
				<view class="basic_row">
					<view class="basic_row_tit">血值类型</view>
					<view class="basic_row_con" @tap="changeShow2('bloodType', '血脂类型')">
						<input v-model="bloodType" disabled placeholder="请选择您的血值类型"
							placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">糖尿病类型</view>
					<view class="basic_row_con" @tap="changeShow2('diabetesType', '糖尿病类型')">
						<input v-model="diabetesType" disabled placeholder="请选择您的糖尿病类型"
							placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row">
					<view class="basic_row_tit">血压类型</view>
					<view class="basic_row_con" @tap="changeShow2('bloodPressure', '血压类型')">
						<input v-model="bloodPressure" disabled placeholder="请选择您的血压类型"
							placeholder-style="color: #999999;font-size: 26rpx" />
					</view>
				</view>

				<view class="basic_row2">
					<view class="basic_row_tit">既往病史</view>
					<view class="illnessList">
						<view class="illnessItem" :class="{checked: pastCase === 'a'}" @tap="headerInputClick2('pastCase', 'a')">胸闷
						</view>
						<view class="illnessItem" :class="{checked: pastCase === 'b'}" @tap="headerInputClick2('pastCase', 'b')">心慌
						</view>
						<view class="illnessItem" :class="{checked: pastCase === 'c'}" @tap="headerInputClick2('pastCase', 'c')">头晕
						</view>
						<view class="illnessItem" :class="{checked: pastCase === 'd'}" @tap="headerInputClick2('pastCase', 'd')">痛风
						</view>
						<view class="illnessItem" :class="{checked: pastCase === 'e'}" @tap="headerInputClick2('pastCase', 'e')">
							脑血管疾病</view>
						<view class="illnessItem" :class="{checked: pastCase === 'f'}" @tap="headerInputClick2('pastCase', 'f')">
							急性并发症</view>
						<view class="illnessItem" :class="{checked: pastCase === 'g'}" @tap="headerInputClick2('pastCase', 'g')">
							心脏疾病</view>
						<view class="illnessItem" :class="{checked: pastCase === 'h'}" @tap="headerInputClick2('pastCase', 'h')">其他
						</view>
						<!-- 其他病史选项... -->
					</view>
				</view>

				<view class="basic_row2">
					<view class="basic_row_tit">既往用药</view>
					<view class="drugList">
						<view class="drugItem" :class="{checked: pharmacy === 'a'}" @tap="headerInputClick2('pharmacy', 'a')">他汀类降脂药
						</view>
						<view class="drugItem" :class="{checked: pharmacy === 'b'}" @tap="headerInputClick2('pharmacy', 'b')">中药降脂
						</view>
						<view class="drugItem" :class="{checked: pharmacy === 'c'}" @tap="headerInputClick2('pharmacy', 'c')">中药降酸药
						</view>
						<view class="drugItem" :class="{checked: pharmacy === 'd'}" @tap="headerInputClick2('pharmacy', 'd')">其他
						</view>
					</view>
				</view>

				<view class="basic_row none">
					<view class="basic_row_tit">用药时间</view>
					<view class="basic_row_con">
						<view class="sex" :class="{active2: drugTime == '3'}" @tap="changeTime('3')">
							<view class="cir"></view>3年
						</view>
						<view class="sex" :class="{active2: drugTime == '1'}" @tap="changeTime('1')">
							<view class="cir"></view>一年以内
						</view>
					</view>
				</view>

				<view class="btn" @click="headerStepClick">下一步</view>
			</view>

			<!-- Step 3: Lifestyle -->
			<view class="life" v-if="step == 3">
				<!-- 生活方式表单内容... -->


				<view class="basic_row3" style="margin-top: 20rpx;">
					<view class="basic_row_tit">吸烟情况</view>
					<view class="basic_row_con3">
						<view class="sex" :class="{ active2: smoke === 'no' }" @click="handleSelect('smoke', 'no')">
							<view class="cir"></view>从不
						</view>
						<view class="sex" :class="{ active2: smoke === 'ring' }" @click="handleSelect('smoke', 'ring')">
							<view class="cir"></view>已戒烟
						</view>
						<view class="sex" :class="{ active2: smoke === 'yes' }" @click="handleSelect('smoke', 'yes')">
							<view class="cir"></view>吸烟
						</view>
					</view>
				</view>

				<!-- 饮酒情况 -->
				<view class="basic_row3">
					<view class="basic_row_tit">饮酒情况</view>
					<view class="basic_row_con3">
						<view class="sex" :class="{ active2: drink === 'no' }" @click="handleSelect('drink', 'no')">
							<view class="cir"></view>从不
						</view>
						<view class="sex" :class="{ active2: drink === 'once' }" @click="handleSelect('drink', 'once')">
							<view class="cir"></view>偶尔
						</view>
						<view class="sex" :class="{ active2: drink === 'yes' }" @click="handleSelect('drink', 'yes')">
							<view class="cir"></view>经常
						</view>
						<view class="sex" :class="{ active2: drink === 'ring' }" @click="handleSelect('drink', 'ring')">
							<view class="cir"></view>戒酒
						</view>
					</view>
				</view>

				<!-- 日常工作 -->
				<view class="basic_row3">
					<view class="basic_row_tit">日常工作</view>
					<view class="basic_row_con3">
						<view class="sex" :class="{ active2: dailyWork === 'easy' }" @click="handleSelect('dailyWork', 'easy')">
							<view class="cir"></view>轻体力劳动
						</view>
						<view class="sex" :class="{ active2: dailyWork === 'in' }" @click="handleSelect('dailyWork', 'in')">
							<view class="cir"></view>中体力劳动
						</view>
						<view class="sex" :class="{ active2: dailyWork === 'repeat' }" @click="handleSelect('dailyWork', 'repeat')">
							<view class="cir"></view>重体力劳动
						</view>
						<view class="sex" :class="{ active2: dailyWork === 'rest' }" @click="handleSelect('dailyWork', 'rest')">
							<view class="cir"></view>休息
						</view>
					</view>
				</view>

				<!-- 运动情况 -->
				<view class="basic_row3">
					<view class="basic_row_tit">运动情况</view>
					<view class="basic_row_con3">
						<view class="sex" :class="{ active2: motion === 'lack' }" @click="handleSelect('motion', 'lack')">
							<view class="cir"></view>≤2次
						</view>
						<view class="sex" :class="{ active2: motion === 'once' }" @click="handleSelect('motion', 'once')">
							<view class="cir"></view>3-5次
						</view>
						<view class="sex" :class="{ active2: motion === 'days' }" @click="handleSelect('motion', 'days')">
							<view class="cir"></view>每天
						</view>
						<view class="sex" :class="{ active2: motion === 'no' }" @click="handleSelect('motion', 'no')">
							<view class="cir"></view>无运动
						</view>
					</view>
				</view>

				<!-- 睡眠情况 -->
				<view class="basic_row3 none">
					<view class="basic_row_tit">睡眠情况</view>
					<view class="basic_row_con3">
						<view class="sex" :class="{ active2: sleep === 'law' }" @click="handleSelect('sleep', 'law')">
							<view class="cir"></view>规律
						</view>
						<view class="sex" :class="{ active2: sleep === 'noLaw' }" @click="handleSelect('sleep', 'noLaw')">
							<view class="cir"></view>熬夜
						</view>
						<view class="sex" :class="{ active2: sleep === 'overturn' }" @click="handleSelect('sleep', 'overturn')">
							<view class="cir"></view>黑白颠倒
						</view>
						<view class="sex" :class="{ active2: sleep === 'rest' }" @click="handleSelect('sleep', 'rest')">
							<view class="cir"></view>其他
						</view>
					</view>
				</view>


				<view class="btn" @click="headerStepClick">下一步</view>
			</view>

			<!-- Step 4: Authorization -->
			<view class="user" v-if="step == 4">
				<!-- 授权表单内容... -->
				
				 <view class="basic_row3 none">
				    <view class="basic_row_tit">档案授权</view>
				    <view class="basic_row_con2">
				      <view 
				        class="sex" 
				        :class="{ active2: accredit === 'owner' }" 
				        @click="handleSelect('accredit', 'owner')"
				      >
				        <view class="cir"></view>对所有人员开放
				      </view>
				      <view 
				        class="sex" 
				        :class="{ active2: accredit === 'family' }" 
								@click="handleSelect('accredit', 'family')"
				      >
				        <view class="cir"></view>对家庭成员开放
				      </view>
				      <view 
				        class="sex" 
				        :class="{ active2: accredit === 'serve' }" 
				        @click="handleSelect('accredit', 'serve')"
				      >
				        <view class="cir"></view>对服务人员开放
				      </view>
				      <view 
				        class="sex" 
				        :class="{ active2: accredit === 'oneself' }" 
				        @click="handleSelect('accredit', 'oneself')"
				      >
				        <view class="cir"></view>只允许自己查看
				      </view>
				    </view>
				  </view>
					
					
			    <view class="btn" bind:tap="headerSubmitClick">提交</view>
				
			</view>
		</view>

		<!-- Date Picker Popup -->
		<u-popup :show="show" mode="bottom" round close-on-click-overlay>
			<view style="width: 100%;">
				<u-datetime-picker mode="date" :show="show" :formatter="formatter" @cancel="onClose"
					@confirm="onInput"></u-datetime-picker>
			</view>
		</u-popup>


		<!-- Blood Type Picker Popup -->
		<u-popup :show="show2" mode="bottom" round close-on-click-overlay>
			<view style="width: 100%;">
				<u-picker :columns="columns" :show="show2" :title="PopupTitle" @confirm="onInput2" @cancel="onClose2"
					show-toolbar></u-picker>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1,
				name: '',
				phone: '',
				sex: '',
				time: '',
				height: '',
				weight: '',
				bloodType: '',
				diabetesType: '',
				bloodPressure: '',
				pastCase: '',
				pharmacy: '',
				drugTime: '',
				smoke: '',
				drink: '',
				dailyWork: '',
				motion: '',
				sleep: '',
				accredit: '',
				show: false,
				show2: false,
				currentDate: new Date().getTime(),
				popupType: '',
				PopupTitle: '',
				columns: [], // Your picker options
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					if (type === 'day') {
						return `${value}日`;
					}
					return value;
				}
			}
		},
		methods: {
			changeItem(step) {
				this.step = step;
			},
			changeSex(sex) {
				this.sex = sex;
			},
			changeTime(time) {
				this.drugTime = time;
			},
			changeShow() {
				this.show = true;
				console.log(this.show, 'asdasd');
			},
			changeShow2(type, title) {
				this.popupType = type;
				this.PopupTitle = title;
				this.show2 = true;
			},
			headerInputClick(e) {
				this[e.currentTarget.dataset.name] = e.detail.value;
			},
			headerInputClick2(name, val) {
				this[name] = val;
			},
			headerStepClick() {
				this.step++;
			},
			headerSubmitClick() {
				// Submit logic
			},
			onClose() {
				this.show = false;
			},
			onClose2() {
				this.show2 = false;
			},
			onInput(e) {
				this.time = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.show = false;
			},
			onInput2(e) {
				this[this.popupType] = e[0];
				this.show2 = false;
			},
			handleSelect(name,val) {
				console.log(name,val);
				this[name] = val;
				return;
			},
		}
	}
</script>

<style scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.strideList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 43rpx;
	}

	.strideItem {
		width: 120rpx;
		height: 120rpx;
		background: #D9D9D9;
		border-radius: 50%;
		overflow: hidden;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icons {
		width: 26rpx;
		height: 26rpx;
	}

	.active {
		background: #FF512A;

	}

	.strideList {
		margin-top: 42rpx;
	}


	.basic {
		margin: 0 20rpx;
		margin-top: 62rpx;
	}

	.basic_row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #E6E6E6;
		height: 90rpx;
	}

	.basic_row_tit {
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
	}

	.basic_row_con {
		text-align: right;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.basic_row_con input {
		height: 90rpx;
	}

	.sex {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		margin-left: 40rpx;
	}

	.cir {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #555555;
		margin-right: 16rpx;
		box-sizing: border-box;
	}

	.active2 .cir {
		background-color: #ff512a;
		border: none;
	}

	.none {
		border-bottom: none;
	}

	.btn {
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		width: 650rpx;
		height: 80rpx;
		background: #FF512A;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 64rpx;
	}

	.infomation {
		margin: 0 20rpx;
		margin-top: 92rpx;
		padding-bottom: 60rpx;
	}

	.basic_row2 {
		display: flex;
		flex-direction: column;
		padding-top: 30rpx;
	}



	.illnessItem {
		width: 150rpx;
		height: 50rpx;
		background: #F0F0F0;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.illnessList {
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.basic_row2 .ipts {
		border-bottom: 1rpx solid #E6E6E6;
		padding: 30rpx 0;
	}

	.drugList {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;
	}

	.drugItem {
		background: #F0F0F0;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		white-space: nowrap;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		padding: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.checked {
		background: #FF512A;
		color: #FFFFFF;
	}


	.life {
		margin: 0 52rpx;
	}

	.life .basic_row {
		width: 100%;
		justify-content: flex-start;
		min-height: 90rpx;
	}

	.life .basic_row_tit {
		white-space: nowrap;
		margin-right: 32rpx;
	}

	.life .basic_row_con {
		flex-wrap: wrap;
	}


	.life .sex {
		margin: 15rpx 0;
		margin-right: 16rpx;
	}

	.basic_row_con3 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.basic_row3 {
		min-height: 90rpx;
		display: flex;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		align-items: flex-start;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.basic_row_con3 .sex {
		margin-top: 0;
	}

	.life .none {
		border-bottom: none;
	}

	.user {
		margin: 0 52rpx;
		margin-top: 92rpx;
	}

	.user .none {
		border-bottom: none;
	}

	.user .sex {
		margin-bottom: 30rpx;
	}
</style>