<template>
	<view>
		<view class="mainbox">
			<uni-list>
				<uni-list-item title="所属协会">
					<template v-slot:footer>
						<!-- <view style="width: 60%;text-align: right;">{{form.firstName}} {{form.parentDeptName}}</view> -->
						<view style="width: 500rpx;text-align: right;">
							<uni-data-picker v-model="form.deptId" :localdata="tree"
									readonly :clear-icon="false"
									:map="{text:'label',value:'id'}">
							</uni-data-picker>
						</view>
					</template>
				</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>
						<uni-data-select :clear="false" disabled
							v-model="form.belongProvinceId" :localdata="regionsList">
							</uni-data-select>
					</template>
				</uni-list-item>
				<uni-list-item title="社会信用代码" :rightText="form.creditCode" />
				<uni-list-item v-if="isR" title="联系人" :rightText="form.certSiteContact" />
				<uni-list-item v-else title="联系人" :rightText="form.siteContact" />
				<uni-list-item v-if="isR" title="联系方式" :rightText="form.certSiteTel" />
				<uni-list-item v-else title="联系方式" :rightText="form.siteTel" />
				<uni-list-item v-if="form.validityDate" title="有效期" :rightText="form.validityDate?.slice(0,10)" />
				<uni-list-item title="认证地址">
					<template v-slot:footer>
						{{form.provinceStr}}{{form.cityName}}{{form.regionStr}}
					</template>
				</uni-list-item>
				<uni-list-item title="认证详细地址" :rightText="form.adress" />
				<uni-list-item title="法人姓名" v-if="isR" :rightText="form.certLegal||'--'" />
				<uni-list-item title="法人姓名" v-else :rightText="form.legal||'--'" />

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

				<uni-list-item title="营业执照" clickable v-if="isR">
					<template v-slot:footer>
						<view style="width: 50vw;word-break: break-all;" @click="download(form.businessLicenseArrR[0]?.url)" v-if="form.businessLicenseArrR&&form.businessLicenseArrR?.length>0">
							<text class="text-primary">{{form.businessLicenseArrR[0]?.name}}</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="营业执照" clickable v-else>
					<template v-slot:footer>
						<view style="width: 50vw;word-break: break-all;" @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 v-if="isR">
					<template v-slot:footer>
						<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>
					</template>
				</uni-list-item>
				<uni-list-item title="机构照片" clickable v-else>
					<template v-slot:footer>
						<view v-if="form.picturesArrR&&form.picturesArrR?.length>0" class="photoBook" @click="showImage(form.picturesArrR,0)">
							<image mode="aspectFit" class="ylImage"
								 :src="form.picturesArrR[0]">
							</image>
							<text>共{{form.picturesArrR?.length}}张</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="height1"></view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import _ from 'underscore'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp()
	const form = ref({
		legalIdcPhotoArr: [],
		legalIdcPhotoArrR: [],
		picturesArr: [],
		picturesArrR: [],
		businessLicenseArr:[],
		businessLicenseArrR:[]
	})
	const tree = ref([])
	const regionsList = ref([])
	const isR = ref(false)
	onLoad(option => {
		console.log(option)
		if (option.isR){
			isR.value = true
		}
		if (option.memId) {
			getForm(option.memId)
		}
	})
	function getForm(memId){
		if(memId){
			api.getGroupMemberInfoById(memId).then(res => {
				form.value = res.data
				init()
			})
			
		}else{
			init()
		}
	}
	function init() {
		getDeptTree()
		getRegionsList()
		console.log(form.value)
		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.certBusinessLicense) {
			form.value.businessLicenseArrR = []
			try{
				form.value.businessLicenseArrR = JSON.parse(form.value.certBusinessLicense) || []
			}catch(e){
				form.value.businessLicenseArrR=[{url:form.value.certBusinessLicense,name:'营业执照'}]
			}
			console.log('营业执照',form.value.businessLicenseArrR)
		}
		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
			}
		}
		if(form.value.legalIdcPhoto && form.value.legalIdcPhoto!=null){
			form.value.legalIdcPhotoArrR = []
			var arr = form.value.legalIdcPhoto?.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.legalIdcPhotoArrR = 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)
		}
		if(form.value.pictures){
			form.value.picturesArrR = []
			var arr = form.value.pictures.split(',') || []
			if (arr.length > 0) {
				arr = _.map(arr, (p) => {
					if(p.indexOf('http')==-1){
						p = config.baseUrl_api + p
					}
					return p
				})
				form.value.picturesArrR = arr
			}
			console.log(form.value.picturesArrR)
		}
	}
	function getRegionsList() {
		api.regionsList().then(res => {
			regionsList.value = res.data;
		})
	}
	function getDeptTree(){
		api.deptTreeSelect({ selfDeptId: '-1', showDirect: 1, showAll: 1 }).then(res=>{
			 tree.value = res.data
			   if (typeof tree.value?.[0]?.id == 'number') {
			     form.value.deptId = form.value.deptId * 1
			   } else {
			     form.value.deptId = form.value.deptId.toString()
			   }
		})
	}
	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) {
						console.log(res,[url],'111')
					}
				})
			} else {
				uni.previewImage({
					urls: [config.baseUrl_api + url],
					success: function(res) {
						console.log(url,'222')
					}
				})
			}
		} 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
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	:deep(.input-value ){padding: 0!important;line-height: 1.4!important;}
	:deep(.selected-list){display: block!important;
	}
	:deep(.selected-item){display:inline;white-space:normal!important;}
	.height1 {
		height: 1rpx
	}

	.ylImage {
		width: 300rpx;
		height: 200rpx;
		display: block;
		box-shadow: 0 0 10rpx #ddd;
		border-radius: 8rpx;
	}

	.mainbox {
		margin: 30rpx 25rpx 60rpx;
		padding: 1px;
		background: #FFFFFF;
		border-radius: 15rpx;

		:deep(.uni-list-item__content-title) {
			color: #4C5359;
			font-size: 30rpx;
			font-weight: 300;
		}

		:deep(.uni-list-item__extra-text) {
			color: #000;
			font-size: 30rpx;
		}
	}

	.photobox {
		position: relative;
		margin: 30rpx auto;

		.photo {
			width: 210rpx;
			height: 280rpx;
			background-color: #f4f4f4;
			display: block;
			margin: auto;
		}
	}

	.colorful {
		background-color: #007BDA;
		width: 200rpx;
		margin: auto;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}

	:deep(.uni-list-item__extra) {
		width: 60%;
	}
	.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;}
	}
</style>