<template>
	<view class="regist-page b-flex-y b-flex-c">

		<form @submit="formSubmit" @reset="formReset">
			<view class="r-main-view b-flex-y b-flex-c">
				<!-- 注册资料填写 -->
				<view class="r-box">
					<text class="rb-title">品牌信息</text>
					<view class="rb-input-box b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">品牌名称<text>*</text></view>
						<input class="rb-input" type="text" v-model="submitData.brand_name" name="pinpai_name"
							placeholder="请输入品牌名称" placeholder-class="input-hold-class"></input>
					</view>
				</view>

				<!-- 企业名称,企业类型,主体类型,信用代码,证件有效期,注册地址,注册资本,法人姓名 -->
				<view class="r-box">
					<text class="rb-title">企业信息</text>

					<view class="rb-upload-box b-flex-y b-flex-s">
						<view class="rb-upload-title b-flex-x">营业执照<text>*</text></view>
						<view class="rb-upload-list b-flex-x">
							<view class="rb-upload-item b-flex-y b-flex-c" @click="clickUploadLicenseImg">
								<image class="rb-upload-bg" src="../../static/regist/upload_bg.png" 
								:src="submitData.business_license?submitData.business_license:localImg.license"></image>
								<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
								<text class="rb-input-img-text">点击上传</text>
							</view>

						</view>
					</view>

					<view class="rb-input-box  rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">企业名称<text>*</text></view>
						<input class="rb-input" v-model="submitData.company_name" name="qiye_name" type="text"
							placeholder="请输入企业名称" placeholder-class="input-hold-class"></input>
					</view>
					<view class="rb-input-box  rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">企业类型<text>*</text></view>

						<picker mode="selector" @change="bindPickerChange_company_types"
							:value="company_types_arr[company_type_index]" :range="company_types_arr">
							<input @click="" class="rb-input" disabled=true v-model="company_type_show" type="text"
								name="qiye_type" placeholder="请选择" placeholder-class="input-hold-class">
							</input>
						</picker>

						<text class="b-icon icon-right b-t-gray b-t-28"></text>
					</view>
					<view class="rb-input-box rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">主体类型<text>*</text></view>
						<picker mode="selector" @change="bindPickerChange_qualification"
							:value="qualification_types_arr[qualification_type_index]"
							:range="qualification_types_arr">
							<input @click="" class="rb-input" disabled=true v-model="qualification_type_show"
								type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
							</input>
						</picker>
						<text class="b-icon icon-right b-t-gray b-t-28"></text>
					</view>
					<view class="rb-input-box  rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">信用代码<text>*</text></view>
						<input class="rb-input" v-model="submitData.agency_code" type="text" name="xinyong_code"
							placeholder="请输入信用代码" placeholder-class="input-hold-class"></input>
					</view>
					<view class="rb-input-box rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">证件有效期<text>*</text></view>
						<view class="rb-radio b-flex-x">
							<radio-group @change="idTimeChange">
								<radio value="0" checked style="transform:scale(0.9)" color="#009876">长期</radio>
								<radio value="1" style="transform:scale(0.9);margin-left: 40rpx;" color="#009876">短期
								</radio>
							</radio-group>
						</view>
					</view>

						<!-- :value="qualification_types_arr[qualification_type_index]"
							:range="qualification_types_arr" -->
							<!-- :value="areaValue" :range="areaOptions" -->
					<!-- <view class="rb-input-box b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">注册地址<text>*</text></view>
						<picker mode="region" 
							@change="bindPickerChange_address" 
						>
						</picker>
						<input class="rb-input" v-model="submitData.mailing_address" type="text" placeholder="请输入注册地址"
							placeholder-class="input-hold-class"></input>
					</view> -->

					<view class="rb-input-box  b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">注册地址<text>*</text></view>
						<picker mode="region" @change="bindPickerChange_address">
							<input @click="" class="rb-input" disabled=true v-model="areaValueShow"
								type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
							</input>
						</picker>
						<text class="b-icon icon-right b-t-gray b-t-28"></text>
					</view>
					<view class="rb-input-box rb-line b-flex-x b-flex-b">
						<!-- <view class="rb-input-title b-flex-x">注册地址<text>*</text></view> -->
						<input @click="" class="rb-input"  v-model="submitData.mailing_address"
							type="text" name="zhuti_type" placeholder="请选择" placeholder-class="input-hold-class">
						</input>
					</view>

					<view class="rb-input-box rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">注册资本<text>*</text></view>
						<input class="rb-input" v-model="submitData.extension.registered_capital" type="text" placeholder="请输入注册资本"
							placeholder-class="input-hold-class"></input>
					</view>
					<view class="rb-input-box b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">法人姓名<text>*</text></view>
						<input class="rb-input" v-model="submitData.extension.legal_person_name" type="text" placeholder="请输入法人姓名"
							placeholder-class="input-hold-class"></input>
					</view>
				</view>

				<!-- 运营人员信息:姓名,身份证号,手机号 -->
				<view class="r-box">
					<text class="rb-title">运营人员信息</text>

					<view class="rb-upload-box b-flex-y b-flex-s">
						<view class="rb-upload-title b-flex-x">运营人员身份证正反面<text>*</text></view>
						<view class="rb-upload-list b-flex-x b-flex-a">
							<view @click="clickUploadIDCardImg" class="rb-upload-item idcard-width-170 b-flex-y b-flex-c">
								<image class="rb-upload-bg " src="../../static/regist/id_people.png"
								:src="submitData.extension.business_id_card_url?submitData.extension.business_id_card_url:localImg.idCardFront"></image>
								<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
								<text class="rb-input-img-text">上传身份证头像面</text>
							</view>
							<view @click="clickUploadIDCardBackImg" class="rb-upload-item idcard-width-170 b-flex-y b-flex-c">
								<image class="rb-upload-bg " src="../../static/regist/id_guohui.png"
								:src="submitData.extension.business_id_card_back_url?submitData.extension.business_id_card_back_url:localImg.idCardBack"></image>
								<image class="rb-upload-cam" src="../../static/regist/camera.png"></image>
								<text class="rb-input-img-text">上传身份证国徽面</text>
							</view>
						</view>
					</view>

					<view class="rb-input-box rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">姓名<text>*</text></view>
						<input class="rb-input" v-model="submitData.contact_person" type="text" placeholder="请输入姓名"
							placeholder-class="input-hold-class"></input>
					</view>
					<view class="rb-input-box  rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">身份证号<text>*</text></view>
						<input class="rb-input" v-model="submitData.extension.business_id_card" type="text" placeholder="请输入身份证号"
							placeholder-class="input-hold-class"></input>
					</view>
					<view class="rb-input-box  rb-line b-flex-x b-flex-b">
						<view class="rb-input-title b-flex-x">手机号<text>*</text></view>
						<input class="rb-input" v-model="submitData.contact_number" type="text" placeholder="请输入手机号"
							placeholder-class="input-hold-class"></input>
					</view>
				</view>

				<button form-type="submit" @click="submitRegist" class="rb-regist-btn b-btn b-btn-green b-mt-60 b-mb-60"
					style="width: 100%;height: 112rpx;">提交审核</button>

			</view>
		</form>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import { getCnArea } from '../../../party/js/api';
	// import { getCnArea } from '../../../party/js/china-area';

	import { API } from '@/js/api';
	import { servers } from '@/js/server';
	import party_api from '../../../party/js/api';

	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			// 'hoverCartList': hoverCartList ,
		},
		data() {
			return {
				// zhuti_type_arr:this.get_zhuti_type_arr(),
				formData: {
					pinpai_name: "", //品牌名称

					//企业信息
					yingyezhizhao: "", //营业执照
					qiye_name: "", //企业名称
					qiye_type: "", //企业类型
					zhuti_type: "0", //主体类型
					qualification_type_show: "请选择", //主体类型
					qualification_type_index: 0, //主体类型
					xinyong_code: "", //信用代码
					id_time: "0", //证件有效期 0:长期 1:短期
					zhuce_address: "", //注册地址
					zhuce_ziben: "", //注册资本
					faren_name: "", //法人姓名

					//运营人员信息
					id_people: "", //运营人员身份证正面
					id_guohui: "", //运营人员身份证国徽面
					oper_name: "", //姓名
					oper_id: "", //身份证号
					oper_mobile: "", //手机号
				},


				submitData: {
				// qualification_type: null, // 主体类型
				// credit_end_date: '', // 营业执照有效期，格式：2006-01-02，永久用 0 表示
				// company_type: null, // 企业类型
				// legal_person_name: '', // 法人姓名
				// registered_province_code: '', // int 省份编号 110000
				// registered_city_code: '', // int 城市编号 110100
				// registered_capital: undefined, // 注册资本，单位元 100000
				// business_id_card_url: '', // 运营人员身份证图片
				// business_id_card: '', // 运营人员身份证号

					// "business_user_code": "",//
					"mobile": "",
					"status": 2,
					"update_status": 1,
					"update_pre_web_brand_user": null,
					"brand_name": "", //品牌名称
					"company_name": "", //企业名称
					"business_license": "",
					"agency_code": "",//信用代码
					"province": "",
					"city": "",
					"area": "",
					"mailing_address": "",//通讯地址
					"contact_number": "",//联系电话
					// "contact_address": "",//联系地址
					"contact_person": "",//运营人员姓名
					// "privacy_agreement": "隐私政策2020-11-23",//隐私政策
					// "vip_probation": "",//vip试用
					// "reasons_for_failing_the_review": "",//审核失败原因
					// "other_info": null,
					"extension": {
						"qualification_type": 1,//主体类型
						"credit_end_date": "0", //格式：2006-01-02，永久用 0 表示
						"company_type": 1,//企业类型
						"legal_person_name": "",//法人姓名
						"registered_province_code": "",//省份编号 110000
						"registered_city_code": "",//城市编号 110100
						"registered_capital": "",//注册资本，单位元 100000
						"business_id_card_url": "",
						"business_id_card": "",//运营人员身份证号--
						"business_id_card_back_url":"",//运营人员身份证国徽面
					},
					// "business_user_mobile": "",
					// "brand_id": 0,
					// "brand_user_name": "",
					// "now": "",
					// "service_status": null,
					// "search": "",
					// "start_time": "",
					// "end_time": "",
					// "business_user": {
					// 	"id": 0,
					// 	"mobile": "",
					// 	"name": "",
					// 	"code": "",
					// 	"search": "",
					// 	"start_time": "",
					// 	"end_time": "",
					// 	"brand_user_count": 0,
					// 	"created_at": "",
					// 	"updated_at": ""
					// }
				},
				qualification_types: [{
						label: '企业',
						value: 1
					},
					{
						label: '个体工商户',
						value: 2
					},
					{
						label: '党政机关',
						value: 3
					},
					{
						label: '事业单位',
						value: 4
					},
					{
						label: '港澳台',
						value: 5
					},
					{
						label: '社会组织',
						value: 6
					},
					{
						label: '境外',
						value: 7
					},
					{
						label: '其他组织',
						value: 100
					}
				],
				qualification_type_show: "请选择", //主体类型-显示
				qualification_type_index: 0, //主体类型
				company_types: [{
						label: '有限责任公司',
						value: 1
					},
					{
						label: '有限责任公司(自然人独资)',
						value: 2
					},
					{
						label: '有限责任公司(自然人投资或控股)',
						value: 3
					},
					{
						label: '有限责任公司(法人独资)',
						value: 4
					},
					{
						label: '股份有限责任公司',
						value: 5
					},
					{
						label: '其他',
						value: 100
					}
				],
				company_type_show: "请选择", //企业类型-显示
				company_type_index: 0, //企业类型
				areaDetail: {
					value: '',
					code: '',
					postcode: ''
				},
				// areaDetail: {"value":["天津市","天津市","河西区"],"code":["120000","120100","120103"],"postcode":"572000"},
				localImg:{
					idCardFront: '../../static/regist/id_people.png',
					idCardBack: '../../static/regist/id_guohui.png',
					license: '../../static/regist/upload_bg.png',
				}

			}
		},
		onLoad() {
			console.log("onload-", this.brandInfo.brand.id, this.zhuti_type_arr)
			this.webBrandUserGet();
		},
		onShow() {
			// console.log(JSON.stringify(this.areaOptions[0]))
		},
		computed: {
			...mapState(['brandInfo', ]),
			qualification_types_arr() {
				return this.qualification_types.map(item => item.label)
			},
			company_types_arr() {
				return this.company_types.map(item => item.label)
			},
			areaValueShow() {
				let areaDetail = this.areaDetail;
				if(!areaDetail.value)return '';
				return this.areaDetail.value.join('/')
			},
			

		},
		watch: {
			cartList() {
				this.setCartConfirmStyle();
			},
		},
		methods: {
			webBrandUserGet(){
				// util.showNone("检测是否有数据回显")

				console.log("webBrandUserGet")
				servers.post({
					url: party_api.webBrandUserGet,
					data: {
						brand_id: this.brandInfo.brand.id
					},
					isDefaultGet: false,
				})
				.then(res=>{
					console.log("webBrandUserGet-res", res)
					if(res.statusCode == 200){
						console.log("webBrandUserGet-res.data", res.data)
						if(res.data.code==0){
							if(res.data.data)this.submitData = res.data.data

							this.checkSubmitDataIsNull()
						}else{
							util.showNone(res.data.message)
						}
					}
				})
				.catch(err=>{
					console.log("webBrandUserGet-err", err)
				})
			},
			checkSubmitDataIsNull(){
				if(!this.submitData.extension){
					this.submitData.extension =  {
						"qualification_type": 1,//主体类型
						"credit_end_date": "0", //格式：2006-01-02，永久用 0 表示
						"company_type": 1,//企业类型
						"legal_person_name": "",//法人姓名
						"registered_province_code":"" ,//省份编号 110000
						"registered_city_code":"",//城市编号 110100
						"registered_capital":"",//注册资本，单位元 100000
						"business_id_card_url": "",
						"business_id_card": "",//运营人员身份证号--
						"business_id_card_back_url":"",//运营人员身份证国徽面
					}
				}
			},
			//上传照片
			async clickUploadLicenseImg() {
				let ocr_type = 'BizLicenseOCR'
				console.log("clickUploadImg");
				let img = await this.getLocalImg();
				console.log("getLocalImg:", img)
				let img_url = await this.getUploadImgURL(img);
				console.log("getUploadImgURL:", img_url)
				let ocr_res = await this.getOcrFromImg(ocr_type,img_url);
				this.setOcrResult(ocr_type,ocr_res)
				this.submitData.business_license = img_url
			},
			// IDCardOCR
			async clickUploadIDCardImg() {
				let ocr_type = 'IDCardOCR'
				console.log("clickUploadIDCardImg");
				let img = await this.getLocalImg();
				console.log("getLocalImg:", img)
				let img_url = await this.getUploadImgURL(img);
				console.log("getUploadImgURL:", img_url)
				let ocr_res = await this.getOcrFromImg(ocr_type,img_url);
				this.setOcrResult(ocr_type,ocr_res)
				this.submitData.extension.business_id_card_url = img_url
			},
			async clickUploadIDCardBackImg() {
				console.log("clickUploadIDCardBackImg");
				let img = await this.getLocalImg();
				console.log("getLocalImg:", img)
				let img_url = await this.getUploadImgURL(img);
				console.log("getUploadImgURL:", img_url)
				this.submitData.extension.business_id_card_back_url = img_url
			},
			getOcrFromImg(ocr_type,img_url) {
				console.log("getOcrFromImg")
				return servers.post({
					url: party_api.webOcr,
					isDefaultGet: false,
					data: {
						ocr_type:ocr_type,
						url: img_url,
					}
				})
				.then(res=>{
					console.log("getOcrFromImg-res", res)
					if(res.statusCode == 200){
						console.log("getOcrFromImg-ocr", res.data.data)
						return res.data.data
					}
				})
				.catch(err=>{
					console.log("getOcrFromImg-err", err)
				})
			},
			getUploadImgURL(tempFilePath){
				return servers.uploadFile({
					url: party_api.webUpload,
					filePath: tempFilePath,
					name: 'file',
					formData: {}
				})
				.then(res=>{
					console.log("uploadFile-res", res)
					if(res.statusCode == 200){
						// console.log("uploadFile-url 上传成功1", res.data.data.url)
						let _data = JSON.parse(JSON.stringify(res.data))
						console.log("uploadFile-url return type", typeof(_data))
						// console.log("uploadFile-url 上传成功 接口真正数据", JSON.parse(_data))
						_data = JSON.parse(_data).data
						return _data.url
					}
				})
				.catch(err=>{
					console.log("uploadFile-err", err)
				})
			},
			//从相册获取照片
			getLocalImg() {
				console.log("clickUploadImg");
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							console.log("chooseImage", res)
							let tempFilePaths = res.tempFilePaths[0];
							resolve(tempFilePaths)
						},
						fail: (err) => {
							console.log("chooseImage-err", err)
							reject(err)
						}
					});
				})
			},
			setOcrResult(ocr_type,res){
				console.log("setOcrResult:",ocr_type, res.Response)
				if (ocr_type === 'BizLicenseOCR') {
					this.submitData.company_name = res.Response.Name;
					this.submitData.mailing_address = res.Response.Address;
					this.submitData.extension.legal_person_name = res.Response.Person;
					this.submitData.agency_code = res.Response.RegNum;
					const t =  this.company_types.find(item => item.label === res.Response.Type);
					this.submitData.extension.company_type = t.value;
					if (res.Response.Capital) {
						const num = res.Response.Capital.split('元')[0]
						this.submitData.extension.registered_capital = this.chineseToNumber(num)
					}
					if (res.Response.Period) {
						console.log("res.Response.Period-11111", res.Response.Period)
						if (res.Response.Period.indexOf('长期') !== -1 || res.Response.Period.indexOf('**') !== -1) {
							this.submitData.extension.credit_end_date = '0'
						} else {
							// 至2071年03月30日
							const dateStr = res.Response.Period.split('至')[1];
							// 2071年03月30日
							// 将年份、月份、日期分别提取出来
							const year = dateStr.slice(0, 4);
							const month = dateStr.slice(5, 7);
							const day = dateStr.slice(8, 10);
							this.submitData.extension.credit_end_date = `${year}-${month}-${day}`
						}
					}
				} else {
					this.submitData.extension.business_id_card = res.Response.IdNum
					this.submitData.contact_person  = res.Response.Name
				}
			},
			//中文转数字,
			chineseToNumber(chnStr) {
				const chnNumChar = {
					零: 0,
					壹: 1,
					贰: 2,
					叁: 3,
					肆: 4,
					伍: 5,
					陆: 6,
					柒: 7,
					捌: 8,
					玖: 9
				};
				const chnUnitChar = {
					拾: 10,
					佰: 100,
					仟: 1000,
					万: 10000,
					亿: 100000000
				};
				let total = 0;
				let section = 0;
				let number = 0;
				const chnNum = chnStr.split('');

				for (let i = 0; i < chnNum.length; i++) {
					const num = chnNumChar[chnNum[i]];
					if (typeof num !== 'undefined') {
					number = num;
					if (i === chnNum.length - 1) {
						section += number;
					}
					} else {
					const unit = chnUnitChar[chnNum[i]];
					if (typeof unit !== 'undefined') {
						section += (number * unit);
						number = 0;
						if (unit === 10000) {
						total += section * unit;
						section = 0;
						}
					}
					}
				}
				total += section + number;
				return total;
			},
			bindPickerChange_qualification(e) {
				console.log('bindPickerChange_qualification:', e.detail.value)
				this.qualification_type_index = e.detail.value
				this.qualification_type_show = this.qualification_types_arr[e.detail.value]
			},
			bindPickerChange_company_types(e) {
				console.log('bindPickerChange_company_types:', e.detail.value)
				this.company_type_index = e.detail.value
				this.company_type_show = this.company_types_arr[e.detail.value]
			},
			bindPickerChange_address(e) {
				console.log('bindPickerChange_address:', JSON.stringify(e.detail))
				this.areaDetail = e.detail
				this.submitData.extension.registered_province_code = e.detail.code[0]
				this.submitData.extension.registered_city_code = e.detail.code[1]
				this.submitData.province = e.detail.value[0]
				this.submitData.city = e.detail.value[1]
				this.submitData.area = e.detail.value[2]
			},
			selectZhuTiType() {
				console.log("selectZhuTiType")
				let that = this;
				let _list = this.qualification_types.map(item => item.label)
				console.log("_list", _list)

				// uni.showActionSheet({
				// 	itemList: _list,
				// 	success: function (res) {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 	},
				// 	fail: function (res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
			},
			idTimeChange(e) {
				console.log("id_time: ", e.detail)
				this.formData.id_time = e.detail.value
				this.submitData.extension.credit_end_date = e.detail.value == 0 ? '0' : "1"
			},

			// 提交审核
			submitRegist() {
				// if(!this.checkSubmitData())return

				// this.checkSubmitData()

				console.log("submitRegist", party_api.webBrandUserSave, this.submitData)
				const _token = uni.getStorageSync('token') || '';
				let _data = JSON.parse(JSON.stringify(this.submitData))
				if(_token)_data['token'] = _token;
				_data['status']= 2;//前端修改审核状态: 1提交资料,2实名认证,3审核成功,4审核失败 5完成 6修改审核中?
				servers.post({
					url: party_api.webBrandUserSave,
					data: _data,
					header: {
						'content-type': 'application/json',
						'token': _token,
					},
					isDefaultGet: false,
				})
				.then(res=>{
					console.log("提交注册返回:", res)
					util.routeTo("/subpackage/party/pages/login/reviewing", "nT")
					// if(res.statusCode == 200){
					// 	util.showNone("提交成功")
					// 	this.SubmitEvent()
					// }
				})
				.catch(err=>{
					console.log("submitRegist-err", err)
				})
				
			},
			checkSubmitData(){
				let {submitData} = this;
				//循环submitData,检查是否有空值
				console.log("submitData",submitData)
				let unInput_arr = []
				for (let key in submitData) {
					if (submitData[key] === '') {
						console.log("submitData key need:", key)
						unInput_arr.push(key)
					}
				}
				if(unInput_arr.length > 0){
					console.log("unInput_arr",unInput_arr.length, unInput_arr)
					util.showNone("请完善信息后提交")
					return false
				}
				return true
			},
			SubmitEvent() {
				util.routeTo("/subpackage/party/pages/login/reviewing", "nT")
			},
			formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：', e.detail.value)
			},
			//回显提交数据webBrandUserGet
			resetSubmitData(){
				const _token = uni.getStorageSync('token') || '';
				let _data = JSON.parse(JSON.stringify(this.submitData))
				if(_token)_data['token'] = _token;

				servers.post({
					url: party_api.webBrandUserGet,
					data: _data,
					header: {
						'content-type': 'application/json',
						'token': _token,
					},
					isDefaultGet: false,
				})
				.then(res=>{
					console.log("回显返回:", res)

				})
				.catch(err=>{
					console.log("submitRegist-err", err)
				})
			}

		}
	}
