<template>
	<view class="develop-summary-page">
		<tn-navbar
		    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>
		
				<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 class="tn-text-bold tn-text-2xl tn-text-center tn-p" :style="{'color':color}" v-if="developData.land">
						地块修改
					</view>
					<view class="change-list tn-flex tn-shadow tn-flex-wrap tn-flex-center-between">
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p" v-if="developData.company">
							<view class="tn-text-lg tn-text-center">
								涉企类用地调规
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.company}}</span>项
							</view>
						</view>
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p" v-if="developData.ppp">
							<view class="tn-text-lg tn-text-center">
								ppp项目用地调规
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.ppp}}</span>项
							</view>
						</view>
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p" v-if="developData.invest">
							<view class="tn-text-lg tn-text-center">
								招商项目用地调规
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.invest}}</span>项
							</view>
						</view>
					</view>
					
					<view class="tn-text-bold tn-text-2xl tn-text-center tn-p" :style="{'color':color}">
						土地出让价格
					</view>
					<view class="price-list tn-shadow tn-flex tn-flex-wrap tn-flex-center-between">
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p">
							<view class="tn-text-lg tn-text-center">
								居住用地
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.build_price}}</span>万元/亩
							</view>
						</view>
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p">
							<view class="tn-text-lg tn-text-center">
								商业服务业用地
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.business_price}}</span>万元/亩
							</view>
						</view>
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p">
							<view class="tn-text-lg tn-text-center">
								工业用地
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.industry_price}}</span>万元/亩
							</view>
						</view>
						<view class="item tn-text-center tn-radius tn-mb-sm tn-p">
							<view class="tn-text-lg tn-text-center">
								物流仓储用地
							</view>
							<view class="tn-pt-sm">
								<span class="tn-text-bold tn-text-2xl" :style="{'color':color}">{{developData.logistic_price}}</span>万元/亩
							</view>
						</view>
					</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-p-sm tn-shadow" style="line-height: 1.8em;color: #444444;letter-spacing: 4rpx;">
							<mp-html :content="developData.review" @linktap="downloadFile"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<tn-date-time-picker v-model="dateTimeValue" v-model:open="openDateTimePicker" init-current-date-time format="YYYY-MM" mode="yearmonth" @confirm="getDate"/>

		<view class="picker-btn" @click="showPicker">
			<tn-button shape="circle" type="success" size="lg" shadow shadow-color="tn-type-primary_shadow">
				<tn-icon name="history" :size="50"/>
			</tn-button>
		</view>
	</view>	  
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import UchartsPie from '@/pages/components/ucharts-pie.vue';
	import TnCountScroll from '@/uni_modules/tuniaoui-vue3/components/count-scroll/src/count-scroll.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 shareTitle = ref()
	
	const shareParam = ref()
	
	const openDateTimePicker = ref(false)
	
	const orgId = 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,
		land:0,
		company:0,
		ppp:0,
		invest:0,
		build_price:0,
		business_price:0,
		industry_price:0,
		logistic_price:0,
		review:'',
		explan:''
	})
	
	const useChartData = ref({})
	
	const dateTimeValue = ref('');
	
	const menuData = reactive({
		pic:'',
		title:'',
		color:'',
		description:''
	})
	
	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 getDevelopData = (date:string) => {
		request({
			url:'/front/report/develop/summary',
			method:'GET',
			data:{id:orgId.value,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/child/index?mid=' + shareParam.value + '&id=' + orgId.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/develop/child/index?mid=' + shareParam.value  + '&id=' + orgId.value
		}
	})
	
	onLoad((option)=>{
		getMenuData(option.mid)
		orgId.value = option.id
	})
	
	onMounted(()=>{
		getDevelopData('')
	})
	
</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: 70rpx;
		    }
		
		    .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;
		  		}
		  	}
		  }
		}
	}
	.price-list{
		.item{
			width: calc(100% / 2 - 10rpx);
			background: linear-gradient(-45deg, rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.05));
		}
	}
	.change-list{
		.item{
			width: calc(100% / 2 - 10rpx);
			background: linear-gradient(-45deg, rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.05));
		}
	}
	.picker-btn{
		position: fixed;
		z-index: 999;
		right: 40rpx;
		bottom: 60rpx;
	}
</style>