<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>
					</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>{{form.provinceStr}}</template>
				</uni-list-item>
				<uni-list-item title="社会信用代码" :rightText="form.creditCode" />
				<uni-list-item v-if="form.siteContact" title="联系人" :rightText="form.siteContact" />
				<uni-list-item v-else title="联系人" :rightText="form.contact" />
				<uni-list-item v-if="form.siteTel" title="联系方式" :rightText="form.siteTel" />
				<uni-list-item v-else title="联系方式" :rightText="form.phone" />
				<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="法人姓名" :rightText="form.legal||'--'" />

				<uni-list-item v-if="form.deptType==6" title="是否为考点" :rightText="form.applyPoints==1?'是':'否'" />
				<uni-list-item title="法人身份证" clickable>
					<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 >
					<template v-slot:footer>
						<view @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 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>
		</view>
		<view class="height1"></view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import _ from 'lodash'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp()
	const form = ref({
		legalIdcPhotoArr: [],
		picturesArr: [],
		businessLicenseArr:[]
	})
	onLoad(option => {
		console.log(option)
		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() {
		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.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)
		}
	}

	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
				});
			}
		});
	}
</script>

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