<template>
	<view class="bg">
		<view class="title"> 身份证信息 </view>
		<view class="picture-wrapper">
			<view class="bg">
				<view class="">
					<view class="name"> 人像面 </view>
					<view class="value"> 上传身份证的人像面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userPosImagesUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.userPosImagesUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<view class="picture-wrapper">
			<view class="bg">
				<view class="">
					<view class="name"> 国徽面 </view>
					<view class="value"> 上传身份证的国徽面 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.userNegImagesUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.userNegImagesUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="申请人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<text class="disabled-text">{{state.form.name}}</text>
				<!-- <u-input v-model="" placeholder='请输入姓名' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/> -->
			</u-form-item>
			<u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<!-- <u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum" maxlength="18" inputAlign="right"/> -->
				<text class="disabled-text">{{state.form.userIdNum}}</text>
			</u-form-item>
			<u-form-item label="手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<!-- <u-input placeholder='请输入手机号' type="number" v-model="state.form.mobile" maxlength="11" inputAlign="right"/> -->
				<text class="disabled-text">{{state.form.mobile}}</text>
			</u-form-item>
		</u-form>
	</view>
	<view class="bg">
		<view class="title"> 行驶证信息 </view>
		<view class="picture-wrapper" @click="takePhotoMode(3)">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证主页 </view>
					<view class="value"> 上传行驶证的主页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.vehPosImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode(4)">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证副页 </view>
					<view class="value"> 上传行驶证的副页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="getFullImageUrl(state.form.vehNegImgUrl)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
			</view>
		</view>
		<u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
			<u-input v-model="state.form.vehicleOwnerName" placeholder="请输入车主姓名" input-align='right'/>
			</u-form-item>
			<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
				<car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input>
			</u-form-item>
			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
				<!-- <uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
					:clear="false"></uni-data-select> -->
				<u-input v-model="state.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
			</u-form-item>
		</u-form>
	</view>
	<template v-if="state.isNeedSubmitCarOwnerInfo">
		
		<view class="car-type" id="inputCarOnerInfo">
			<view
				class="car-type-item"
				v-for="(item, index) in carOwnerList"
				:key="index"
				:class="{active: state.form.ownerIdType == item.value}" @click="toggleApplyType(item)">
				{{item.name}}
			</view>
		</view>
		
		<view class="bg">
			<view class="title"> {{ labelName.title }} </view>
			
			<template v-if="state.form.ownerIdType === '101'">
				<view class="picture-wrapper" @click="takePhotoMode(1)">
					<view class="bg">
						<view class="">
							<view class="name"> 人像面 </view>
							<view class="value"> 上传身份证的人像面 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
					</view>
				</view>
				<view class="picture-wrapper" @click="takePhotoMode(2)">
					<view class="bg">
						<view class="">
							<view class="name"> 国徽面 </view>
							<view class="value"> 上传身份证的国徽面 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
						</image>
						<image v-else class="icon" :src="getFullImageUrl(state.form.ownerNegImgUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
					</view>
				</view>
			</template>
			<template v-else-if="state.form.ownerIdType === '203'">
				<view class="picture-wrapper" @click="takePhotoMode(5)">
					<view class="bg">
						<view class="">
							<view class="name"> 营业执照 </view>
							<view class="value"> 上传营业执照 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
					</view>
				</view>
			</template>
			
			<view class="picture-wrapper" @click="uploadOtherFile">
				<view class="bg">
					<view class="">
						<view class="name"> 授权书 </view>
						<view class="value"> 上传授权书 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
					</image>
					<image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
				</view>
			</view>
			<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
				<u-form-item :label="labelName.ownerName" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.form.ownerName" placeholder='请输入' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/>
				</u-form-item>
				<u-form-item :label="labelName.ownerIdNum" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input placeholder='请输入' v-model="state.form.ownerIdNum" maxlength="18" inputAlign="right"/>
				</u-form-item>
				<u-form-item :label="labelName.ownerIdAddress" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input placeholder='请输入' v-model="state.form.ownerIdAddress" maxlength="18" inputAlign="right"/>
				</u-form-item>
				<u-form-item label="车主手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input placeholder='请输入手机号' type="number" v-model="state.form.ownerTel" maxlength="11" inputAlign="right"/>
				</u-form-item>
			</u-form>
		</view>
		
	</template>
	
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
		
	<!--证件照上传 start-->
	<uploadOcr
		:isTakePhotoModeShow="state.isTakePhotoModeShow"
		:phoneType="state.choiceIndex"
		@close="close"
		@ocrResult="ocrResult">
	</uploadOcr>
	<!--证件照上传 end-->
		
	<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
	
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import { idCardOcr, vehicleLicenseOcr, releasePlateaApply, ocrAllQuery, getUserMsg, vehicleUpload } from "@/utils/network/api.js";
	import {requestNew} from "@/utils/network/request.js";
	import { getItem } from "@/utils/storage.ts"
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { navTo, uploadFile,msg, getFullImageUrl, replaceBaseImageUrl } from "@/utils/utils";
	import uploadOcr from '@/components/uploadOcr';
	
	interface OCRData {
		imageUrl: string,
		bizContent: string,
		screditCode: string,
		enddate: string
	}
	
	// ########
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	
	const ownerCurrent = ref(0);
	const carOwnerList = ref([
		{ name: "个人", value: "101" },
		{ name: "企业", value: "203" },
	])
	
	const show1 = ref(false)
	const isSelfSelect = ref(false)
	
	const state = reactive({
	isSelfRange:[
		{
			value: "1",
			label: "是"
		}, {
			value: "2",
			label: "否"
		}
	],
		showImg: true,
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		form: {
			name: "", // 开户人姓名
			userPosImagesUrl: '',
			userNegImagesUrl: '',
			userIdNum: '',
			mobile:"",
			vehPosImgUrl: "", //行驶证正面
			vehNegImgUrl: "", //行驶证证反面
			vehiclePlate: "",
			vehiclePlateColor: "",
			vehicleOwnerName: "", //车主姓名，ocr识别行驶证
			ownerName: "",
			ownerPosImgUrl: "",
		    ownerNegImgUrl: "",
			ownerIdNum:"",//车主证件号
			ownerIdAddress: "",
			ownerIdType: "",
			ownerTel: "",
			proxyUrl:"",//授权书图片地址
		},
		vehiclePlateColorStr: "",
		colorRange: [],
		isNeedSubmitCarOwnerInfo: false, // 是否需要上传车主信息
	});
	
	const labelName = computed(() => {
		if (state.form.ownerIdType === '101') {
			return {
				title: "车主身份证信息",
				ownerName: '车主姓名',
				ownerIdNum: "车主证件号码",
				ownerIdAddress: '证件地址',
			}
		} else if (state.form.ownerIdType === '203') {
			return {
				title: "单位证件相关信息",
				ownerName: '单位名称',
				ownerIdNum: "单位识别码",
				ownerIdAddress: '单位地址',
			}
		} else {
			return {
				ownerName: '',
				ownerIdNum: "",
				ownerIdAddress: '',
			}
		}
	})
	
	const changeColor = (item: any) => {
		state.form.vehiclePlateColor = item[0].value
		state.vehiclePlateColorStr = item[0].label
	}
	
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	
	const savaHandle = () => {
		
		if (!paramsVerify()) return;
		
		let params = state.form
		
		const options = {
			type: 2,
			data: params,
			method: "POST",
			showLoading: true,
		};
		
		requestNew(releasePlateaApply, options).then((res) => {
			// 需不需要上传车主信息，1： 需要 2：不需要
			if (res.flag === 2) {
				uni.reLaunch({
					url: `/subpackage/after-sale/rescind-carId/result`
				})
			} else {
				msg('请上传车主相关信息')
				state.form.ownerIdType = carOwnerList.value[0].value
				console.log(state.form.ownerIdType)
				console.log(carOwnerList.value)
				state.isNeedSubmitCarOwnerInfo = true
				
				setTimeout(() => {
					scrollToElement()
				}, 500)
			}
		});
	};
	
	// 必填字段校验
	const paramsVerify = () => {
		let isVerify = true;
		if(!state.form.vehPosImgUrl){
			msg('请上传行驶证主页');
			isVerify = false;
		} else if(!state.form.vehNegImgUrl){
			msg('请上传行驶证副页');
			isVerify = false;
		} else if(!state.form.vehiclePlate){
			msg('请输入车牌号');
			isVerify = false;
		} else if(!state.form.vehiclePlateColor){
			msg('请选择车牌颜色');
			isVerify = false
		} else if (state.isNeedSubmitCarOwnerInfo) {
			if(state.form.ownerIdType === '101' && !state.form.ownerPosImgUrl){
				msg('请上传车主身份证人像面照片');
				isVerify = false
			} else if(state.form.ownerIdType === '203' && !state.form.ownerPosImgUrl){
				msg('请上传公司营业执照');
				isVerify = false
			} else if(state.form.ownerIdType === '101' && !state.form.ownerNegImgUrl){
				msg('请上传车主身份证国徽面照片');
				isVerify = false
			} else if(!state.form.ownerName){
				msg(`请填写${labelName.value.ownerName}`);
				isVerify = false
			} else if(!state.form.ownerIdNum){
				msg(`请填写${labelName.value.ownerIdNum}`);
				isVerify = false
			} else if(!state.form.ownerIdAddress){
				msg(`请填写${labelName.value.ownerIdAddress}`);
				isVerify = false
			} else if(!state.form.ownerTel){
				msg('请填写车主手机号');
				isVerify = false
			} else if(!state.form.proxyUrl){
				msg('请上传授权书');
				isVerify = false
			}
		}
		
		return isVerify;
	}

	onLoad((option : any) => {
		// navTo(`/subpackage/after-sale/rescind-carId/result`);
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
		getUserInfo()
	});
	
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	
	const camera = () => {
		state.phoneType = 0
	}
	
	const close = (e) => {
		state.isTakePhotoModeShow = e
	}
	
	const takePhotoMode = (index: number) => {
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	
	const ocrResult = (data: OCRData) => {
		let bizContent = data.bizContent = data.bizContent ? JSON.parse(data.bizContent) : {}
		// 1: 身份证正面 2：身份证反面 3： 行车本正页 4：行车本副业 5：营业执照
		if (state.choiceIndex === 1) {
			state.form.ownerName = bizContent.name
			state.form.ownerIdNum = bizContent.idno
			state.form.ownerIdAddress = bizContent.address
			state.form.ownerPosImgUrl = bizContent.imageUrl
		} else if (state.choiceIndex === 5) {
			
			state.form.ownerName = bizContent.unitName
			state.form.ownerIdNum = bizContent.screditCode
			state.form.ownerIdAddress = bizContent.address
			state.form.ownerPosImgUrl = bizContent.imageUrl
			
		} else if (state.choiceIndex === 2) {
			state.form.ownerNegImgUrl =  bizContent.imageUrl
			
		} else if (state.choiceIndex === 3) {
			state.form.vehicleOwnerName = bizContent.man
			state.form.vehPosImgUrl = bizContent.imageUrl
			if (bizContent.plate_a.length > 8) {
				state.form.vehiclePlate = bizContent.plate_a.substring(0, 8);
			} else {
				state.form.vehiclePlate = bizContent.plate_a;
			}
			
		} else if (state.choiceIndex === 4) {
			state.form.vehNegImgUrl = bizContent.imageUrl
		}
	}
	
	interface uploadFileParams{
		imageUrl: string
	}
	
	// 授权证书上传
	const uploadOtherFile = () => {
		uni.chooseImage({
			count: 1, // 只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: (res) => {
				uploadFile(res.tempFilePaths[0]).then((data: uploadFileParams) => {
					state.form.proxyUrl = data.imageUrl
				})
			},
		});
	}
	
	// 获取当前用户信息详情
	const getUserInfo = () => {
		let option = {
			type: 2,
			data: {},
			method: "POST",
			showLoading: true,
		}
		requestNew(getUserMsg, option).then(res => {
			state.form.name = res.userName
			state.form.userPosImagesUrl = replaceBaseImageUrl(res.userPosImgUrl)
			state.form.userNegImagesUrl = replaceBaseImageUrl(res.userNegImgUrl)
			state.form.userIdNum = res.userIdNum
			state.form.mobile = res.mobile
			
		})
	}
	
	const toggleApplyType = (item) => {
		state.form.ownerIdType = item.value;
		state.form.ownerName = "";
		state.form.ownerPosImgUrl = "";
		state.form.ownerNegImgUrl = "";
		state.form.ownerIdNum = "";
		state.form.ownerIdAddress = "";
		state.form.proxyUrl = "";
		state.form.ownerTel = "";
	}
	
	// 跳转原原色
	const scrollToElement = () => {
	  uni.createSelectorQuery()
	    .select('#inputCarOnerInfo') // 选择目标元素
	    .boundingClientRect((rect) => { // 获取元素的位置信息
			console.log(rect)
	      if (rect) {
	        // rect 对象包含了元素的位置信息，如 top, left, width, height 等
	        console.log('Element position:', rect);
	
	        // 使用 uni.pageScrollTo 跳转到该元素位置
	        uni.pageScrollTo({
	          scrollTop: rect.top, // 滚动到目标元素的顶部位置
	          duration: 300, // 滚动动画的持续时间（毫秒）
	        });
	      }
	    })
	    .exec(); // 执行查询
	};
