<template>
	<view class="develop-summary-page">
		<TnNavbar fixed bg-color="rgba(255, 255, 255, 0.01)" :bottom-shadow="false" :placeholder="false" />

		<view class="develop-summary"
			:style="{'background':'url('+ menuData.pic +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}">
			<view class="summary-content">
				<view class="summary-info">
					<view class="title">{{ menuData.title }}</view>
					<view class="desc">{{ menuData.description }}</view>
				</view>
			</view>
		</view>

		<view class="develop-container tn-pt-lg" v-if="flag">
			<view class="tn-radius tn-m">
				<view class="title-container tn-border-bottom tn-grey-light_border tn-p-xs tn-pb"
					style="border-radius: 0;">
					<view class="left">
						<view class="title">{{developData.title}}</view>
						<view class="desc tn-text-lg">
							<TnIcon name="clock" size="36rpx" />
							&nbsp;{{developData.dateMonth.replace('-','年01-')+'月'}}
						</view>
					</view>
					<view class="right" @click="showPop">
						<view class="icon">
							<TnIcon name="menu-flex" />
						</view>
						<view class="text">园区详情</view>
					</view>
				</view>

				<view class="develop-detail tn-pt">
					<view class="tn-text-bold tn-text-2xl tn-text-center tn-pb" :style="{'color':color}">
						土地规划概况
					</view>
					<view class="develop-review tn-flex tn-flex-wrap tn-flex-center-between tn-shadow tn-p-xs tn-radius">
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow" style="width: 100%;">
							<view class="tn-text-lg tn-text-center">
								城市建设用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.city" :text-color="color" /><span
									class="unit">平方公里</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								居住用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.build" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								公共服务用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.service" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								商业服务业用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.business" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								工业用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.industry" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								交通设施用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.traffic" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								公用设施用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.public" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								绿地与广场用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.plaza" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
						<view class="review-item tn-pt tn-pb tn-mb-sm tn-radius tn-shadow">
							<view class="tn-text-lg tn-text-center">
								物流仓储用地
							</view>
							<view class="tn-text-center tn-pt-sm tn-text-bold tn-text-2xl">
								<tn-count-scroll :value="developData.logistic" :text-color="color" /><span
									class="unit">公顷</span>
							</view>
						</view>
					</view>
					
					<view class="tn-text-bold tn-text-2xl tn-text-center tn-p" :style="{'color':color}">
						土地规划分布
					</view>
					
					<view class="rose tn-shadow" style="height:600rpx">
						<ucharts-pie :chartData="useChartData" position="bottom" :label="true" :radius="100"/>
					</view>

					<view v-if="developData.review">
						<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
							概述
						</view>

						<view class="tn-text-lg tn-shadow tn-p-sm" style="line-height: 1.8em;color: #444444;letter-spacing: 4rpx;">
							<mp-html :content="developData.review" @linktap="downloadFile"/>
						</view>
					</view>
				</view>
			</view>
		</view>

		<TnDateTimePicker v-model="dateTimeValue" v-model:open="openDateTimePicker" init-current-date-time
			format="YYYY-MM" mode="yearmonth" @confirm="getDate" />
		<TnPopup v-model="showPopup" open-direction="right">
			<view class="park-container tn-p-lg tn-flex tn-flex-center">
				<TnScrollList :indicator="false">
					<view class="item-container tn-flex-column  tn-flex-center items-center">
						<view v-for="(item, index) in parkList" :key="index"
							class="scroll-item tn-p-lg tn-flex-center tn-flex-column" @click="tnNavPage(item.parkId)">
							<view class="empty tn-grey-light_bg tn-flex tn-flex-center-around">
								<TnAvatar :url="item.image" shape="square" size="lg" />
							</view>
							<view class="title tn-text-sm tn-text-center">{{item.title}}</view>
						</view>
					</view>
				</TnScrollList>
			</view>
		</TnPopup>
		<view class="picker-btn" @click="showPicker">
			<TnButton shape="circle" type="success" size="lg" shadow shadow-color="tn-type-primary_shadow">
				<TnIcon name="history" :size="50" />
			</TnButton>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import UchartsPie from '@/pages/components/ucharts-pie.vue';
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TnCountScroll from '@/uni_modules/tuniaoui-vue3/components/count-scroll/src/count-scroll.vue'
	import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.vue'
	import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
	import onShare from '@/utils/share';

	const { onShareAppMessage, onShareTimeline } = onShare()

	const flag = ref(false);

	const color = ref();

	const showPopup = ref(false)

	const shareParam = ref()

	const shareTitle = ref()

	const openDateTimePicker = ref(false)

	const menuId = ref();

	const parkList = ref([]);

	const developData = reactive({
		dateMonth: '',
		title: '',
		parkName: '',
		develop: 0,
		city: 0,
		build: 0,
		service: 0,
		business: 0,
		industry: 0,
		traffic: 0,
		public: 0,
		plaza: 0,
		logistic: 0,
		invest: 0,
		review: '',
		explan: ''
	})

	const useChartData = ref({})

	const dateTimeValue = ref();

	const menuData = reactive({
		pic: '',
		title: '',
		color: '',
		description: ''
	})

	const showPop = () => {
		showPopup.value = true
	}

	const showPicker = () => {
		openDateTimePicker.value = true
	}

	const getDate = (value : string) => {
		getDevelopData(value)
	}

	const getMenuData = (id : number) => {
		request({
			url: '/front/report/menu',
			method: 'GET',
			data: { menuId: id }
		}).then((res : any) => {
			if (res.data.code === 0) {
				Object.assign(menuData, res.data.data)
				shareParam.value = res.data.data.menuId
				color.value = res.data.data.color
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.message
				})
			}
		})
	}

	const getParkList = () => {
		request({
			url: '/front/park/list',
			method: 'GET',
			data: { id: 1 }
		}).then((res : any) => {
			if (res.data.code === 0) {
				parkList.value = res.data.data
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.message
				})
			}
		})
	}

	const tnNavPage = (id : number) => {
		showPopup.value = false
		uni.navigateTo({
			url: '/pages/report/develop/child/index?mid=' + menuId.value + '&id=' + id,
		})
	}

	const getDevelopData = (date : string) => {
		request({
			url: '/front/report/develop/summary',
			method: 'GET',
			data: { id: 1, month: date }
		}).then((res : any) => {
			if (res.data.code === 0) {
				Object.assign(developData, res.data.data)
				shareTitle.value = res.data.data.title
				setTimeout(() => {
					let use_res = {
						series: [
							{
								data: [{ "name": "居住用地", "value": Number(developData.build) },
								{ "name": "公共服务用地", "value": Number(developData.service) },
								{ "name": "商业服务业用地", "value": Number(developData.business) },
								{ "name": "工业用地", "value": Number(developData.industry) },
								{ "name": "交通设施用地", "value": Number(developData.traffic) },
								{ "name": "公用设施用地", "value": Number(developData.public) },
								{ "name": "绿地与广场用地", "value": Number(developData.plaza) },
								{ "name": "物流仓储用地", "value": Number(developData.logistic) },
								{ "name": "其它用地", "value": Number(developData.city*100)-Number(developData.build)-Number(developData.service)-Number(developData.business)-Number(developData.industry)-Number(developData.traffic)-Number(developData.public)-Number(developData.plaza)-Number(developData.logistic)}
								]
							}
						]
					}
					
					
					useChartData.value = JSON.parse(JSON.stringify(use_res));
				}, 500);
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.message
				})
			}
			flag.value = true
		})
	}
	
	const downloadFile = (file:any) => {
		uni.downloadFile({
			url:file.href,
			success(res) {
				if (res.statusCode === 200) {
					uni.saveFile({
						tempFilePath: res.tempFilePath, //临时路径
						success: function(res) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存：' + res.savedFilePath, //保存路径
								duration: 3000,
							});
							setTimeout(() => {
								//打开文档查看
								uni.openDocument({
									filePath: res.savedFilePath,
									showMenu: true,
									success: function() {
										console.log('打开文档成功');
									}
								});
							}, 3000)
						}
					})
					console.log('下载成功');
				}
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '失败请重新下载',
				});
			},
		})
	}

	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/develop/index?id=' + shareParam.value
		}
	})

	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/develop/index?id=' + shareParam.value
		}
	})

	onLoad((option) => {
		getMenuData(option.id)
		menuId.value = option.id
	})

	getParkList()

	getDevelopData(dateTimeValue.value)
