<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					姓名
				</view>
				<view class="r">
					<input type="text" v-model="name" placeholder="请输入" :disabled="disabled">
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					手机号
				</view>
				<view class="r">
					<input type="number" v-model="phone" placeholder="请输入" :disabled="disabled">
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					身份证号
				</view>
				<view class="r">
					<input type="text" v-model="idCard" placeholder="请输入" :disabled="disabled">
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					主体名称
				</view>
				<view class="r">
					<input type="text" v-model="fullName" placeholder="请输入" :disabled="disabled">
				</view>
			</view>
			<view class="item2">
				<view class="l">
					主体类型
				</view>
				<view class="r u-flex u-col-center ">
					<view class="i" :class="{on:index1 == index}" v-for="(item,index) in list1" :key="index"
						@click="change1(index)">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
			<view class="item2">
				<view class="l">
					业务类型
				</view>
				<view class="r u-flex u-col-center ">
					<view class="i" :class="{on:index2 == index}" v-for="(item,index) in list2" :key="index"
						@click="change2(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="item2">
				<view class="l">
					业务等级
				</view>
				<view class="r u-flex u-col-center ">
					<view class="i" :class="{on:index3 == index}" v-for="(item,index) in list3" :key="index"
						@click="change3(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					所在地区
				</view>
				<view class="r u-flex u-col-center u-row-right" @click="visible=true">
					<text v-if="areaCode">{{areaCode}}</text>
					<text v-else>请选择</text>
					<uni-icons type="right" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					详细地址
				</view>
				<view class="r">
					<input type="text" v-model="address" placeholder="请输入" :disabled="disabled">
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item3">
				<view class="l">
					营业执照
				</view>
				<view class="r" @click="upload">

					<image :src="$config.imageBaseUrl + businessLicenseUrl" mode="aspectFill" v-if="businessLicenseUrl"></image>
					<image src="@/static/images/mine/up.png" mode="aspectFill" v-else></image>
				</view>
			</view>
		</view>
		<view class="f-btn" :class="disabled?'f-info':''" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
	import {fastAuthentication,authenticationData} from '@/api/mine/index.js'
	import { enterpriseTpye } from '@/api/dictionary.js'
	import {
		uploadCommon
	} from '@/api/common.js'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '420111',
				column: 3,
				address: "",
				areaCode: "",
				bodyType: "家庭农场",
				idCard: "",
				businessLicenseUrl: "",
				businessLevel: "国家级",
				fullName: "",
				phone: "",
				name: "",
				businessType: "种植",
				list1: ['1', '2', '3', '4'],
				list2: ['种植', '畜禽养殖', '水产养殖', '其他', '农业生产服务'],
				list3: ['国家级', '省级', '市级', '区县级', '普通'],
				username: '',
				gender: 1,
				index1: 0,
				index2: 0,
				index3: 0,
				id: '',
				userId: "",
				disabled:false,
				baseId:'',

			}
		},
		onLoad() {
			let user = uni.getStorageSync('user')
			this.userId =  user.userId
			if (!this.userId) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			this.getData()
			enterpriseTpye().then(res=>{
				this.list1 = res.data
				console.log('resssss',res)
			})
			// authenticationStatus(this.userId).then(res=>{
			// 	console.log('ressss',res)
			// 	res.data.status == 2 ? this.disabled = false : this.disabled = true
			// })
		},
		methods: {
			upload() {
				uni.chooseImage({
					count: 1, // 限制选择文件的数量，这里只选择1个文件
					sizeType: ['compressed'], // 限制选择文件的类型，这里只选择压缩过的文件
					success: (res) => {
						uploadCommon({
							"filePath": res.tempFilePaths[0]
						}).then(res => {
				
					this.businessLicenseUrl = res.fileName
					})
					}
					
				})
			},
			getData() {
				authenticationData({"userId":this.userId}).then(res => {
				// 判断认证状态是否为驳回,只有驳回才能修改
				res.data.status == 2 ? this.disabled = false : this.disabled = true
					if (res.code == 200) {
						if (res.data) {
							this.id = res.data.id
							this.name = res.data.name
							this.phone = res.data.phone
							this.idCard = res.data.idCard
							this.fullName = res.data.fullName
							this.bodyType = res.data.bodyType
							this.businessType = res.data.businessType
							this.businessLevel = res.data.businessLevel
							this.areaCode = res.data.areaCode
							this.address = res.data.address
							this.businessbusinessLicenseUrlUrl = res.data.businessLicenseUrl
							this.index1 = this.list1.findIndex(item => item == this.bodyType)
							this.index2 = this.list2.findIndex(item => item == this.businessType)
							this.index3 = this.list3.findIndex(item => item == this.businessLevel)
							this.baseId = res.data.baseId
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						});
					}
					console.log(res)

				})
			},
			submit() {
				let url = ''
				// if (this.id) {
				// 	url = '/xnzt/prove/updateProve'
				// } else {
				// 	url = '/xnzt/prove/saveProve'
				// }
				let fromData = {
					address: this.address,
					areaCode: this.areaCode,
					bodyType: this.bodyType,
					idCard: this.idCard,
					businessLicenseUrl: this.businessLicenseUrl,
					businessLevel: this.businessLevel,
					fullName: this.fullName,
					phone: this.phone,
					name: this.name,
					businessType: this.businessType,
					userId: this.userId,
					baseId:this.baseId
				}
				if(!this.baseId) delete fromData.baseId
				fastAuthentication(fromData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: "none",
							duration: 1500
						});

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						});
					}
					console.log(res)

				})
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.areaCode = val.code
				this.visible = false
			},
			cancel() {
				this.visible = false
			},

			change1(index) {
				this.index1 = index
				this.bodyType = this.list1[index].dictValue
			},
			change2(index) {
				this.index2 = index
				this.businessType = this.list2[index]
			},
			change3(index) {
				this.index3 = index
				this.businessLevel = this.list3[index]
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #4892FD;

	.container {
		padding: 30rpx 30rpx 200rpx;

		.f-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			right: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: $color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}
		.f-info{
			background: #909399;
		}


		.list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			width:100%;
			.item3 {
				padding: 20rpx 0;

				.l {
					line-height: 60rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					margin-top: 20rpx;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

			}

			.item2 {
				.l {
					padding: 20rpx 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					flex-wrap: wrap;

					.i {
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						padding: 0 20rpx;
						border-radius: 8rpx;
						margin: 15rpx 10rpx 0 0;
						color: #666;
						border: 2rpx solid #eee;
						font-size: 24rpx;
					}

					.on {
						border: 2rpx solid $color;
						color: $color;
						background-color: #EEF7FF;
					}
				}
			}

			.item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: 0;
				}

				.l {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 60rpx;
					height: 60rpx;
					width: 200rpx;

					text {
						color: #c33;
						margin-left: 6rpx;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: right;

					input {
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.i {
						margin-left: 20rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}

						.on {
							color: $color;
						}
					}

					text {
						font-size: 24rpx;
						color: #666;
						margin-left: 10rpx;
					}

				}
			}
		}

	}
</style>