</script>

<style lang="scss" scoped>
	.bg{
		background-color: white;
		width: 88%;
		margin:0 auto;
		margin-top: 20rpx;
		border-radius: 12rpx;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
	}
	.card {
		display: flex;
		margin: 0 20rpx;
		align-items: center;
	}
	
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
	
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.action {
		position: absolute;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	::deep.uni-select {
		font-size: 13px;
		height: 30px;
		line-height: 30px;
	}
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.choice-takePhoto {
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.choice-takePhoto>view:first-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
		background-color: white;
	}
	
	.choice-takePhoto>view:last-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 6rpx solid rgba(127, 127, 127, 0.1);
		background-color: white;
	}
	
	.choice-takePhoto>view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	}
	
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.car-type{
		width: 400rpx;
		height: 68rpx;
		margin: 50rpx auto;
		border-radius: 68rpx;
		border: 1px #CCB375 solid;
		font-size: 28rpx;
		overflow: hidden;
		display: flex;
		.car-type-item{
			width: 50%;
			height: 100%;
			line-height: 68rpx;
			text-align: center;
			color: #CCB375;
			flex-shrink: 0;
			flex-grow: 0;
		}
		.active{
			color: #FFFFFF;
			background-color: #CCB375;
		}
	}
	.disabled-text{
		color: #999999;
	}
	.uni-list{
		width: 88%;
		margin: 24rpx auto;
		.left-owner-radio{
			margin-right: 12rpx;
		}
	}
</style>