<template>
	<view :class="{ 'lock-scroll': popupShow }">
		<view v-if="showDirectly&&directUnderFlag==0">
			<view class="flexbox">
				<view>
					有效日期至 <text class="text-primary">{{form?.validityDate?.slice(0,10) }}</text>
				</view>
				<view>
					<text v-if="activeStatus==0&&authenticationStatusa" class="text-danger">未激活</text>
					<text v-else>
						<text v-if="authenticationStatusa == 0 ||!authenticationStatusa" class="text-danger">未认证</text>
						<text v-if="authenticationStatusa == 1" class="text-success">认证中</text>
						<text v-if="authenticationStatusa == 2" class="text-success">已认证</text>
						<text v-if="authenticationStatusa == 3" class="text-danger">认证未通过</text>
						<text v-if="authenticationStatusa == 4" class="text-danger">即将过期</text>
						<text v-if="authenticationStatusa == 5" class="text-danger">已过期</text>
					</text>
				</view>
			</view>
			<view class="flexbox" style="justify-content: flex-end;padding: 0 30rpx 40rpx;">
				<button class="btn-red" style="margin: 0 20rpx 0 0;" size="mini"
					v-if="activeStatus==0&&authenticationStatusa" @click="payTheFees">激活</button>
				<view v-else >
					<button class="btn-red" style="margin: 0 20rpx 0 0;" size="mini" :disabled="auditStatus==1||auditStatus==2||form.isPoints==0"
							@click="showApplyDialog">考点申请</button>
					<button class="btn-red" style="margin: 0 20rpx 0 0;" size="mini"  :disabled="btn"
							@click="payTheFees">去缴费</button>
					<button class="btn-red-kx" style="margin: 0 20rpx 0 0;" size="mini" v-if="form.deptType!=1"
							@click="auditEditFN">审核详情</button>
				</view>
			</view>
		</view>
		<view class="mainbox">
			<uni-list>
				<uni-list-item v-if="authenticationStatusa != 1&&authenticationStatusa != 0&&authenticationStatusa != 3"
					title="所属协会" :rightText="form.aname">
				</uni-list-item>
				<uni-list-item title="会员编号" v-if="form.menCode" :rightText="form.menCode" />
				<uni-list-item title="机构名称" :rightText="form.name" />
				<uni-list-item title="所属省份">
					<template v-slot:footer>
						<view class="frrr">
							<uni-data-picker readonly :clear-icon="false"
								v-model="form.belongProvinceId" :localdata="options">
							</uni-data-picker>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="社会信用代码"
					v-if="authenticationStatusa != 1&&authenticationStatusa != 0&&authenticationStatusa != 3&&newResult||form.associateId&&form.associateId>0||activeStatus==1"
					:rightText="form.creditCode" />
				<uni-list-item v-if="form.certSiteContact" title="联系人" :rightText="form.certSiteContact" />
				<uni-list-item v-else title="联系人" :rightText="form.contact" />
				<uni-list-item v-if="form.certSiteTel" title="联系方式" :rightText="form.certSiteTel" />
				<uni-list-item v-else title="联系方式" :rightText="form.phone" />
				<uni-list-item title="认证地址">
					<template v-slot:footer>
						<view class="frrr">
							<uni-data-picker readonly :clear-icon="false" v-if="form.certRegionId"
								v-model="form.certRegionId" :localdata="options">
							</uni-data-picker>
							<uni-data-picker readonly :clear-icon="false" v-else-if="form.certCityId"
								v-model="form.certCityId" :localdata="options">
							</uni-data-picker>
							<uni-data-picker readonly :clear-icon="false" v-else-if="form.certProvinceId"
								v-model="form.certProvinceId" :localdata="options">
							</uni-data-picker>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="认证详细地址" :rightText="form.certAddress" />
				<uni-list-item title="法人姓名" :rightText="form.certLegal||'--'" />

				<uni-list-item v-if="form.deptType==6" title="是否为考点" :rightText="form.isPoints==0?'是':'否'" />
				<uni-list-item title="法人身份证" clickable>
					<template v-slot:footer>
						<view v-if="form.legalIdcPhotoArr&&form.legalIdcPhotoArr?.length>0" class="frrr">
							<image class="ylImage" mode="aspectFit" @click="showImage(form.legalIdcPhotoArr,index)"
								v-for="(item,index) in form.legalIdcPhotoArr" :key="item" :src="item">
							</image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item title="营业执照" clickable>
					<template v-slot:footer>
						<view class="frrr" @click="download(form.businessLicenseArr[0]?.url)"
							v-if="form.businessLicenseArr&&form.businessLicenseArr?.length>0">
							<text class="text-primary">{{form.businessLicenseArr[0]?.name}}</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="机构照片" clickable>
					<template v-slot:footer >
						<view class="frrr">
							<view v-if="form.picturesArr&&form.picturesArr?.length>0" class="photoBook"
									@click="showImage(form.picturesArr,0)">
									<image mode="aspectFit" class="ylImage" :src="form.picturesArr[0]">
									</image>
									<text>共{{form.picturesArr?.length}}张</text>
								</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 弹窗添加触摸事件拦截 -->
		<uni-popup ref="applyPopup" type="center" 
			@touchmove.stop.prevent="() => {}"
			@open="onPopupOpen"
			@close="onPopupClose">
			<view class="apply-dialog" @touchmove.stop.prevent="() => {}">
				<view class="dialog-title">考点申请</view>
				<view class="dialog-content">
					<text class="remind">友情提示：非考点无法申请级位考试</text>
				</view>
				<view class="dialog-buttons">
					<button class="btn-cancel" @click="closeApplyDialog">暂不申请</button>
					<button class="btn-confirm" @click="goToApplyPage">立即申请</button>
				</view>
			</view>
		</uni-popup>
		<view class="height1"></view>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import * as loginServer from '@/common/login.js';

	import _ from 'underscore'
	import {
		ref, onUnmounted
	} from 'vue'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	const app = getApp()
	const form = ref({
		type: 1
	})
	const userType = ref()
	const activeStatus = ref(0)
	const directUnderFlag = ref(0)
	const showDirectly = ref(true)
	const authenticationStatusa = ref()
	const result = ref(false)
	const newResult = ref(false)
	const btn = ref(false)
	const type = ref(true)
	const flag = ref(false)
	const pr = ref({})
	const applicationForMembership1 = ref({})
	const options = ref([])
	const applyPopup = ref(null)
	// 新增：控制弹窗显示状态（用于锁定滚动）
	const popupShow = ref(false)
	// 考点审核状态  0 未提交 1 审核中 2 审核成功 3 审核失败
	const auditStatus = ref(0)

	onShow(() => {
		init()
		if (form.value.deptType != 1) { // 修复：原代码deptType未定义，改为form.value.deptType
			getMyStatusAPI()
		}
	})

	// 页面卸载时恢复滚动（防止异常锁死）
	onUnmounted(() => {
		uni.setPageScrollEnabled({ enabled: true })
		popupShow.value = false
	})

	function init() {
		api.regionsList().then(res => {
			options.value = res.data
		})
		api.getMyOwnMemberInfo().then(res => {
			console.log(res)
			userType.value = app.globalData.userType
			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
			pr.value = res.data.pr
			directUnderFlag.value = res.data.memberInfo.directUnderFlag
			if (authenticationStatusa.value == 0) {
				btn.value = false
			} else if (authenticationStatusa.value == 1) {
				btn.value = true
			} else {
				btn.value = !result.value
			}
			// 认证信息
			if (authenticationStatusa.value == 0 || authenticationStatusa.value == 3) {
				type.value = false
			}
			// 至少审核通过一次
			if (authenticationStatusa.value != 0) {
				if (newResult.value) {
					// 至少认证过一次
					flag.value = true
				}
			}
			if (!res.data.memberInfo) {
				res.data.memberInfo = {}
			}
			if (!res.data.dept) {
				res.data.dept = {}
			}
			form.value = {
				...res.data.dept,
				...res.data.memberInfo
			}
			// 入会材料
			if (form.value.materials) {
				form.value.materials1 = JSON.parse(form.value.materials)
			}
			// 入会申请书
			if (form.value.applicationForMembership) {
				form.value.applicationForMembership1 = JSON.parse(form.value.applicationForMembership)
			}
			applicationForMembership1.value = form.value.applicationForMembership || []
			form.value.deptType = res.data.dept.deptType
			
			if (form.value.businessLicense) {
				form.value.businessLicenseArr = []
				try{
					form.value.businessLicenseArr = JSON.parse(form.value.businessLicense) || []
				}catch(e){
					form.value.businessLicenseArr=[{url:form.value.businessLicense,name:'营业执照'}]
				}
				console.log('营业执照',form.value.businessLicenseArr)
			}
			if (form.value.certLegalIdcPhoto && form.value.certLegalIdcPhoto!=null) {
				form.value.legalIdcPhotoArr = []
				var arr = form.value.certLegalIdcPhoto?.split(',') || []
				if (arr.length > 0) {
					arr = _.map(arr, (p) => {
						if(p.indexOf('http')==-1){
							console.log(p)
							p = config.baseUrl_api + p
						}
						return p
					})
					form.value.legalIdcPhotoArr = arr
				}
				console.log('法人身份证',form.value.legalIdcPhotoArr)
			}
			if (form.value.certPictures) {
					form.value.picturesArr = []
					var arr = form.value.certPictures.split(',') || []
					if (arr.length > 0) {
						arr = _.map(arr, (p) => {
							if(p.indexOf('http')==-1){
								p = config.baseUrl_api + p
							}
							return p
						})
						form.value.picturesArr = arr
					}
					console.log(form.value.picturesArr)
				}
		})
	}

	async function getMyStatusAPI() {
		const { data } = await api.getMyStatus()
		if (data && data.auditStatus) {
			auditStatus.value = data.auditStatus
		} else {
			auditStatus.value = 0
		}
	}

	// 新增：弹窗打开时锁定滚动
	function onPopupOpen() {
		popupShow.value = true
		// 1. 小程序API锁定页面滚动
		uni.setPageScrollEnabled({ enabled: false })
		// 延时兜底（防止API生效延迟）
		setTimeout(() => {
			uni.setPageScrollEnabled({ enabled: false })
		}, 100)
	}

	// 新增：弹窗关闭时恢复滚动
	function onPopupClose() {
		popupShow.value = false
		// 恢复页面滚动
		uni.setPageScrollEnabled({ enabled: true })
		setTimeout(() => {
			uni.setPageScrollEnabled({ enabled: true })
		}, 100)
	}

	function showApplyDialog() {
		applyPopup.value.open()
	}

	// 关闭申请弹窗
	function closeApplyDialog() {
		applyPopup.value.close()
	}

	// 跳转到考点申请页面
	function goToApplyPage() {
		closeApplyDialog()
		uni.navigateTo({
			url: `/myCenter/examPointApply?memId=${form.value.memId}`
		})
	}

	function auditEditFN() {
		uni.navigateTo({
			url: `/myCenter/reviewList`
		})
	}

	function showImage(arr, index) {
		uni.previewImage({
			urls: arr,
			current: index,
			success: function(res) {}
		})
	}
	
	function download(url) {
		console.log(url)
		if (url.indexOf('.png') > -1 || url.indexOf('.jpg') > -1) {
			if(url.indexOf('http')>-1){
				uni.previewImage({
					urls: [url],
					success: function(res) {}
				})
			} else {
				uni.previewImage({
					urls: [config.baseUrl_api + url],
					success: function(res) {}
				})
			}
		} else {
			if(url.indexOf('http')>-1){
				goWebView(url)
			} else {
				goWebView(config.baseUrl_api + url)
			}
		}
	}

	function goWebView(url) {
		url = url.replace("http://", "https://")
		uni.showLoading({
			title: '下载中'
		});
		uni.downloadFile({
			url: url,
			success: function(res) {
				uni.hideLoading();
				var filePath = res.tempFilePath;
				uni.showLoading({
					title: '正在打开'
				});
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						uni.hideLoading();
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			fail: function(error) {
				uni.hideLoading();
				uni.showToast({
					title: `下载失败`,
					icon: 'none',
					duration: 2000
				});
			}
		});
	}

	function payTheFees(){
		if (!form.value.name) {
			uni.showToast({
				title: `请先完善团体信息`,
				icon: 'none'
			});
			return; // 新增：防止无名称时跳转
		}
		uni.navigateTo({
			url:`/myCenter/perfect`
		})
	}
</script>

<style scoped lang="scss">
	// 新增：锁定滚动的核心样式
	.lock-scroll {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden !important;
		height: 100vh !important;
	}

	.height1{height: 100rpx;}
	.photobox {
		position: relative;
		margin: 30rpx auto;
	
		.photo {
			width: 210rpx;
			height: 280rpx;
			background-color: #f4f4f4;
			display: block;
			margin: auto;
		}
	}
	.ylImage {
		width: 300rpx;
		height: 200rpx;
		display: block;
		box-shadow: 0 0 10rpx #ddd;
		border-radius: 8rpx;
	}
	
	.photoBook{position: relative;border-radius: 10rpx;    overflow: hidden;
		&::after{content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;
		background: linear-gradient(180deg,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.7));
	}
		text{    position: absolute;z-index: 1;
	font-size: 24rpx;
	color: #fff;
	bottom: 4rpx;
	right: 8rpx;}
	}
	.frrr{width: 100%;text-align: right;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;}
	:deep(.selected-list){font-size: 32rpx;padding: 0;}
	:deep(.input-value){padding: 0;}
	:deep(.uni-list-item__extra-text) {
		font-size: 32rpx;color: #000;
	}

	:deep(.uni-list-item__extra) {
		flex: 1 1 auto;
	}

	:deep(.uni-list-item__content) {
		flex: 0 0 auto;
	}

	:deep(.uni-list-item__content-title) {
		color: #999;
	}

	.flexbox {
		padding: 30rpx;
		background-color: #fff;
		justify-content: space-between;
	}

	.mainbox {
		margin: 30rpx;
	}
	.apply-dialog {
		width: 530rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		// 新增：禁止弹窗内部滚动
		touch-action: none;
	}
  	.dialog-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.dialog-content {
		margin: 40rpx;
	}
	.remind {
		color: #FF8124;
		font-size: 26rpx;
		margin-top: 40rpx;
	}
	.dialog-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.btn-cancel {
		width: 225rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 40rpx;
		background: #fff;
		color: #333;
		text-align: center;
		font-size: 14px;
	}
	.btn-confirm {
		width: 225rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background: #C4121B;
		font-size: 14px;
		color: #fff;
		text-align: center;
	}

	// 新增：给uni-popup蒙版添加禁止滚动样式
	:deep(.uni-popup__mask) {
		touch-action: none !important;
	}
</style>