</script>

<style lang="scss">
	@import '~style/public.scss';
	@import '../../ui/maincss.scss';

	page {
		background-color: $b-color-gray-dd;
	}

	.regist-page {
		.r-main-view {
			width: 700rpx;

			.r-box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 28rpx;

				.rb-title {
					font-size: 32rpx;
					color: #333333;
					font-weight: 600;
				}

				.input-hold-class {
					font-size: 28rpx;
					color: #999999;
				}

				.rb-line {
					border-bottom: 1rpx solid #E5E5E5;
				}

				.rb-upload-box {
					.rb-upload-title {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
						margin: 46rpx 0 28rpx 0;

						>text {
							color: $b-color-red;
						}
					}

					.rb-upload-list {
						width: 100%;

						.rb-upload-item {
							width: 168rpx;
							height: 168rpx;

							// position: relative;
							.rb-upload-bg {
								width: 168rpx;
								height: 168rpx;
								position: absolute;
							}

							.rb-upload-cam {
								width: 48rpx;
								height: 40rpx;
								z-index: 2;
							}

							.rb-input-img-text {
								font-size: 24rpx;
								margin-top: 24rpx;
								color: #1A1A1A;
								z-index: 2;
							}
						}

						.idcard-width-170 {
							width: 280rpx;
							height: 170rpx;

							.rb-upload-bg {
								width: 280rpx;
								height: 170rpx;
								position: absolute;
							}
						}
					}

				}

				.rb-input-box {
					padding: 8rpx 0;

					.rb-input-title {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
						width: 168rpx;
						position: absolute;

						>text {
							color: $b-color-red;
						}
					}

					.rb-input {
						margin-left: 240rpx;
						height: 80rpx;
						font-size: 28rpx;
						color: #333333;
					}

					.rb-radio {
						margin-left: 240rpx;
						height: 80rpx;
					}
				}
			}
		}

	}

	.container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		padding-bottom: 0rpx;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
		/* 兼容 iOS >= 11.2 */
	}
</style>