<template>
	<view class="content">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="one">
						<view class="one_1">申请材料</view>
						<view class="one_2">
							<u--form :model="form" ref="uForm" :rules="{}" labelWidth="500" label-position="top">
								<u-form-item v-for="(item, index) in info.material" :key="index"
									:label="index+1+'.'+item.label" :prop="'text'+index.toString()">
									<u-upload v-if="item.type=='0'" :fileList="form['text'+index]"
										@afterRead="afterRead($event,'text'+index.toString())"
										@delete="deletePic($event,'text'+index.toString())" :name="index" multiple
										:maxCount="10" width="250" height="150">
									</u-upload>
									<input v-else-if="item.type=='1'" class="input" v-model="form['text'+index]"
										:placeholder="text+item.label" />
								</u-form-item>
							</u--form>
						</view>
					</view>
					<view class="two">
						<view class="two_1">费用信息</view>
						<view class="two_2">
							<view class="left">是否需要邮寄</view>
							<view class="right">
								<u-switch v-model="is_open" size="20"></u-switch>
							</view>
						</view>
						<view class="two_2">
							<view class="left">公证费</view>
							<view class="right money">￥{{info.money||'0'}}</view>
						</view>
						<view class="two_2" v-if="is_open">
							<view class="left">邮费</view>
							<view class="right" v-if="info.postage=='0'">包邮</view>
							<view class="right money" v-else>￥{{info.postage||'暂无'}}</view>
						</view>
						<view class="two_3" v-if="is_open">
							<view class="left">收货地址</view>
							<view class="right" @tap="toAddress">
								<text>{{address.province}}</text><text>{{address.city}}</text>
								<text>{{address.area}}</text><text>{{address.address}}</text>
								<u-icon name="arrow-right" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view class="thr">
						<view class="thr_1">
							收费标准： <text class="moeny">￥{{info.money||'0'}}</text>
						</view>
						<view class="thr_1">
							收费依据：{{info.basic||'暂无'}}
						</view>
						<view class="thr_1">
							简介：<rich-text :nodes="info.content"></rich-text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<button class="btn" @tap="formSubmit">确认无误并签字</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	const $apifile = getCurrentInstance()?.appContext.config.globalProperties.$apifile;
	const id = ref('');
	// 用户信息
	const user = ref({});
	// 公证详情
	const info = ref({});
	// 材料表单
	const form = ref({});
	const address = ref({});
	// 申请表单
	const data = ref({
		user: user.value?._id,
		business: id.value
	});
	const text = ref('请输入');
	// 是否需要邮寄
	const is_open = ref(false);
	// 字典表
	const businessList = ref([]);
	onLoad(async (options) => {
		id.value = options && options.id
		uni.setNavigationBarTitle({
			title: options && options.name || '公证详情'
		});
	});
	onShow(async () => {
		uni.$on('id', async function (data) {
			if (data) await searchAddres(data)
		})
		await searchUser();
		await searchOther();
		await search();
	});
	// 地址
	const searchAddres = async (id) => {
		let arr = await $api(`address/${id}`, 'GET')
		if (arr.errcode == '0') {
			address.value = arr.data
		}
	};
	// 用户信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 业务类型
		res = await $api(`dictData`, 'GET', { code: 'business', is_use: '0' });
		if (res.errcode === 0) businessList.value = res.data;
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`business/${id.value}`, 'GET', {});
			if (res.errcode === 0) {
				info.value = res.data
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		}
	};
	// 数据处理
	const getDict = (data, model) => {
		let list;
		switch (model) {
			case 'business':
				list = businessList.value;
				break;
			default:
				break;
		}
		if (!list) return;
		const res = list.find((f) => f.value == data);
		return res?.label || '暂无';
	};
	// 删除图片
	const deletePic = (event, value) => {
		let arr = form.value[value].filter((i, index) => index != event.index);
		form.value[value] = arr
	};
	// 新增图片
	const afterRead = async (event, value) => {
		console.log(event, value);
		let serverFile = $config.serverFile;
		const arr = await $apifile(`/files/notarization/applet/upload`, 'file', event.file[0].url,
			'file');
		if (arr.errcode === 0) {
			form.value[value].push({
				data: {
					id: arr.data.name,
					name: arr.data.name,
					uri: arr.data.uri,
					url: serverFile + arr.data.uri
				},
				name: that.name
			})
		} else {
			uni.showToast({
				title: arr.errmsg,
				icon: 'none'
			});
		}
	};
	// 确认
	const formSubmit = () => {
		uni.navigateTo({
			url: `/pagesHome/notarization/sign?id=${info.value._id}`
		})
	};
	// 选择地址
	const toAddress = () => {
		uni.navigateTo({
			url: `/pagesHome/address/index?id=${info.value._id}`
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.info {
			position: relative;
			flex-grow: 1;
			background-color: var(--f1Color);


			.one {
				margin: 2vw;
				border: 1px solid var(--f5Color);
				border-radius: 5px;

				.one_1 {
					text-align: center;
					font-weight: bold;
					color: var(--mainColor);
					background-color: var(--fFFColor);
					border-radius: 5px 5px 0 0;
					padding: 2vw 0;
				}

				.one_2 {
					padding: 2vw;
					background-color: var(--mainColor);
					border-radius: 0 0 5px 5px;
				}
			}

			.two {
				margin: 2vw;
				border: 1px solid var(--f5Color);
				border-radius: 5px;

				.two_1 {
					text-align: center;
					font-weight: bold;
					color: var(--mainColor);
					background-color: var(--fFFColor);
					border-radius: 5px 5px 0 0;
					padding: 2vw 0;
				}

				.two_2 {
					display: flex;
					justify-content: space-between;
					padding: 3vw;
					background-color: var(--mainColor);
					font-size: var(--font14Size);

					.money {
						color: var(--fF0Color);
					}
				}

				.two_3 {
					display: flex;
					justify-content: space-between;
					padding: 3vw;
					background-color: var(--mainColor);
					font-size: var(--font14Size);

					.right {
						display: flex;
						align-items: center;
					}
				}
			}


			.thr {
				margin: 2vw;
				padding: 2vw;
				background-color: var(--mainColor);

				.thr_1 {
					font-size: var(--font14Size);
					padding: 1vw;

					.moeny {
						color: var(--fF0Color);
					}
				}
			}

		}

		.foot {
			padding: 2vw;

			.btn {
				font-size: var(--font14Size);
				color: var(--mainColor);
				background-color: var(--fFFColor);
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>