<template>
	<view class="matter-page">
		<scroll-view scroll-y="true" class="matter-scroll">
			<view class="matter-item" v-if="info.handleMethod">
				<view class="matter-label">办理方式</view>
				<view class="matter-val">{{info.handleMethod}}</view>
			</view>
			<view class="matter-item" v-if="info.serviceObject">
				<view class="matter-label">服务对象</view>
				<view class="matter-val">{{info.serviceObject}}</view>
			</view>
			<view class="matter-item" v-if="info.processingConditions">
				<view class="matter-label">办理条件</view>
				<view class="matter-val" v-html="info.processingConditions"></view>
			</view>
			<view class="matter-item" v-if="info.processingMaterial">
				<view class="matter-label">办理材料</view>
				<view class="matter-val" v-html="info.processingMaterial"></view>
			</view>
			<view class="matter-item" v-if="info.processingDays">
				<view class="matter-label">办理时间</view>
				<view class="matter-val">{{info.processingDays}}天（工作日）</view>
			</view> 
			
		<!-- 	<view class="distance-btn" @click.stop="goTransact()">
				<text>去办理</text>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', data => {
				this.info = data || {}
				uni.setNavigationBarTitle({
					title: data.name
				});
			})
		},
		methods: {
			goTransact() {
				window.location = 'https://wsgaj.chutianyun.gov.cn/weixin/#/'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matter-page {
		width: 100%;
		// min-height: 100vh;
		background-color: #F2F2F2;

		.matter-scroll {
			width: 100%;
			height: 100vh;
			padding: 30rpx;

		}

		.matter-item {
			width: 100%;
			border: 1rpx solid #E0DDDD;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			margin-bottom: 30rpx;

			.matter-label,
			.matter-val {
				flex-shrink: 0;
				padding: 20rpx;
			}

			.matter-label {
				width: 30%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.matter-val {
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// flex-wrap: wrap;
				border-left: 1rpx solid #E0DDDD;
				width: 70%;
				background-color: #F4FAFF;
				white-space: pre-wrap;
				overflow-wrap: break-word;
			}
		}
	}

	::v-deep img,
	::v-deep video,
	::v-deep audio {
		max-width: 100%;
	}

	.distance-btn {
		margin: 50rpx auto 0;
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #61A8FF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-weight: 700;
		color: #ffffff;
	}
</style>