<template>
	<view>
		<view class="pd30" style="padding: 30rpx 30rpx 180rpx;">
			<view class="wBox">
				<uni-forms ref="baseForm" :modelValue="form" label-width="100">
					<uni-forms-item label="所属协会" required>
						<uni-data-picker style="width: 82%;" v-model="form.parentId" 
							:localdata="tree" 
							:readonly="type&&parentId!=-1&&parentId!=0"
							:clear-icon="false" :map="{text:'label',value:'id'}" 
							popup-title="请选择" @change="onchange"
							@nodeclick="onnodeclick"></uni-data-picker>
					</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"
							: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="form.businessLicense" file-extname="png,jpg,jpeg,pdf,zip"
							file-mediatype="all" @select="selectFile(form,$event)"
							@delete="delSupplementFile(form)"></uni-file-picker>

					</uni-forms-item>
					<uni-forms-item label="机构照片" required>
						<uni-file-picker v-model="picArr" @delete="delpicArr" limit="3" @select="upPicArr">
						</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>
			
			<button class="btn-red" @click="submitForm">确定</button>
		</view>

	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/common/api.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import config from '@/config.js'
	const app = getApp();
	const form = ref({
		type: '1'
	});
	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 list1 = ref([{
		title: '完善信息'
	}, {
		title: '会员认证'
	}])
	const imageStylesZJ = ref({
		width: '400rpx',
		height: '253rpx'
	});
	const indicatorStyle=ref(`height: 50px;`)
	onLoad(option => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	});

	function init() {
		getRegionsList()
		getTree()
		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
			}
			form.value.parentId = form.value.parentId.toString()
			belongProvinceId.value = form.value.belongProvinceId
		})
	}

	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
		}
		
		//
		popup.value.open()
	}
	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) {
		let file = e.tempFiles[0]
		if (!file) {
			return
		}
		uni.showLoading({
			title: '加载中'
		});
	}
	function bindChange(e){
		console.log(e)
		form.value.renewYear = e
	}
</script>

<style lang="scss" scoped>
		.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>