<template>
	<view class="page">
		<view class="bg">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="navbar" :style="[navbarHeight]"></view>
			<view class="title">
			</view>
		</view>
		<view class="box">
			<label class="box_title">请选择你的身份</label>
			<view class="box_item flex-row flex-ali-center flex-jus-sp" v-for="(item, index) in identitys" :key="index"
				@click="checkId(item)">
				<view class="flex-row flex-ali-center">
					<image :src="item.src"></image>
					<text>{{item.name}}</text>
				</view>
				<u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identitys: [{
						name: '我是医生',
						type: 1,
						src: '../../static/image/doctor.png'
					},
					{
						name: '我是药师',
						type: 2,
						src: '../../static/image/ys.png'
					}
				],
				statusBarHeight:this.$statusBarHeight,
				navbarHeight:this.$navbarHeight
			};
		},
		methods: {
			checkId(item) {
				this.$go('/pages/login/register?role='+item.type)
				uni.setStorageSync('role', item.type)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100vw;
		background: linear-gradient(180deg, #EAF2FF 0%, rgba(238, 245, 255, 0) 100%);

		.title {
			height: 200rpx;
			line-height: 200rpx;
			width: 100%;
			text-align: center;
			font-size: 48rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #0D111A;
		}
	}

	.box {
		padding: 0 52rpx;

		&_title {
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #6C7380;
		}

		&_item {
			height: 152rpx;
			background-color: #F9FAFB;
			border-radius: 8rpx;
			padding: 32rpx;
			margin-top: 32rpx;
			text{
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #31353D;
				margin-left: 20rpx;
			}
			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}
</style>
