<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
			<view class="content" >
				<view class="message-list">
					<view class="titleall-box">
						<view class="titleall-left">
							<view class="titleall-left-line"></view>基本信息
						</view>
					</view>
					<view class="newinfo-box">
						<view class="info-box-list">
							<view :class="item.type=='5'?'width100 info-box-width':'info-box-width'" v-for="(item,index) in textlist" :key="index">
								<view class="info-box-overflow">{{item.cent?item.cent:'-'}}</view>
								<view class="info-box-small">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="content" v-if="newtextlist.length>0">
				<view class="message-list">
					<view class="titleall-box">
						<view class="titleall-left">
							<view class="titleall-left-line"></view>基本信息
						</view>
					</view>
					<view class="newinfo-box">
						<view class="info-box-list">
							<view :class="item.type=='5'?'width100 info-box-width':'info-box-width'" v-for="(item,index) in newtextlist" :key="index">
								<view class="info-box-overflow">{{item.cent?item.cent:'-'}}</view>
								<view class="info-box-small">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>
			<view class="content" v-if="info.remarksField1">
				<view class="message-list">
					<view class="titleall-box">
						<view class="titleall-left">
							<view class="titleall-left-line"></view>驳回原因
						</view>
					</view>
					<view class="info-box">
						<view class="info-box-list">
							<view class="info-box-width" style="width: 100%;">
								<view class="info-box-overflow">
									{{info.remarksField1?info.remarksField1:'-'}}</view>
							
							</view>
			
						</view>
					</view>
				</view>
			</view>
			<view class="skip-btn" v-if="info.remarksField2">
				<view class="buy-at" @click="downfile(info.remarksField2)">
					<image src="../../static/btn7.png"></image>
					<text>批复文件下载</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BASE_URL from "@/common/config.js"
	export default {
		data() {
			return {
				textlist: [{
						name: '行政区划',
						type: '2',
						isbx:true,
						cent: '',
						from:'adminArea'
					},
					{
						name: '地名类别',
						type: '7',
						isbx:true,
						cent: '',
						from:'placeNameCategory'
					},
					{
						name: '标准名称',
						type: '1',
						isbx:true,
						cent: '',
						from:'standardName'
					},
					{
						name: '地名代码',
						type: '1',
						isbx:false,
						cent: '',
						from:'toponymicCode'
					},
					{
						name: '是否可公开',
						type: '6',
						isbx:false,
						cent: '',
						from:'whetherPublic'
					},
					{
						name: '罗马字母拼写',
						type: '1',
						isbx:true,
						cent: '',
						from:'romanLettersSpell'
					},
					{
						name: '通名罗马字母拼写',
						type: '1',
						isbx:false,
						cent: '',
						from:'commonRomanAlphabetSpelling'
					},
					{
						name: '少数民族语拼写',
						type: '1',
						isbx:false,
						cent: '',
						from:'minoritySpelling'
					},
					{
						name: '地名语种',
						type: '1',
						isbx:false,
						cent: '',
						from:'language'
					},
					{
						name: '别名',
						type: '1',
						isbx:false,
						cent: '',
						from:'alias'
					},
					{
						name: '简称',
						type: '1',
						isbx:false,
						cent: '',
						from:'abbreviation'
					},
					{
						name: '使用时间',
						type: '8',
						isbx:true,
						cent: '',
						from:'usageTime'
					},
					{
						name: '曾用名',
						type: '1',
						isbx:false,
						cent: '',
						from:'formerName'
					},
					{
						name: '设立时间',
						type: '4',
						isbx:true,
						cent: '',
						from:'establishTime'
					},
					{
						name: '废止时间',
						type: '4',
						isbx:false,
						cent: '',
						from:'annulmentTime'
					},
					{
						name: '地理位置',
						type: '3',
						isbx:true,
						cent: '',
						from:'mapCoordinates'
					},
					{
						name: '地名来历',
						type: '5',
						isbx:true,
						cent: '',
						from:'originOfPlaceNames'
					},
					{
						name: '地名含义',
						type: '5',
						isbx:true,
						cent: '',
						from:'meaningOfPlaceNames'
					},
					{
						name: '历史沿革',
						type: '5',
						isbx:true,
						cent: '',
						from:'historicalEvolution'
					},
					{
						name: '备注',
						type: '5',
						isbx:false,
						cent: '',
						from:'remark'
					},
				],
				type: null,
				BASE_URL,
				info: {},
				nvConfig: {
					title: "HC52454【单立桩】",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
				},
				markers: [],
				address: {
					// 纬度
					latitude: 29.99599,
					// 经度
					longitude: 104.13412
				},
				newtextlist:[]
			};
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		onLoad(params) {
			this.info = JSON.parse(params.cent)
			this.nvConfig.title = this.info.name
			let from = params.cent?JSON.parse(params.cent):''
			console.log(from)
			if(from) {
				for (let i = 0; i < this.textlist.length; i++) {
					if(this.textlist[i].from == 'mapCoordinates') {
						this.textlist[i].cent =from[this.textlist[i].from] 
						 this.textlist[i].longitude = from.eastLongitude 
						this.textlist[i].latitude = from.northLatitude 
					} else {
						this.textlist[i].cent = from[this.textlist[i].from]
					}
				}
				if(from.remarksField5) {
					this.newtextlist = JSON.parse(from.remarksField5)
				}
				
			}
		},
		methods: {
			downfile(e) {
				
				let that = this
				console.log(that.BASE_URL + e)
				let c1 = e.split('.')
				console.log(c1)
				uni.downloadFile({
					url: that.BASE_URL+e,
					header: {
						'content-type': "application/json",
					},
					// filePath: wx.env.USER_DATA_PATH + e,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							const savedFilePath = res.tempFilePath
							uni.openDocument({
								filePath: savedFilePath,
								fileType: c1[1], //注意：文件为pdf，类型为pdf
								showMenu: true,
								success: (response) => {
									console.log(response)
								},
								fail: (err) => {
									console.log(err)
									wx.hideLoading()
								}
							})
						} else {
							wx.hideLoading()
						}
					},
					fail: (err) => {
						console.log(err)
						wx.hideLoading()
						
					},
					complete: () => {
						wx.hideLoading()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.newinfo-box {
		padding: 0 40rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.width100 {
			width: 100% !important;
		}
		.info-box-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.info-box-width {
				width: 45%;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom: 2rpx solid #ececec;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.info-box-overflow {
					width: 95%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				
				.info-box-small {
					font-size: 26rpx;
					color: #a8a8a8;
					font-weight: 500;
					margin-top: 10rpx;
				}
				
				.info-box-list-img {
					margin-top: 30rpx;
				
					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 20rpx;
					}
				}
				
				.info-box-list-sm {
					background-color: #F7F7F7;
					border-radius: 20rpx;
					font-size: 28rpx;
					color: #909090;
					font-weight: 500;
					width: 100%;
					padding: 20rpx;
					margin-top: 20rpx;
				}
				
				.green {
					color: #00D970;
				}
			}
				
			.serve {
				display: flex;
				justify-content: space-between;
				width: 100%;
				
				.serve-title {
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.serve-right {
					font-size: 28rpx;
					text-align: right;
					color: #909090;
				
					.serve-right-top {
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
	.listBox {
		position: relative;
		z-index: 1;
	}

	.content {
		width: 100%;
		// padding-bottom: 120rpx;
	}

	.topimg {
		margin: 25rpx;

		image {
			width: 100%;
			border-radius: 20rpx;
		}
	}

	.titleall-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 20rpx 20rpx 0;

		.titleall-left {
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			.titleall-left-line {
				width: 14rpx;
				height: 36rpx;
				border-radius: 0 10rpx 10rpx 0;
				background-color: #667FFF;
				box-shadow: 0 0 10rpx 5rpx #d1d9ff;
				margin-right: 20rpx;
			}
		}
	}

	.message-list {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 26rpx;
		margin: 25rpx;

		.info-box {
			padding: 0 40rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.info-box-list {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #ececec;
				padding-top: 30rpx;
				padding-bottom: 30rpx;

				.width100 {
					width: 100% !important;
				}

				.info-box-width {
					width: 50%;
					font-size: 30rpx;
					font-weight: bold;

					.info-box-overflow {
						width: 95%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.info-box-small {
						font-size: 26rpx;
						color: #a8a8a8;
						font-weight: 500;
						margin-top: 10rpx;
					}

					.info-box-list-img {
						margin-top: 30rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 20rpx;
						}
					}

					.info-box-list-sm {
						background-color: #F7F7F7;
						border-radius: 20rpx;
						font-size: 28rpx;
						color: #909090;
						font-weight: 500;
						width: 100%;
						padding: 20rpx;
						margin-top: 20rpx;
					}

					.green {
						color: #00D970;
					}
				}

				.serve {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.serve-title {
						font-size: 30rpx;
						font-weight: bold;
					}

					.serve-right {
						font-size: 28rpx;
						text-align: right;
						color: #909090;

						.serve-right-top {
							margin-bottom: 20rpx;
						}
					}
				}
			}

			.info-box-list:last-child {
				border-bottom: 0;
			}
		}
	}

	.skip-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		margin-top: 70rpx;
		position: fixed;
		bottom: 30rpx;

		.cart-add {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 38%;

			image {
				width: 253rpx;
				height: 80rpx;
				box-shadow: 5rpx 10rpx 20rpx 0 #efefef;
				border-radius: 100rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #262626;
				position: absolute;
				z-index: 1;
			}
		}

		.buy-at {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 58%;

			image {
				width: 415rpx;
				height: 80rpx;
				box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff;
				border-radius: 100rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				position: absolute;
				z-index: 1;
			}
		}
	}
</style>