</script>

<style lang="scss" scoped>
	.develop-summary {
		position: relative;
		width: 100%;
		height: 450rpx;
		z-index: -1;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg,
					rgba(0, 0, 0, 0.4) 0%,
					rgba(0, 0, 0, 0) 100%);
			z-index: 1;
		}

		.summary-content {
			position: absolute;
			left: 0;
			bottom: 80rpx;
			width: 100%;
			padding: 0rpx 30rpx;
			z-index: 2;
			display: flex;
			align-items: center;

			.summary-info {
				flex: 1;
				color: #fff;

				.title {
					font-size: 52rpx;
					font-weight: bold;
					letter-spacing: 8rpx;
					text-shadow: 4rpx 4rpx 10rpx #585858;
				}

				.desc {
					font-size: 34rpx;
					margin-top: 20rpx;
					letter-spacing: 4rpx;
					text-shadow: 4rpx 4rpx 10rpx #585858;
				}
			}
		}
	}

	.develop-container {
		// position: relative;
		margin-top: -40rpx;
		z-index: 99;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;

		.title-container {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 1;

			.left {
				flex: 1;

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

				.desc {
					margin-top: 32rpx;
				}
			}

			.right {
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 20rpx;

				.icon {
					font-size: 80rpx;
				}

				.text {
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}

		.develop-detail {
			// position: relative;
			border-radius: 20rpx 20rpx 0 0;
			// z-index: 10;
			.topic-item {
				&+.topic-item {
					margin-top: 36rpx;
				}
			}

			.develop-review {
				.review-item {
					width: calc(100% / 2 - 10rpx);
					background: linear-gradient(-45deg, rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.05));

					.unit {
						font-weight: normal;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.park-container {
		width: fit-content;
		height: 100%;

		.scroll-item {
			flex-grow: 1;

			.empty {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}

			.title {
				margin-top: 10rpx;
			}
		}
	}

	.picker-btn {
		position: fixed;
		z-index: 999;
		right: 40rpx;
		bottom: 60rpx;
	}
</style>