<template>
	<view style="width: 100%;height: 100%;">
		<!-- 性别选择器 -->
		<u-select v-model="sexshow" :list="sexlist" @confirm="sexconfirm"></u-select>
		<!-- 省 -->
		<u-select v-model="provinceshow" :list="provincelist" @confirm="provinceconfirm"></u-select>
		<!-- 市 -->
		<u-select v-model="cityshow" :list="citylist" @confirm="cityconfirm"></u-select>
		<!-- 区县 -->
		<u-select v-model="areashow" :list="arealist" @confirm="areaconfirm"></u-select>
		<!-- 医院 -->
		<u-select v-model="hospitalshow" :list="hospitallist" @confirm="hospitalconfirm"></u-select>
		<!-- 科室 -->
		<u-select v-model="departmentshow" :list="departmentlist" @confirm="departmentconfirm"></u-select>
		<!-- 资质 -->
		<u-select v-model="qualificationsshow" :list="qualificationslist" @confirm="qualificationsconfirm"></u-select>



		<u-gap height="30" bg-color="#f0f2f5"></u-gap>
		<!-- 姓名 性别 身份证 -->
		<view style="padding: 0 28rpx;">
			<view class="flex align-center" style="margin: 20rpx 0;">
				<view style="width: 30%;font-weight: bold;" class="felx align-center">
					<view>医生项姓名</view>
				</view>
				<view style="width: 70%;">
					<u-input v-model="form.name" type="text" :border="false" placeholder="请填写真实姓名" input-align="right" />
				</view>
			</view>
			<u-line color="#f0f2f5" />
			<view class="flex align-center" style="margin: 20rpx 0;">
				<view style="width: 30%;font-weight: bold;" class="felx align-center">
					<view>性别</view>
				</view>
				<view style="width: 60%;margin-right: 40rpx;">
					<u-input v-model="form.sex" type="text" :border="false" placeholder="请选择性别" input-align="right" />
				</view>
				<view style="5%" class="flex justify-center align-center">
					<u-icon name="arrow-down" color="#dddfe1" @click="sexshow = true"></u-icon>
				</view>
			</view>
			<u-line color="#f0f2f5" />
			<view class="flex align-center" style="margin: 20rpx 0;">
				<view style="width: 30%;font-weight: bold;" class="felx align-center">
					<view>身份证</view>
				</view>
				<view style="width: 70%;">
					<u-input v-model="form.name" type="idcard" :border="false" placeholder="请填写身份证号" input-align="right" />
				</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f0f2f5"></u-gap>
		<!-- 工作机构 -->
		<view v-for="item,index in form.work" :key='index'>
			<view style="padding: 45rpx 28rpx 30rpx 28rpx;background-color: #FFFFFF;">
				<view style="margin-bottom: 50rpx;font-weight: bold;font-size: 30rpx;">
					{{item.name}}
				</view>
				<view class="flex">
					<!--  ****************省份**************** -->
					<view class="xiala" @click="provinceshow=true,province=index" style="border-right: 1rpx solid #dddfe1;">
						<!-- 	图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.province}}</view>
					</view>
					<!-- ********************* 城市*************** -->
					<view class="xiala" @click="cityshow=true,city=index">
						<!-- 图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.city}}</view>
					</view>
				</view>
				<u-gap height="40" bg-color="#ffffff"></u-gap>
				<view class="flex">
					<!-- **********************区县******************* -->
					<view class="xiala" @click="areashow=true,area=index" style="border-right: 1rpx solid #dddfe1;">
						<!-- 图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.area}}</view>
					</view>
					<!-- **********************医院********************** -->
					<view class="xiala" @click="hospitalshow=true,hospital=index">
						<!-- 图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.hospital}}</view>
					</view>
				</view>

				<view style="margin:50rpx 0;font-weight: bold;font-size: 30rpx;">科室资质</view>
				<view class="flex">
					<!-- ********************************科室************************************ -->
					<view class="xiala" @click="departmentshow=true,department=index" style="border-right: 1rpx solid #dddfe1;">
						<!-- 图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.department}}</view>
					</view>
					<!-- ***********************************资质***************** -->
					<view class="xiala" @click="qualificationsshow=true,qualifications=index">
						<!-- 图标 -->
						<view style="margin:0 20rpx;">
							<u-icon name="arrow-down" color="#dddfe1"></u-icon>
						</view>
						<!-- 文字 -->
						<view style="color:#999999">{{item.qualifications}}</view>
					</view>
				</view>
			</view>
			<u-gap height="30" bg-color="#f0f2f5"></u-gap>
		</view>
		<!-- 照片上传 -->
		<view style="padding: 46rpx 28rpx;border-bottom: 0.5rpx solid #EFEFEF;">
			<view style="margin-bottom: 30rpx;">
				<text style="font-size: 30rpx;font-weight: bold;">上传医师执业证书</text>
				<text style="color: #999999;font-size: 26rpx;">（清晰照片和信息页）</text>
			</view>

			<view style="width: 142rpx;height: 142rpx;border-radius: 16rpx;background-color: #f4f4f4;" class="flex justify-center align-center">
				<view>
					<image src="../../static/addPhoto.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>

		</view>
		<view style="padding: 46rpx 28rpx;border-bottom: 0.5rpx solid #EFEFEF;">
			<view style="margin-bottom: 30rpx;">
				<text style="font-size: 30rpx;font-weight: bold;">上传身份证</text>
				<text style="color: #999999;font-size: 26rpx;">（人像面和国徽面）</text>
			</view>

			<view style="width: 142rpx;height: 142rpx;border-radius: 16rpx;background-color: #f4f4f4;" class="flex justify-center align-center">
				<view>
					<image src="../../static/addPhoto.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>

		</view>
		<view style="padding: 46rpx 28rpx;border-bottom: 0.5rpx solid #EFEFEF;">
			<view style="margin-bottom: 30rpx;">
				<text style="font-size: 30rpx;font-weight: bold;">上传医生资格证</text>
				<text style="color: #999999;font-size: 26rpx;">（清晰照片业和信息页）</text>
			</view>

			<view style="width: 142rpx;height: 142rpx;border-radius: 16rpx;background-color: #f4f4f4;" class="flex justify-center align-center">
				<view>
					<image src="../../static/addPhoto.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>

		</view>
		<u-gap height="200" bg-color="#f0f2f5"></u-gap>
		<view class="bottomButton" @click="bc">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		onLoad() {

		},
		mounted() {

		},
		data() {
			return {
				//保存选择的列数
				province: '', //省
				city: '', //市
				area: '', //区
				hospital: '', //医院
				department: '', //科室
				qualifications: '', //资质
				form: {
					name: '', //姓名
					sex: '', //性别
					ID: '', //身份证
					work: [{ //工作机构
						name: '工作机构一',
						province: '选择省份', //省
						city: '选择城市', //市
						area: '选择县区', //区
						hospital: '选择医院', //医院
						department: '科室名称', //科室
						qualifications: '默认资质' //资质
					}, {
						name: '工作机构二',
						province: '选择省份', //省
						city: '选择城市', //市
						area: '选择县区', //区
						hospital: '选择医院', //医院
						department: '科室名称', //科室
						qualifications: '默认资质' //资质
					}, {
						name: '工作机构三',
						province: '选择省份', //省
						city: '选择城市', //市
						area: '选择县区', //区
						hospital: '选择医院', //医院
						department: '科室名称', //科室
						qualifications: '默认资质' //资质
					}],
					certificate: '', //证书
					idPhoto: '', //身份证
					doctorQualification: '' //医生资格
				},
				//性别选择
				sexshow: false,
				sexlist: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				//省
				provinceshow: false,
				provincelist: [{
						value: '1',
						label: '广东省'
					},
					{
						value: '2',
						label: '广西省'
					}
				],
				//市
				cityshow: false,
				citylist: [{
						value: '1',
						label: '广州'
					},
					{
						value: '2',
						label: '深圳'
					}
				],
				//区
				areashow: false,
				arealist: [{
						value: '1',
						label: '罗湖区'
					},
					{
						value: '2',
						label: '高要区'
					}
				],
				//医院
				hospitalshow: false,
				hospitallist: [{
						value: '1',
						label: '****医院'
					},
					{
						value: '2',
						label: '***医院'
					}
				],
				//科室
				departmentshow: false,
				departmentlist: [{
						value: '1',
						label: '外科'
					},
					{
						value: '2',
						label: '内科'
					}
				],
				//资质
				qualificationsshow: false,
				qualificationslist: [{
						value: '1',
						label: '高'
					},
					{
						value: '2',
						label: '低'
					}
				],
			}
		},
		methods: {
			// 性别
			sexconfirm(e) {
				console.log(e);
				this.form.sex = e[0].label
				console.log(this.form.sex);
			},
			//省
			provinceconfirm(e) {
				this.form.work[this.province].province = e[0].label
			},
			//市
			cityconfirm(e) {
				this.form.work[this.city].city = e[0].label
			},
			//区
			areaconfirm(e) {
				this.form.work[this.area].area = e[0].label
			},
			//医院
			hospitalconfirm(e) {
				this.form.work[this.hospital].hospital = e[0].label
			},
			//科室
			departmentconfirm(e) {
				this.form.work[this.department].department = e[0].label
			},
			//资质
			qualificationsconfirm(e) {
				this.form.work[this.qualifications].qualifications = e[0].label
			},
			bc() {
				console.log(this.province)

			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #f0f2f5;
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0B73B9;
		color: #FFFFFF;
		z-index: 1;
		font-size: 32rpx;
	}

	.xiala {
		width: 50%;
		flex-direction: row-reverse;
		align-items: center;
		display: flex;
	}
</style>
