<template>
	<view class="main">
		<view class="u-margin-left-20 u-margin-right-20 body_style">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" label-width="125" :border-bottom="true">
					<u-input placeholder="请输入您的真实姓名" :disabled="vuex_user.is_auth == 2" v-model="form.name" />
				</u-form-item>
				<u-form-item label="身份证" label-width="125" :border-bottom="true">
					<u-input @click="showtoastTips()" type="number" :disabled="vuex_user.is_auth == 2" maxlength="18"
						placeholder="请输入您的二代身份证号码" v-model="form.idCard" />
				</u-form-item>
				<u-form-item label="手机号" label-width="125" :border-bottom="true">
					<u-input type="number" :disabled="vuex_user.is_auth == 2" maxlength="11" placeholder="请输入您的手机号码"
						v-model="form.phone" />
				</u-form-item>
				<u-form-item label="所属地区" label-width="125" :border-bottom="true">
					<u-input placeholder="请选择所属地区" type="select"
						@click="vuex_user.is_auth == 2?show = false:show = true" border v-model="form.cityName" />
				</u-form-item>
				<u-form-item label="所属机构" label-width="125" :border-bottom="true">
					<u-input @click="vuex_user.is_auth == 2?showMechanism = false:showMechanism = true" type="select"
						placeholder="请选择您的所属机构" border v-model="form.mechanism" />
				</u-form-item>
				<u-form-item label="拍照/上传您的二代身份证" :border-bottom="true" label-position="top">
					<view class="flex justify-between align-center" style="width: 100%;">
						<image @click="uploadImg(idLeft,1)" style="width: 272rpx;height: 174rpx;" :src="idLeft" mode="">
						</image>
						<image @click="uploadImg(idRight,2)" style="width: 272rpx;height: 174rpx;" :src="idRight"
							mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="拍照/上传您的信用管理师资质证书" :border-bottom="true" label-position="top">
					<view class="flex justify-between align-center" style="width: 100%;">
						<u-image width="272rpx" @click="uploadQualification" height="174rpx" :src="form.qualification">
						</u-image>
					</view>
				</u-form-item>
				<u-form-item label="提交人说明" :border-bottom="false" label-position="top">
					<u-input @click="showtoastTips()" :disabled="vuex_user.is_auth == 2" placeholder="请填写说明" border
						height="150" :auto-height="true" type="textarea" v-model="form.intro" />
				</u-form-item>
			</u-form>
		</view>
		<u-picker mode="region" :params="params" @confirm="selectReg" v-model="show"
			:area-code='[form.province, form.city]'>
		</u-picker>
		<u-select @confirm="selectMechanism" v-model="showMechanism" :list="list"></u-select>
		<u-button v-if="this.vuex_user.is_auth != 2" shape="circle" @click="btnIdCard" hover-class="none"
			:custom-style="customStyle" throttle-time="1000">
			提交</u-button>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				form: {
					intro: '',
					mechanism: '',
					idCard: '',
					name: '',
					phone: '',
					province: '13',
					city: '1303',
					cityName: '河北省-秦皇岛市',
					qualification: ''
				},
				params: {
					province: true,
					city: true,
					area: false
				},
				show: false,
				showMechanism: false,
				customStyle: {
					marginTop: '20rpx',
					width: '182rpx',
					height: '60rpx',
					color: '#fff',
					background: '#FBC600',
					border: 'none'
				},
				idLeft: "https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/idCard.png",
				idRight: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/idCard_two.png',
				list: []
			}
		},
		onLoad() {
			if (this.vuex_user.is_auth == 2) {
				this.form.intro = this.vuex_user.auth_info.explain
				this.form.mechanism = this.vuex_user.auth_info.organization
				this.form.idCard = this.vuex_user.auth_info.card
				this.idLeft = this.vuex_user.auth_info.front_img
				this.idRight = this.vuex_user.auth_info.back_img
				this.form.name = this.vuex_user.name
				this.form.phone = this.vuex_user.auth_info.phone
				this.form.qualification = this.vuex_user.auth_info.qualified
			}
			this.get_mechanism()
		},
		methods: {
			async get_mechanism() {
				let res = await this.$u.post('manager/get_mechanism', {
					city_code: this.form.city + "00"
				})
				if (res.code == 200) {
					this.list = res.data
					if (this.list.length != 0) {
						this.list = this.list.map(item => {
							return {
								value: item['id'],
								label: item['name']
							}
						})
					}
					this.list.push({
						value: 0,
						label: '其他'
					})
				}
			},
			selectMechanism(e) {
				this.form.mechanism = e[0].label
			},
			selectReg(e) {
				console.log(e)
				this.form.province = e.province.value
				this.form.city = e.city.value
				this.form.cityName = e.province.label + '-' + e.city.label
				this.get_mechanism()
			},
			showtoastTips() {
				if (this.vuex_user.is_auth == 2) {
					uni.showModal({
						title: "温馨提示",
						content: "已认证，若需修改认证信息请联系客服处理",
						showCancel: false
					})
				}
			},
			uploadQualification() {
				if (this.vuex_user.is_auth == 2) {
					uni.showModal({
						title: "温馨提示",
						content: "已认证，若需修改认证信息请联系客服处理",
						showCancel: false
					})
					return false
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						util.ajaxUploadImg('/common/uploadImg', res.tempFilePaths[0], (data) => {
							this.form.qualification = JSON.parse(data.data).data.file_url
						})
					}
				})
			},
			uploadImg(img, num) {
				if (this.vuex_user.is_auth == 2) {
					uni.showModal({
						title: "温馨提示",
						content: "已认证，若需修改认证信息请联系客服处理",
						showCancel: false
					})
					return false
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						util.ajaxUploadImg('/common/uploadImg', res.tempFilePaths[0], (data) => {
							if (num == 1) {
								this.idLeft = JSON.parse(data.data).data.file_url
							} else if (num == 2) {
								this.idRight = JSON.parse(data.data).data.file_url
							}
						})
					}
				})
			},
			async btnIdCard() {
				if (this.form.name == '') {
					uni.showToast({
						title: "请填写姓名",
						icon: "none"
					})
					return false
				}
				let is_card = util.isCardID(this.form.idCard)
				if (is_card != 1) {
					uni.showToast({
						title: is_card,
						icon: "none"
					})
					return false
				}
				if (this.form.phone == '') {
					uni.showToast({
						title: "请填写手机号",
						icon: "none"
					})
					return false
				}
				if (this.form.qualification == '') {
					uni.showToast({
						title: "请先上传资质",
						icon: "none"
					})
					return false
				}

				let res = await this.$u.post("manager/ManagerAuth", {
					name: this.form.name,
					card: this.form.idCard,
					phone: this.form.phone,
					province: this.form.province + "0000",
					city: this.form.city + "00",
					organization: this.form.mechanism,
					explain: this.form.intro,
					front_img: this.idLeft,
					back_img: this.idRight,
					qualified: this.form.qualification,
					cityName: this.form.cityName
				})
				if (res.code == 200) {
					this.$u.vuex('vuex_user.is_auth', res.data.is_auth)
					uni.showToast({
						title: "提交成功，等待审核",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
					console.log(this.vuex_user)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					return false
				}
			}
		}
	}
</script>

<style>
	.main {
		min-height: 100vh;
		padding-top: 20rpx;
	}

	.body_style {
		background: #fff;
		border-radius: 16rpx;
		padding: 10rpx 30rpx;
		/* margin-top: 20rpx; */
		box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
	}
</style>
