<template>
	<view class="info">
		<view class="content" >
			<view class="title">
				基 本 信 息
			</view>
			<view class="page-section">
				<view class="page-section-title">姓名</view>
				<view class="weui-cells weui-cells_after-title">
					<u-input v-model="form.cName" :type="type" placeholder="请输入姓名,最多四个字" maxlength='4'/>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">性别</view>
				<view class="sex" @click="isShow = true">
					<u-radio-group v-model="form.nSex">
						<u-radio v-for="(item, index) in sex" :key="index"
							:name="item.value" :label="item.label"
							:customStyle="{ margin: '0 12rpx' }"
						/>
					</u-radio-group>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">手机号</view>
				<view class="weui-cells weui-cells_after-title">
					<!-- <input class="weui-input" v-model="form.cPhone" placeholder="请输入手机号" /> -->
					<u-input v-model="form.cPhone" placeholder="请输入手机号" maxlength='11'/>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">入驻城市</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="city" @click="selectCity">
						{{ form.city || '入驻城市' }}
					</view>
					<u-picker :show="show" :columns="[cityList]" keyName="label"
						@cancel="show = false" @confirm="onSelect"
					></u-picker>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传近期生活照</view>
				<view class="images">
					<Upload @fileList="onUpload($event, 'cImgList')" />
				</view>
			</view>
			<view class="title">
				详 细 信 息
			</view>
			<view class="page-section">
				<view class="page-section-title">昵称</view>
				<view class="weui-cells weui-cells_after-title">
					<u-input v-model="form.cNickName" :type="type" placeholder="请输入昵称" maxlength='4' />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传头像</view>
				<view class="">
					<Upload
						:maxCount="1"
						@fileList="onUpload($event, 'cPortrait')"
					/>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">您所在的位置</view>
				<view class="weui-cells weui-cells_after-title location" @click="getAddress">
					<text class="point" v-if="!form.address">请选择</text>
					<text class="point active" v-else>{{form.address}}{{form.name}}</text>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">商户简介</view>
				<view class="weui-cells weui-cells_after-title textareas" style="border:none">
					<textarea value="" v-model="form.cJianjie" bindinput="jianIn" placeholder="请输入您的简介"></textarea>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传身份证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<Upload
						:maxCount="2"
						@fileList="onUpload($event, 'cSfzImg')"
					/>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传健康证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<Upload
						:maxCount="1"
						@fileList="onUpload($event, 'healthCertificate')"
					/>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传从业资格证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<Upload
						:maxCount="1"
						@fileList="onUpload($event, 'certification')"
					/>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传营业执照照片</view>
				<view class="images" style="padding-bottom: 0;">
					<Upload
						:maxCount="1"
						@fileList="onUpload($event, 'businessLicense')"
					/>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传无犯罪证明照片</view>
				<view class="images" style="padding-bottom: 0;">
					<Upload
						:maxCount="1"
						@fileList="onUpload($event, 'noCrime')"
					/>
				</view>
			</view>
			<view class="footer-bar">
				<u-button type="primary" shape="circle" text="提交" color="#2cb8d4"
					@click="submit"
					customStyle=""
				></u-button>
				<!-- <button style="margin: 30rpx 0" type="primary" @click="submit">提交</button> -->
			</view>
		</view>
		<view class="popup" v-if="isDisable"></view>
	</view>
</template>

