<template>
	<view>
		<view class="pd30" style="padding: 30rpx 30rpx 180rpx;">
			<view class="wBox">
				<uni-forms ref="baseForm" label-width="100">
					<uni-forms-item label="所属协会" required>
						<view style="width: 60vw;overflow:auto;">
							<uni-data-picker v-model="form.parentId" :localdata="tree"
									:readonly="type&&parentId!=-1&&parentId!=0" :clear-icon="false"
									:map="{text:'label',value:'id'}" popup-title="请选择">
							</uni-data-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item v-if="form.memCode" label="会员编号" required>
						<uni-easyinput v-model="form.memCode" disabled />
					</uni-forms-item>

					<uni-forms-item label="机构名称" required>
						<uni-easyinput v-model="form.name" :disabled="type" placeholder="机构名称" /></uni-forms-item>

					<uni-forms-item label="所属省份" required>
						<uni-data-select :clear="false" :disabled="type&&(belongProvinceId||belongProvinceId==0)"
							v-model="form.belongProvinceId" :localdata="regionsList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="社会信用代码" required>
						<uni-easyinput v-model="form.creditCode" :disabled="type&&!!creditCode&&newResult" />
					</uni-forms-item>
					<uni-forms-item label="联系人" required>
						<uni-easyinput v-model="form.siteContact" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required>
						<uni-easyinput v-model="form.siteTel" />
					</uni-forms-item>
					<uni-forms-item label="认证地址" required>
						<uni-data-picker v-model="form.coordinates1" @change="changeCoordinates1" :localdata="regionsList"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="详细地址" required>
						<uni-easyinput v-model="form.adress" placeholder="请输入详细地址" type='textarea' /></uni-forms-item>
					<uni-forms-item label="法人姓名" required>
						<uni-easyinput v-model="form.legal" />
					</uni-forms-item>

					<uni-forms-item v-if="form.deptType==6&&activeStatus!= 0" label="是否申请考点" required>
						<uni-data-checkbox v-model="form.applyPoints" :localdata="yesno" />
					</uni-forms-item>

					<uni-forms-item label="法人身份证" required>
						<view class="imgArea">
							<uni-file-picker v-model="imgfront" @delete="delimgFont" return-type="object" limit="1"
								@select="upIdCardImgFront" :image-styles="imageStylesZJ">
								<view>国徽面</view>
							</uni-file-picker>
							<uni-file-picker style="margin-top: 30px;" v-model="imgBack" @delete="delimgBack"
								return-type="object" limit="1" @select="upIdCardImgBack" :image-styles="imageStylesZJ">
								<view>头像面</view>
							</uni-file-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item label="营业执照" required>
						<uni-file-picker limit="1" v-model="businessLicenseArr" file-extname="png,jpg,jpeg,pdf"
							file-mediatype="all" @select="selectFile" @delete="delSupplementFile"></uni-file-picker>
			
					</uni-forms-item>
					<uni-forms-item label="机构照片" required>
						<uni-file-picker v-model="picArrR" limit="3" mode="grid" file-mediatype="image"
							@select="upPicArr" @delete="delpicArr">
						</uni-file-picker>
					</uni-forms-item>
				</uni-forms>
				<view class="fixedBottom">
					<button class="btn-red" @click="submit()">确定</button>
				</view>
			</view>

		</view>
	</view>

	<uni-popup ref="popup" type="bottom">
		<view class="popBody">
			<view class="tt">选择缴费年限</view>
			<view class="pickitem" v-for="(item,index) in years" :key="index" @click="bindChange(item)">
				{{item}}年
				<uni-icons v-if="form.renewYear == item" type="checkmarkempty" size="20" color="green"></uni-icons>
				<uni-icons v-else type="checkmarkempty" size="20" color="white"></uni-icons>
			</view>

			<view style="margin: 30rpx 0;">
				<button class="btn-red" @click="submitForm">确定</button>
			</view>
		</view>

	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/common/api.js';
	import _ from 'underscore'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import config from '@/config.js'
	const app = getApp();
	const form = ref({
		type: '1',
		applyPoints: '0'
	});
	const typeList = ref([{
		value: '1',
		text: '企业'
	}, {
		value: '2',
		text: '国家组织'
	}, {
		value: '3',
		text: '社会组织'
	}, {
		value: '4',
		text: '其他'
	}])
	const years = ref(['1', '2', '3', '4', '5'])
	const yesno = ref([{
		value: '0',
		text: '否'
	}, {
		value: '1',
		text: '是'
	}, ])
	const regionArr = ref();
	const regionsList = ref([]);
	const tree = ref([]);
	const showDirectly = ref(true)
	const directUnderFlag = ref(0)
	const current = ref(0);
	const groupId = ref(0);
	const currIndex = ref(null);
	const signType = ref();
	const editIng = ref(true);
	const isSign = ref(false);
	const type = ref(false) // 第一次选择认证认证类型
	const flag = ref(false)
	const result = ref(false)
	const query = ref({
		type: 0
	});
	const activeStatus = ref(0)
	const active = ref(0)
	const memberInfo = ref({})
	const authenticationStatus = ref()
	const authenticationStatusa = ref()
	const newResult = ref(false)
	const popup = ref(null)
	const belongProvinceId = ref()
	const picArr = ref([])
	const picArrR = ref([])
	const businessLicenseArr = ref([])
	const list1 = ref([{
		title: '完善信息'
	}, {
		title: '会员认证'
	}])
	const imageStylesZJ = ref({
		width: '400rpx',
		height: '253rpx'
	});
	const indicatorStyle = ref(`height: 50px;`)
	const imgfront = ref({})
	const imgBack = ref({})
	const creditCode = ref()
	const parentId = ref()
	const legalIdcPhoto1 = ref('')
	const legalIdcPhoto2 = ref('')
	onLoad(option => {
		
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	});

	function init() {
		getRegionsList()
		getForm()
	}

	function getForm() {
		api.getMyOwnMemberInfo().then(res => {
			newResult.value = res.data.newResult //
			result.value = res.data.result // 认证缴费状态
			authenticationStatusa.value = res.data.authenticationStatus
			showDirectly.value = !res.data.memberInfo.associateId
			activeStatus.value = res.data.memberInfo.activeStatus
			directUnderFlag.value = res.data.memberInfo.directUnderFlag
			// 认证信息
			if (authenticationStatusa.value == 0 || authenticationStatusa.value == 3) {
				type.value = false
			} else {
				type.value = true
			}
			// 至少审核通过一次
			if (authenticationStatusa.value != 0) {
				if (newResult.value) {
					// 至少认证过一次
					flag.value = true
				} else {
					// 没有认证
					flag.value = false
				}
			}
			form.value = {
				...res.data.dept,
				...res.data.memberInfo
			}
			getTree()
			form.value.deptType = res.data.dept.deptType
			form.value.parentId = form.value.parentId.toString()
			creditCode.value = form.value.creditCode
			belongProvinceId.value = form.value.belongProvinceId
			parentId.value = form.value.parentId
			if (form.value.regionId){
				 form.value.coordinates1 = form.value.regionId
			} else if(form.value.cityId){
				form.value.coordinates1 = form.value.cityId
			} else if(form.value.provinceId){
				form.value.coordinates1 = form.value.provinceId
			} else {
				form.value.coordinates1 = ''
			}
			if(form.value.businessLicense){
				try{
					businessLicenseArr.value = JSON.parse(form.value.businessLicense) || []
				}catch(e){
					businessLicenseArr.value=[{url:form.value.businessLicense,name:'营业执照'}]
				}
			}
			if(form.value.legalIdcPhoto){
				legalIdcPhoto1.value = form.value.legalIdcPhoto.split(',')?.[0] || ''
				legalIdcPhoto2.value = form.value.legalIdcPhoto.split(',')?.[1] || ''
				if(legalIdcPhoto1.value.indexOf('http')==-1){
					legalIdcPhoto1.value = config.baseUrl_api + legalIdcPhoto1.value
				}
				if(legalIdcPhoto2.value.indexOf('http')==-1){
					legalIdcPhoto2.value = config.baseUrl_api + legalIdcPhoto2.value
				}
				imgfront.value = {
					url: legalIdcPhoto1.value,
					name: '身份证正面',
					extname: 'png'
				}
				imgBack.value = {
					url:legalIdcPhoto2.value,
					name: '身份证反面',
					extname: 'png'
				}
			}
			if(form.value.pictures){
				picArrR.value = []
				picArr.value = []
				var arr = form.value.pictures.split(',') || []
				if (arr.length > 0) {
					arr = _.map(arr, (p) => {
						if(p.indexOf('http')==-1){
							p = config.baseUrl_api + p
						}
						var obj = {
							url: p,
							name: '图片',
							extname: 'png'
						}
						picArrR.value.push(obj)
						picArr.value.push(p)
					})
					
				}
			}
		
			if(!form.value.applyPoints||form.value.applyPoints==''){
				form.value.applyPoints = '0'
			}
		})
	}

	function getTree() {
		if (authenticationStatusa.value == 0 || authenticationStatusa.value == 3 || authenticationStatusa.value == 1) {
			var obj = {
				selfDeptId: '-1',
				webSiteShow: 1,
				showDisabled: 1
			}
			api.certifiedDeptTree(obj).then(res => {
				tree.value = res.data
			})
		} else {
			var obj = {
				selfDeptId: '-1',
				showDisabled: 1,
				showDirect: authenticationStatusa.value == 2 || authenticationStatusa.value == 5 ||
					authenticationStatusa.value == 4 ? 1 : null
			}
			api.deptTreeSelect(obj).then(res => {
				tree.value = res.data
			})
		}
	}


	function getRegionsList() {
		api.regionsList().then(res => {
			regionsList.value = res.data;
		});
	}

	function submit() {
		// 验证必填项
		if (form.value.name == '') {
			uni.showToast({
				title: '请填写机构名称',
				icon: 'none'
			})
			return
		}
		if (form.value.creditCode == '') {
			uni.showToast({
				title: '请填写社会信用代码',
				icon: 'none'
			})
			return
		}
		if (form.value.siteContact == '') {
			uni.showToast({
				title: '请填写联系人',
				icon: 'none'
			})
			return
		}

		if (form.value.siteContact == '') {
			uni.showToast({
				title: '请填写联系人',
				icon: 'none'
			})
			return
		}

		if (form.value.siteTel == '') {
			uni.showToast({
				title: '请填写联系方式',
				icon: 'none'
			})
			return
		}

		if (form.value.coordinates1 == '') {
			uni.showToast({
				title: '请选择认证地址',
				icon: 'none'
			})
			return
		}
		if (form.value.adress == '') {
			uni.showToast({
				title: '请填写详细地址',
				icon: 'none'
			})
			return
		}
		if (form.value.legal == '') {
			uni.showToast({
				title: '请填写法人姓名',
				icon: 'none'
			})
			return
		}
		if (legalIdcPhoto1.value == '' || legalIdcPhoto2.value == '') {
			uni.showToast({
				title: '请上传法人身份证',
				icon: 'none'
			})
			return
		}
		if (form.value.businessLicense == '') {
			uni.showToast({
				title: '请上传营业执照',
				icon: 'none'
			})
			return
		}
		if (picArr.value.length == 0) {
			uni.showToast({
				title: '请上传机构照片',
				icon: 'none'
			})
			return
		}

		form.value.duanPrice = undefined
		form.value.jiPrice = undefined
		if (form.value.parentId == -1 || form.value.parentId == 0) {
			uni.showToast({
				title: '请选择所属协会',
				icon: 'none'
			})
			return
		}
		const dataInfo = {
			parentId: form.value.parentId,
			creditCode: form.value.creditCode,
			legal: form.value.legal,
			businessLicense:form.value.businessLicense,
			pictures: picArr.value.toString(),
			memId: form.value.memId,
			id: form.value.deptId,
			name: form.value.name,
			regionId: form.value.coordinates1,
			// cityId: form.value.cityId,
			// provinceId: form.value.provinceId,
			adress: form.value.adress,
			belongProvinceId: form.value.belongProvinceId,
			deptType: form.value.deptType,
			legalIdcPhoto: [legalIdcPhoto1.value,legalIdcPhoto2.value]?.join(','),
			applyPoints: form.value.applyPoints,
			siteContact: form.value.siteContact,
			siteTel: form.value.siteTel
		}
		console.log(dataInfo)
		if (activeStatus.value == 0) {
			api.active(dataInfo).then(res => {
				uni.showModal({
					content: '激活成功,返回首页',
					success: function(resp) {
						if (resp.confirm) {
							uni.reLaunch({
								url:`/pages/index/index`
							})
						} else {
							uni.navigateBack()
						}
					}
				})
			})
		} else {
			api.editMyMemberCertifiedInfo(dataInfo).then(res => {
				popup.value.open()
			})
		}
	}
	function changeCoordinates1(e){
		console.log(e)
	}
	function submitForm() {
		if (!form.value.renewYear) {
			uni.showToast({
				title: '请选择缴费年限',
				icon: 'none'
			})
			return
		}
		api.centerCommit({
			renewYear: form.value.renewYear
		}).then(res => {
			uni.showModal({
				content: `缴费等待审核中！`,
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			})
		})
	}

	function upIdCardImgFront(e) {
		const tempFilePaths = e.tempFilePaths;
		const imgUrl = tempFilePaths[0]
		if (!imgUrl) {
			return
		}
		uni.showLoading({
			title: '加载中'
		})
		api.uploadImg(e).then(data => {
			legalIdcPhoto1.value = data.msg
		})
	}

	function upIdCardImgBack(e) {
		const tempFilePaths = e.tempFilePaths;
		const imgUrl = tempFilePaths[0]
		if (!imgUrl) {
			return
		}
		uni.showLoading({
			title: '加载中'
		})
		api.uploadImg(e).then(data => {
			legalIdcPhoto2.value = data.msg
		})
	}

	function delimgFont() {
		imgfront.value = {}
		legalIdcPhoto1.value = ''
	}

	function delimgBack() {
		imgBack.value = {}
		legalIdcPhoto2.value = ''
	}

	let selectFileValue = {}

	function selectFile(e) {
		console.log(e)
		let file = e.tempFiles[0]
		if (!file) {
			return
		}
		api.uploadFile(e).then(data => {
			selectFileValue = {
				url: data.msg,
				name: file.name,
				extname: file.extname
			}
			form.value.businessLicense = JSON.stringify([selectFileValue])
			console.log(selectFileValue,form.value.businessLicense)
		})
	}

	function delSupplementFile() {
		selectFileValue = {}
	}

	function upPicArr(e) {
		const tempFilePaths = e.tempFilePaths;
		const imgUrl = tempFilePaths[0]
		if (!imgUrl) {
			return
		}
		uni.showLoading({
			title: '加载中'
		})
		api.uploadImg(e).then(data => {
			picArr.value.push(data.msg)
			// form.value.pictures
			console.log(picArr.value)
		})
	}

	function delpicArr(e) {
		picArr.value.splice(e.index, 1)
		console.log(picArr.value, picArrR.value)
	}


	function bindChange(e) {
		console.log(e)
		form.value.renewYear = e
	}
</script>

<style lang="scss" scoped>
	:deep(.file-picker__progress){     opacity: 0; }
	:deep(.input-value){padding: 0 5px;}
	.pickitem {
		height: 40px;
		text-align: center;
		line-height: 40px;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.popBody {
		background: #fff;
		padding: 30rpx;
	}              

	:deep(.uni-data-tree) {
		border: 1px solid #dcdfe6;
		border-radius: 4px;

		.selected-list {
			justify-content: start;
		}
	}

	:deep(.uni-select__input-placeholder) {
		font-size: 30rpx;
	}

	:deep(.uni-easyinput__content-input) {
		font-size: 30rpx;
	}

	:deep(.uni-easyinput__placeholder-class) {
		font-size: 30rpx;
		color: grey;
	}

	.wBox {
		width: 700rpx;
		padding: 30rpx;
		margin: 20rpx auto 0;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
		border-radius: 15rpx;
	}

	.imgArea {
		padding: 1px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
</style>