<template>
	<view class="economic-detail-page">
		<TnNavbar
		    fixed
		    bg-color="rgba(255, 255, 255, 0.01)"
		    :bottom-shadow="false"
		    :placeholder="false"
		/>
	
		<view class="economic-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="summary-detail" v-if="flag">
			<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
				{{dateTimeValue.replace('-','年01-')}}月{{menuData.title}}概况
			</view>
			<view class="detail tn-ml-lg tn-mr-lg" v-if="detailData">
				
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">总体情况</view>
				
				<view class="block tn-radius tn-p-sm" v-if="detailData[1]">
					<view class="top tn-flex">
						<view class="left tn-pt-lg">
							<TnTitle title="商品销售额" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[1].revenue}}</span>亿
							</view>
							<view class="tn-pl-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[1].revenue_increase>=0?'red':'green'}">
									{{detailData[1].revenue_increase>=0?'+'+detailData[1].revenue_increase:detailData[1].revenue_increase}}%
								</span>
							</view>
						</view>
						<view class="right">
							<view class="chart-box" style="height: 200rpx;">
								<ucharts-pie :chartData="chartData1" :radius="40" position="right" :label="false"/>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-center-between">
						<view class="item">
							<TnTitle title="批发业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[1].wholesale}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[1].wholesale_increase>=0?'red':'green'}">
									{{detailData[1].wholesale_increase>=0?'+'+detailData[1].wholesale_increase:detailData[1].wholesale_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="零售业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[1].retail}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[1].retail_increase>=0?'red':'green'}">
									{{detailData[1].retail_increase>=0?'+'+detailData[1].retail_increase:detailData[1].retail_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="住宿餐饮业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[1].catering}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[1].catering_increase>=0?'red':'green'}">
									{{detailData[1].catering_increase>=0?'+'+detailData[1].catering_increase:detailData[1].catering_increase}}%
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-lg tn-mb-sm" :style="{'color':color}">各园区商贸服务业情况</view>
				
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
					双福工业园
				</view>
				
				<view class="block tn-radius tn-p-sm" v-if="detailData[2]">
					<view class="top tn-flex">
						<view class="left tn-pt-lg">
							<TnTitle title="商品销售额" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[2].revenue}}</span>亿
							</view>
							<view class="tn-pl-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[2].revenue_increase>=0?'red':'green'}">
									{{detailData[2].revenue_increase>=0?'+'+detailData[2].revenue_increase:detailData[2].revenue_increase}}%
								</span>
							</view>
						</view>
						<view class="right">
							<view class="chart-box" style="height: 200rpx;">
								<ucharts-pie :chartData="chartData2" :radius="40" position="right" :label="false"/>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-center-between">
						<view class="item">
							<TnTitle title="批发业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[2].wholesale}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[2].wholesale_increase>=0?'red':'green'}">
									{{detailData[2].wholesale_increase>=0?'+'+detailData[2].wholesale_increase:detailData[2].wholesale_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="零售业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[2].retail}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[2].retail_increase>=0?'red':'green'}">
									{{detailData[2].retail_increase>=0?'+'+detailData[2].retail_increase:detailData[2].retail_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="住宿餐饮业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[2].catering}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[2].catering_increase>=0?'red':'green'}">
									{{detailData[2].catering_increase>=0?'+'+detailData[2].catering_increase:detailData[2].catering_increase}}%
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
					珞璜工业园
				</view>
				
				<view class="block tn-radius tn-p-sm" v-if="detailData[5]">
					<view class="top tn-flex">
						<view class="left tn-pt-lg">
							<TnTitle title="商品销售额" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[5].revenue}}</span>亿
							</view>
							<view class="tn-pl-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[5].revenue_increase>=0?'red':'green'}">
									{{detailData[5].revenue_increase>=0?'+'+detailData[5].revenue_increase:detailData[5].revenue_increase}}%
								</span>
							</view>
						</view>
						<view class="right">
							<view class="chart-box" style="height: 200rpx;">
								<ucharts-pie :chartData="chartData5" :radius="40" position="right" :label="false"/>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-center-between">
						<view class="item">
							<TnTitle title="批发业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[5].wholesale}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[5].wholesale_increase>=0?'red':'green'}">
									{{detailData[5].wholesale_increase>=0?'+'+detailData[5].wholesale_increase:detailData[5].wholesale_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="零售业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[5].retail}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[5].retail_increase>=0?'red':'green'}">
									{{detailData[5].retail_increase>=0?'+'+detailData[5].retail_increase:detailData[5].retail_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="住宿餐饮业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[5].catering}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[5].catering_increase>=0?'red':'green'}">
									{{detailData[5].catering_increase>=0?'+'+detailData[5].catering_increase:detailData[5].catering_increase}}%
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
					德感工业园
				</view>
				
				<view class="block tn-radius tn-p-sm" v-if="detailData[4]">
					<view class="top tn-flex">
						<view class="left tn-pt-lg">
							<TnTitle title="商品销售额" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[4].revenue}}</span>亿
							</view>
							<view class="tn-pl-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[4].revenue_increase>=0?'red':'green'}">
									{{detailData[4].revenue_increase>=0?'+'+detailData[4].revenue_increase:detailData[4].revenue_increase}}%
								</span>
							</view>
						</view>
						<view class="right">
							<view class="chart-box" style="height: 200rpx;">
								<ucharts-pie :chartData="chartData4" :radius="40" position="right" :label="false"/>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-center-between">
						<view class="item">
							<TnTitle title="批发业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[4].wholesale}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[4].wholesale_increase>=0?'red':'green'}">
									{{detailData[4].wholesale_increase>=0?'+'+detailData[4].wholesale_increase:detailData[4].wholesale_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="零售业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[4].retail}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[4].retail_increase>=0?'red':'green'}">
									{{detailData[4].retail_increase>=0?'+'+detailData[4].retail_increase:detailData[4].retail_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="住宿餐饮业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[4].catering}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[4].catering_increase>=0?'red':'green'}">
									{{detailData[4].catering_increase>=0?'+'+detailData[4].catering_increase:detailData[4].catering_increase}}%
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-text-2xl tn-text-bold tn-text-center tn-mt-sm tn-mb-sm" :style="{'color':color}">
					白沙工业园
				</view>
				
				<view class="block tn-radius tn-p-sm" v-if="detailData[3]">
					<view class="top tn-flex">
						<view class="left tn-pt-lg">
							<TnTitle title="商品销售额" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[3].revenue}}</span>亿
							</view>
							<view class="tn-pl-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[3].revenue_increase>=0?'red':'green'}">
									{{detailData[3].revenue_increase>=0?'+'+detailData[3].revenue_increase:detailData[3].revenue_increase}}%
								</span>
							</view>
						</view>
						<view class="right">
							<view class="chart-box" style="height: 200rpx;">
								<ucharts-pie :chartData="chartData3" :radius="40" position="right"/>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-center-between">
						<view class="item">
							<TnTitle title="批发业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[3].wholesale}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[3].wholesale_increase>=0?'red':'green'}">
									{{detailData[3].wholesale_increase>=0?'+'+detailData[3].wholesale_increase:detailData[3].wholesale_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="零售业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[3].retail}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[3].retail_increase>=0?'red':'green'}">
									{{detailData[3].retail_increase>=0?'+'+detailData[3].retail_increase:detailData[3].retail_increase}}%
								</span>
							</view>
						</view>
						<view class="item">
							<TnTitle title="住宿餐饮业" mode="vLine"/>
							<view class="tn-pl-sm">
								<span class="tn-text-bold tn-text-xl">{{detailData[3].catering}}</span>亿
							</view>
							<view class="tn-pl-sm tn-text-sm">
								同比<span class="tn-text-bold" :style="{'color':detailData[3].catering_increase>=0?'red':'green'}">
									{{detailData[3].catering_increase>=0?'+'+detailData[3].catering_increase:detailData[3].catering_increase}}%
								</span>
							</view>
						</view>
					</view>
				</view>
				
			</view>	
			<view class="detail tn-flex-center-center" v-else>
				<TnEmpty mode="data" size="lg" color="#ccc" v-if="isEmpty"/>
			</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 { reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
	import TnEmpty from '@/uni_modules/tuniaoui-vue3/components/empty/src/empty.vue'
	import onShare from '@/utils/share';
	import UchartsPie from '@/pages/components/ucharts-pie.vue';
	
	const { onShareAppMessage,onShareTimeline } = onShare()
	
	const shareTitle = ref()
	
	const shareParam = ref()
	
	const flag = ref(false)
	
	const color = ref()
	
	const isEmpty = ref(false)
	
	const menuData = reactive({
		pic:'',
		title:'',
		color:'',
		description:'',
	})
	
	const detailData = ref();
	
	const dateTimeValue = ref();
	
	const openDateTimePicker = ref(false)
	
	const chartData1 = ref({})
	const chartData2 = ref({})
	const chartData3 = ref({})
	const chartData4 = ref({})
	const chartData5 = ref({})
	
	const getDate = (date:string) => {
		detailData.value = null
		getSummaryData(date)
	}
	
	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)
				color.value = res.data.data.color
				shareParam.value = res.data.data.menuId
			}else{
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			}
		})
	}
	
	const showPicker = () => {
		openDateTimePicker.value = true
	}
	
	const getDateMonth = () => {
		let datetime = new Date();
		let month:any = datetime.getMonth()
		month = month < 10?'0' + month : month
		let dateMonth = datetime.getFullYear() + '-' + month
		dateTimeValue.value = dateMonth;
	}
	
	const getSummaryData = (month:string) => {
		request({
			url:'/front/report/eco',
			method:'GET',
			data:{ 
				month: month,
				field: 'service'
			}
		}).then((res:any)=>{
			if(res.data.code === 0){
				let temp = []
				res.data.data.map((item:any) =>{
					temp[item.parkId] = item
				})
				
				detailData.value = temp
				
				setTimeout(() => {
				    let res1 = {
				        series: [
				            {
				            data: [
								{"name":"批发业","value":temp[1].wholesale},
								{"name":"零售业","value":temp[1].retail},
								{"name":"住宿餐饮业","value":temp[1].catering},
							]},
						]}
					let res2 = {
					    series: [
					        {
					        data: [
								{"name":"批发业","value":temp[2].wholesale},
								{"name":"零售业","value":temp[2].retail},
								{"name":"住宿餐饮业","value":temp[2].catering},
							]},
						]}	
					let res3 = {
					    series: [
					        {
					        data: [
								{"name":"批发业","value":temp[3].wholesale},
								{"name":"零售业","value":temp[3].retail},
								{"name":"住宿餐饮业","value":temp[3].catering},
							]},
						]}	
					let res4 = {
					    series: [
					        {
					        data: [
								{"name":"批发业","value":temp[4].wholesale},
								{"name":"零售业","value":temp[4].retail},
								{"name":"住宿餐饮业","value":temp[4].catering},
							]},
						]}	
					let res5 = {
					    series: [
					        {
					        data: [
								{"name":"批发业","value":temp[5].wholesale},
								{"name":"零售业","value":temp[5].retail},
								{"name":"住宿餐饮业","value":temp[5].catering},
							]},
						]}	
				 chartData1.value = JSON.parse(JSON.stringify(res1));
				 chartData2.value = JSON.parse(JSON.stringify(res2));
				 chartData3.value = JSON.parse(JSON.stringify(res3));
				 chartData4.value = JSON.parse(JSON.stringify(res4));
				 chartData5.value = JSON.parse(JSON.stringify(res5));

				}, 500);
			}else{
				isEmpty.value = true
			}
		})
		flag.value = true
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/economic/service/index?id=' + shareParam.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/economic/service/index?id=' + shareParam.value
		}
	})
	
	onLoad((option)=>{
		getMenuData(option.id)
		getDateMonth()
		getSummaryData(dateTimeValue.value)
	})
</script>

<style lang="scss" scoped>
	.economic-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;
	       }
	     }
	   }
	}
	.summary-detail{
		background-color: #fff;
		margin-top: -40rpx;
		padding-bottom: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 9;
		.text{
			letter-spacing: 4rpx;
			text-align: justify;
		}
		.detail{
			min-height: calc(100vh - 580rpx);
			.block{
				background: linear-gradient(0deg,rgba(0, 150, 255, 0.4),rgba(0, 150, 255, 0.05));
				.top{
					.left{
						width: 40%;
					}
					.right{
						width: 60%;
					}
				}
				.bottom{
					.item{
						width: calc(100% / 3 - 15rpx);
					}
				}
			}
		}
	}
	.picker-btn{
		position: fixed;
		z-index: 999;
		right: 40rpx;
		bottom: 60rpx;
	}
</style>