<template>
	<view class="service-summary-page">
		<tn-navbar
		    fixed
		    bg-color="rgba(255, 255, 255, 0.01)"
		    :bottom-shadow="false"
		    :placeholder="false"
		/>
		
		<view class="service-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="service-container tn-pt-lg">
			<view class="tn-radius tn-m-lg">
				<view class="title-container tn-border-bottom tn-gray-light_border tn-pb-sm">
				  <view class="left">
				    <view class="title">{{serviceData.title}}</view>
				    <view class="desc tn-text-lg">
						<tn-icon name="clock" size="36rpx"/>
						&nbsp;{{serviceData.dateMonth.replace('-','年01-')+'月'}}
					</view>
				  </view>
				  <view class="right" @click="showPop">
				    <view class="icon">
				      <tn-icon name="menu-flex" />
				    </view>
				    <view class="text">园区详情</view>
				  </view>
				</view>
				
				<view class="service-detail tn-pt-sm" v-if="flag">
					<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
						安全生产标准化企业
					</view>
					
					<view class="box tn-radius tn-p-sm">
						<view class="tn-text-lg">
							 <TnTitle title="安全生产标准化企业" mode="vLine" size="lg"/>
							 <view class="tn-flex tn-flex-center-between tn-mt tn-mb">
								<view class="childbox tn-radius tn-p-sm">
									<TnTitle title="一级企业" mode="dot" size="md"/>
									<TnCountScroll :value="serviceData.level1" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
								</view>
								<view class="childbox tn-radius tn-p-sm">
									<TnTitle title="二级企业" mode="dot" size="md"/>
									<TnCountScroll :value="serviceData.level2" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
								</view>
							 	<view class="childbox tn-radius tn-p-sm">
							 		<TnTitle title="三级企业" mode="dot" size="md"/>
									<TnCountScroll :value="serviceData.level3" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
							 	</view>
							 </view>
							 <view class="tn-text">
							 	一级企业：<span class="tn-text-bold tn-text-lg" :style="{'color':color}">{{serviceData.level1_list}}</span>
							 </view>
						</view>
					</view>
					
					
					<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
						安全监管重点企业
					</view>
					
					<view class="box tn-radius tn-p">
						<view class="tn-flex tn-flex-center-between tn-flex-wrap">
							<view class="child tn-radius tn-p-sm">
								<TnTitle title="危化企业" mode="vLine"/>
								<TnCountScroll :value="serviceData.danger" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
							</view>
							<view class="child tn-radius tn-p-sm">
								<TnTitle title="金属冶炼企业" mode="vLine"/>
								<TnCountScroll :value="serviceData.metal" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
							</view>
							<view class="child tn-radius tn-p-sm">
								<TnTitle title="粉尘涉爆企业" mode="vLine"/>
								<TnCountScroll :value="serviceData.dust" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
							</view>
							<view class="child tn-radius tn-p-sm">
								<TnTitle title="其它企业" mode="vLine"/>
								<TnCountScroll :value="serviceData.other" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
							</view>
						</view>
					</view>
					
					<view class="chart-box">
						<ucharts-ring 
						:chartData="importantChartData" 
						position="bottom" 
						title="安全监管重点企业" 
						:val="serviceData.danger+serviceData.metal+serviceData.dust+serviceData.other+'家'" 
						radius="100"/>
					</view>
					
					<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
						消防安全
					</view>
					<view class="box tn-radius tn-p tn-flex">
						<view class="tn-w-1-2 tn-p">
							<TnTitle title="加强关注企业" mode="vLine" size="lg"/>
							<TnCountScroll :value="serviceData.fire_safety" class="tn-pl-sm tn-text-bold tn-text-2xl"/>家
						</view>
						<view class="tn-w-1-2 tn-pt tn-red-dark_text">注：特指生产存储易燃、可燃产品或原材料企业</view>
					</view>
					
					<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
						监督检查
					</view>
					
					<view class="box tn-radius tn-p">
						<view class="tn-flex tn-flex-center-between">
							<view class="tn-w-1-2 tn-p">
								<TnTitle title="监督检查" mode="vLine" size="lg"/>
								<TnCountScroll :value="serviceData.inspection" class="tn-pl-sm tn-text-bold tn-text-2xl"/>家次
							</view>
							<view class="tn-w-1-2 tn-p">
								<TnTitle title="安全隐患" mode="vLine" size="lg"/>
								<TnCountScroll :value="serviceData.trouble" class="tn-pl-sm tn-text-bold tn-text-2xl"/>个
							</view>
						</view>
						
						<view class="tn-text tn-pl tn-pr">
							整改情况：{{serviceData.improve}}
						</view>
					</view>
					<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
						宣传活动
					</view>
					<view class="box tn-radius tn-p-lg">
						开展各类安全生产培训宣传活动<span class="tn-text-bold tn-text-2xl">{{serviceData.publicize}}</span>次
					</view>
					
					<view class="text" v-if="serviceData.explan">
						<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
							其它说明
						</view>
						
						<view class="tn-text-lg" style="text-indent: 2em;line-height: 1.8em;color: #444444;">
							<mp-html :content="serviceData.explan" :copy-link="false" @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"/>
		<tn-popup v-model="showPopup" open-direction="right">
		    <view class="park-container tn-p-lg tn-flex tn-flex-center"> 
				<tn-scroll-list :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" >
							<tn-avatar :url="item.image" shape="square" size="lg"/>
						</view>
						<view class="title tn-text-sm tn-text-center">{{item.title}}</view>
					  </view>
					</view>
				</tn-scroll-list>
			</view>
		</tn-popup>
		<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 TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import UchartsRing from '@/pages/components/ucharts-ring.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 shareTitle = ref()
	
	const shareParam = ref()
	
	const color = ref();
	
	const flag = ref(false);
	
	const importantChartData = ref({})
	
	const showPopup = ref(false)
	
	const openDateTimePicker = ref(false)
	
	const menuId = ref();
	
	const parkList = ref([]);
	
	const serviceData = reactive({
		parkId:'',
		dateMonth:'',
		title:'',
		level1:0,
		level1_list:'',
		level2:0,
		level3:0,
		danger:0,
		metal:0,
		dust:0,
		other:0,
		fire_safety:0,
		improve:'',
		publicize:0,
		inspection:0,
		trouble:0,
		explan:''
	})
	
	const dateTimeValue = ref();
	
	const menuData = reactive({
		pic:'',
		title:'',
		color:'',
		description:''
	})
	
	const showPop = () => {
		showPopup.value = true
	}
	
	const showPicker = () => {
		openDateTimePicker.value = true
	}
	
	const getDate = (value:string) => {
		getServiceData(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 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: '失败请重新下载',
				});
			},
		})
	}
	
	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/service/child/index?mid=' + menuId.value + '&id=' + id,
		})
	}
	
	const getServiceData = (date:string) => {
		request({
			url:'/front/report/service/summary',
			method:'GET',
			data:{id:1,month:date}
		}).then((res:any) => {
			if(res.data.code === 0){
				Object.assign(serviceData,res.data.data)
				shareTitle.value = res.data.data.title
				setTimeout(() => {
					let important_res = {
						series: [
							{
								data: [{ "name": "危化企业", "value": Number(serviceData.danger) },
								{ "name": "金属冶炼企业", "value": Number(serviceData.metal) },
								{ "name": "粉尘涉爆企业", "value": Number(serviceData.dust) },
								{ "name": "其它", "value": Number(serviceData.other) },
								]
							}
						]
					}

					importantChartData.value = JSON.parse(JSON.stringify(important_res));
				}, 500);
			}
			flag.value = true
		})
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/service/index?id=' + shareParam.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/report/service/index?id=' + shareParam.value
		}
	})
	
	onLoad((option)=>{
		getMenuData(option.id)
		menuId.value = option.id
	})
	
	getParkList()
	getServiceData(dateTimeValue.value)