<script>
	import {
		getCityList,
		getProjectList,
		getMerchantData,
	} from '@/api/index';
	import {
		netStaffAdd,
		netStaffUpdate,
	} from '@/api/staff';
	import Upload from '@/components/upload/index.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				isDisable: false,
				cityList: [],
				show: false,
				type: 'text',
				token: '',
				uploadId: '',
				isShow: false,
				headImgList: [],
				title: '商户入驻',
				details: '',
				sex: [
					{
						value: 0,
						label: '女'
					},
					{
						value: 1,
						label: '男'
					}
				],
				location: '',
				imglist: [],
				urlImg: [],
				pictures: [],
				pojectList: [],
				form: {
					id: '',
					cName: '',
					cNickName: '',
					cPortrait: '',
					cPhone: '',
					cJianjie: '',
					nSex: 0,
					cSfzImg: [],
					cImgList: [],
					latitude: '',
					longitude: '',
					name: '',
					address: '',
					cOpenId: '',
					cBhList: '',
					city: '',
					certification: '',
					healthCertificate: '',
					businessLicense: ''
				},
			}
		},
		onLoad(options) {
			// uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiNGQ2NzJiMi0xNzcxLTRmYTMtYjM1OS01NmRhMjk4ZDcwZjAifQ.acq9x8MrF3aXzY3mYJIuG8MLeRtMQ2hybesrN8t5txI4H5HDthn07nq5QYZmCJ1_ZPL8ZDbYczN6qmIa8ckrrA')
			// uni.setStorageSync('wx_copenid','o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
			this.getCity()
			this.title = options.title
			if (options.title == '编辑资料') {
				this.getDetails()
			}
		},
		mounted() {
			// 在页面加载时获取Token，可以从本地缓存中获取
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
		},
		methods: {
			onSelect(e) {
				this.form.city = e.value[0].label
				this.form.deptId = e.value[0].value
			},
			goCity() {
				uni.navigateTo({
					url: '/pages/identify/city?type=' + 'indent'
				})
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.form.name = res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
						this.form.address = res.address || res.name
					}
				});
			},
			// upload事件
			onUpload(e, t) {
				this.form[t] = e.map(item => item.url).join();
			},
			//提交
			submit() {
				var openids = uni.getStorageSync('wx_copenid')
				this.form.cOpenId = openids
				if (this.form.cName == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					})
					return
				}

				if (this.form.cPortrait == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				if (this.form.cNickName == '') {
					uni.showToast({
						title: '请输入您的昵称',
						icon: 'none'
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.cPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.form.city == '') {
					uni.showToast({
						title: '请选择所在城市',
						icon: 'none'
					});
					return
				}
				if (this.form.address == '') {
					uni.showToast({
						title: '请选择位置',
						icon: 'none'
					});
					return
				}
				if (this.form.cJianjie == '') {
					uni.showToast({
						title: '请填写您的简介',
						icon: 'none'
					});
					return
				}
				if (uni.$u.test.isEmpty(this.form.cSfzImg)) {
					uni.showToast({
						title: '请上传身份证照片正反面',
						icon: 'none'
					});
					return
				}
				if (uni.$u.test.isEmpty(this.form.cImgList)) {
					uni.showToast({
						title: '最少上传一张生活照片',
						icon: 'none'
					});
					return
				}
				this.form.cSfzImg = this.form.cSfzImg.split(',')
				this.form.cImgList = this.form.cImgList.split(',')
				if (this.title == '编辑资料') {
					netStaffUpdate(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "修改成功",
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				} else {
					netStaffAdd(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "添加成功",
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			// 选中某个复选框时，由checkbox时触发
			checkboxGroupChange(e) {
				this.form.cBhList = e.join(',')
			},
			// 项目列表
			getPro() {
				getProjectList({
					current: 1,
					size: 10
				}).then(res => {
					var list = res.data.data
					setTimeout(() => {
						list.forEach(ele => {
							this.form.cBhList.split(',').forEach(eles => {
								if (ele.cId == eles) {
									ele.checked = true
								}
							})
						});
						this.pojectList = list
					}, 1000)
				})
			},
			getDetails() {
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				getMerchantData(openid).then(res => {
					let data = res.data.data
					this.form = data
					// this.form.cBhList = data.cBhList
				})
			},
			getCity() {
				getCityList().then(res => {
					this.cityList = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			},
			selectCity() {
				this.show = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info{
		width: 100%;
		height: auto;
		padding: 20rpx 30rpx 120rpx;
		position: relative;
		.popup{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
			z-index: 9999;
			overflow-y: auto;
		}
	}

	.title {
		border-left: 3px solid #2cb8d4;
		padding-left: 5px;
		font-size: 30rpx;
		// margin-top: 10px;
	}

	.head_img {
		width: 200rpx;
		height: 200rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sex {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #333;
		// padding-bottom: 10rpx;
	}

	.weui-cells {
		margin-top: 10rpx;
		border-bottom: 1px solid #333333;
	}

	.listAll {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.content {

		.page-section-title {
			font-size: 32rpx;
			padding-top: 20rpx;

		}

		.weui-cells:before {
			border-top: 0;
		}

		.piker {
			border-bottom: 1px solid #ccc;
			height: 88rpx;
			line-height: 88rpx;
		}

		.location {
			// height: 88rpx;
			color: rgb(145, 145, 145);
			line-height: 60rpx;
		}

		.textareas {
			margin-top: 20rpx;

			textarea {
				border: 1px solid #b8b6b6;
				width: auto;
				padding: 20rpx;
				background-color: #f8f8f8;
			}
		}

		.images {
			display: flex;
			margin-top: 20rpx;
			// padding-bottom: 240rpx;
			width: 100%;

			.imagesPho {
				position: relative;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
				}

				.closeimg {
					position: absolute;
					right: -5px;
					top: -10rpx;
					position: absolute;
					z-index: 9;
					color: #f03d38 !important;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.uploadImg {
			border: 0;

			.image {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #b8b6b6;
			}
		}

		.proList {
			margin-top: 20rpx;

			label {
				margin-right: 40rpx;
				margin-bottom: 20rpx;
				display: inline-block;
			}
		}

		.heads {
			.uploadImg {
				width: 200rpx;
				height: 200rpx;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>
