<template>
	<view class="user-license">
		<view class="info-item">
			<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
		</view>

		<view class="info-list">
			<view class="info-item">
				<text class="label">姓名：</text>
				<text class="content">{{userInfo.nickname}}</text>
			</view>
			<view class="info-item">
				<text class="label">手机号：</text>
				<text class="content">{{userInfo.mobile}}</text>
			</view>

			<view class="info-item">
				<text class="label">科室：</text>
				<text class="content">{{userInfo.user_group_name}}</text>
			</view>

			<view class="info-item">
				<text class="label">岗位名称：</text>
				<text class="content">{{userInfo.position}}</text>
			</view>

			<view class="info-item">
				<text class="label">资格证编码：</text>
				<text class="content">{{userInfo.certificate_code}}</text>
			</view>

			<view class="info-item">
				<text class="label">执业证编码：</text>
				<text class="content">{{userInfo.license_code}}</text>
			</view>

			<view class="info-item license-image">
				<text class="label">执业证图片：</text>
				<image class="license-img" :src="userInfo.license_image" mode="aspectFit" @click="previewImage"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '@/util/api.js';
	export default {
		data() {
			return {
				userInfo: {},
				id: 0,
			}
		},
		onLoad(op) {
			console.log(op);
			this.id = op.id;
			this.info();
		},
		methods: {
			info() {
				getUserInfo({
						user_id: this.id
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						} else {
							this.userInfo=res.data;
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			previewImage() {
				// 图片预览功能
				uni.previewImage({
					urls: [this.userInfo.license_image]
				})
			}
		}
	}
</script>

<style>
	.user-license {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.info-item {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		margin: 20rpx auto;
		display: block;
	}

	.label {
		color: #666;
		width: 200rpx;
		font-size: 28rpx;
	}

	.content {
		color: #333;
		flex: 1;
		font-size: 28rpx;
	}

	.license-image {
		flex-direction: column;
		align-items: flex-start;
	}

	.license-img {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}
</style>