</script>

<style lang="scss" scoped>
	.service-summary {
	  position: relative;
	  width: 100%;
	  height: 450rpx;
	  z-index: 2;
	
	  &::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;
	      }
	    }
	  }
	}
	.service-container{
		position: relative;
		top: -40rpx;
		z-index: 99;
		background-color: #fff;
		border-radius: 50rpx;
		.title-container {
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  line-height: 1;
		  border-radius:none;
		
		  .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;
		    }
		  }
		}
		.service-detail {
		  position: relative;
		  border-radius: 20rpx 20rpx 0 0;
		  z-index: 10;
		  .box{
			  background: linear-gradient(-45deg, rgba(0, 150, 255, 0.5), rgba(0, 150, 255, 0.05));
			  .childbox{
				  width: calc(100% / 3 - 15rpx);
				  background: linear-gradient(-45deg, rgba(0, 150, 255, 0.05), rgba(0, 150, 255, 0.3));
			  }
			  .child{
				  width:  calc(100% / 2 - 10rpx);;
			  }
		  }
		  
		  .text{
			  letter-spacing: 4rpx;
			  text-align: justify;
			  text-indent: 2em;
		  }
		  .topic-item {
		    & + .topic-item {
		      margin-top: 36rpx;
		    }
		  }
		  .service-review{
		  	.review-item{
		  		width: 50%;
				box-sizing: border-box;
		  	}
		  }
		}
	}
	.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>