<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue"

	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"

	import {
		getOverdueNum
	} from "@/api/work/overdue.js"

	import {
		getannouncementList,
		getUnwriteReportList,
		getHomeStats,
		getBanner
	} from "@/api/home.js"

	import {
		getJSDDlist,
		getZJLYlist,
		getHYFLlist,
	} from "@/api/work/projectInfo.js";

	import {
		getMessageNum
	} from "@/api/work/message.js"

	import store from '@/store'

	import {
		checkRoleById
	} from "@/utils/permission.js"

	import iconEnterpriseInfo from "@/static/func/enterpriseInfos.svg";
	import jdglicon from "@/static/func/jdgl-icon.svg";
	import wtdbicon from "@/static/func/wtdb-icon.svg";
	import tjfxicon from "@/static/func/tjfx-icon.svg";
	import zcwjicon from "@/static/func/zcwj-icon.svg";
	import bslcicon from "@/static/func/bslc-icon.svg";
	import xxjdicon from "@/static/func/xxjd-icon.svg";
	import tzggicon from "@/static/func/tzgg-icon.svg";
	import hhdicon from "@/static/func/hhd-icon.svg";
	import zdxmicon from "@/static/func/zdxm-icon.svg";
	import iconFundUse from "@/static/func/fundUse.svg";
	import iconProjectPercents from "@/static/func/projectPercents.svg";
	import iconImportant from "@/static/func/important.svg";
	import iconPreFlow from "@/static/func/preFlow.svg";
	import iconWeekly from "@/static/func/weekly.svg";
	import iconMonthly from "@/static/func/monthly.svg";
	import iconYearly from "@/static/func/yearly.svg";
	import iconOverdued from "@/static/func/overdued.svg";
	import iconOverdueWill from "@/static/func/overdueWill.svg";

	// 项目信息
	let projectYear = ref(2023);

	// 选择年
	let yearShow = ref(false);
	let defaultIndex = ref([0]);
	let yearColumns = ref([
		["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012",
			"2013",
			"2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
			"2027", "2028", "2029", "2030", "2031", "2032", "2033"
		]
	])
	const yearShowChoose = function() {
		yearShow.value = true;
	}
	const yearClose = function(e) {
		if (e) {
			projectYear.value = e.value[0];
			// 获取最新数据
			getProjectInfo();
		}

		yearShow.value = false;
	}

	// 选择分类
	let projectKind = ref(null);
	let projectKindId = null;
	let kindShow = ref(false);
	let kindColumns = ref([]);
	const kindShowChoose = function() {
		kindShow.value = true;
	}
	const kindClose = function(e) {
		if (e) {
			projectKind.value = e.value[0];
			projectKindId = hyflFull.find(item => item.value === projectKind.value).key;
			// 获取最新数据
			getProjectInfo();
		}

		kindShow.value = false;
	}
	let hyflFull = [];
	const getHYFL = function() {
		getHYFLlist().then(res => {
			hyflFull = res.data.list;
			hyflFull.push({
				key: null,
				value: "所有分类"
			});
			kindColumns.value = [res.data.list.map(item => item.value)];
			kindColumns.value[0].unshift("所有分类");
		})
	};

	// 选择地点
	let projectArea = ref(null);
	let projectAreaId = null;
	let areaShow = ref(false);
	let areaColumns = ref([]);
	const areaShowChoose = function() {
		areaShow.value = true;
	}
	const areaClose = function(e) {
		if (e) {
			projectArea.value = e.value[0];
			projectAreaId = jsddFull.find(item => item.value === projectArea.value).key;
			// 获取最新数据
			getProjectInfo();
		}

		areaShow.value = false;
	}
	let jsddFull = [];
	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddFull.push({
				key: null,
				value: "所有地区"
			});

			areaColumns.value = [res.data.list.map(item => item.value)];
			areaColumns.value[0].unshift("所有地区");
		})
	};

	// 资金来源
	let projectAmt = ref(null);
	let projectAmtId = null;
	let zjlyShow = ref(false);
	let zjlyColumns = ref([]);
	const zjlyShowChoose = () => {
		zjlyShow.value = true
	}
	const zjlyClose = e => {
		if (e) {
			projectAmt.value = e.value[0];
			projectAmtId = zjlyFull.find(item => item.value === projectAmt.value).key;
			// 获取最新数据
			getProjectInfo();
		}
		zjlyShow.value = false
	}
	let zjlyFull = []
	const getZJLY = () => {
		getZJLYlist().then(res => {
			zjlyFull = res.data.list;
			zjlyFull.unshift({
				key: null,
				value: "所有来源"
			});

			zjlyColumns.value = [res.data.list.map(item => item.value)];
		})
	}

	let projectNum = ref([{
		name: "亿元以下",
		key: "numAmt1",
		value: 0,
	}, {
		name: "1-5亿",
		key: "numAmt2",
		value: 0,
	}, {
		name: "5-10亿",
		key: "numAmt3",
		value: 0,
	}, {
		name: "10亿以上",
		key: "numAmt4",
		value: 0,
	}]);

	let fundNum = ref([{
		name: "年度计划",
		key: "amtJh",
		value: 0,
	}, {
		name: "当月计划",
		key: "monthPlan",
		value: 0,
	}, {
		name: "年度完成",
		key: "amtSj",
		value: 0,
	}]);


	let newProjectNum = ref([{
		name: "已开工",
		key: "doing",
		value: 0,
	}, {
		name: "已停工",
		key: "stop",
		value: 0,
	}, {
		name: "已完工",
		key: "end",
		value: 0,
	}, {
		name: "完工率",
		key: "rate",
		value: 0,
	}]);


	let fullPercents = ref(0);

	let pieOpts = ref({
		update: true,
		color: ["#69E4E0", "#21DCD5", "#1ACEC8", "#12B9B4", "#07A19C"],
		enableScroll: false,
		// dataLabel: true,
		legend: {
			show: false,
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				customRadius: 50,
				labelWidth: 10,
				borderWidth: 1,
				offsetAngle: -90
			}
		}
	})

	let ringOpts = ref({
		update: true,
		color: ["#0A0EE4", "#F05C17", "#FFAE89"],
		enableScroll: false,

		legend: {
			show: false
		},
		title: {
			name: "300",
			fontSize: 12,
			color: "#3D3D3D"
		},
		subtitle: {
			name: "项目总数",
			fontSize: 12,
			color: "#3D3D3D"
		},
		extra: {
			ring: {
				customRadius: 50,
				ringWidth: 18,
				border: false,
				offsetAngle: -90
			}
		}
	})

	let ringTotal = ref(0);
	let ringChartData = ref({
		series: [{
			data: [{
				name: '新建项目',
				value: 100,
				labelShow: false
			}, {
				name: '续建项目',
				value: 100,
				labelShow: false
			}, {
				name: '储备项目',
				value: 100,
				labelShow: false
			}]
		}]
	})

	let showRing = ref(false)
	let showPie = ref(false)

	let addreListOrginal = [];
	let pieChartData = ref({
		series: [{
			data: [{
				name: "无数据",
				value: 0,
				labelShow: false,
			}, ],
		}]
	})
	const pieClick = (e) => {
		let subjectId = addreListOrginal[e.currentIndex]?.subjectId;

		let throughObj = {
			subjectId,
			year: projectYear.value,
			indusKind: projectKindId,
			buildAddre: projectAreaId,
			zjly: projectAmtId,
			name: addreListOrginal[e.currentIndex]?.title
			// name:projectAreaId
		}
		let url = "/pages/countAnalysis/through/index?key=home&";

		for (let i in throughObj) {
			let item = null;
			item = ((throughObj[i] ?? "") === "") ? `${i}=&` : `${i}=${throughObj[i]}&`;
			url = url += item;
		}

		url = url.substr(0, url.length - 1);
		uni.navigateTo({
			url
		})
	}
	const ringClick = (e) => {
		// let subjectId = ringChartData.value.series[0].data.[e.currentIndex]?.subjectId;
		let name = ringChartData.value.series[0].data[e.currentIndex]?.name
		let throughObj = {
			year: projectYear.value,
			indusKind: projectKindId,
			buildAddre: projectAreaId,
			zjly: projectAmtId,
			queryType: '',
			name: name
		}
		if (name == '新建项目') {
			throughObj.queryType = 0
			throughObj.propKind = 1
			throughObj.otherStatus = '7,8,A'
		} else if (name == '续建项目') {
			throughObj.queryType = 0
			throughObj.propKind = 2
			throughObj.otherStatus = '7,8,A'
		} else if (name == '储备项目') {
			throughObj.queryType = 3
		}

		let url = "/pages/projectInfo/index?type=home&";

		for (let i in throughObj) {
			let item = null;
			item = ((throughObj[i] ?? "") === "") ? `${i}=&` : `${i}=${throughObj[i]}&`;
			url = url += item;
		}

		url = url.substr(0, url.length - 1);

		uni.navigateTo({
			url
		})
	}

	function newProjectClick(e) {
		let throughObj = {
			year: projectYear.value,
			indusKind: projectKindId,
			buildAddre: projectAreaId,
			zjly: projectAmtId,
			queryType: ''
		}

		if (e == 'doing') {
			throughObj.queryType = 0
			throughObj.propKind = '1'
			throughObj.status = '7'
			throughObj.name = '已开工'
		} else if (e == 'stop') {
			throughObj.queryType = 0
			throughObj.propKind = '1'
			throughObj.status = '8'
			throughObj.name = '已停工'
		} else if (e == 'end') {
			throughObj.queryType = 0
			throughObj.propKind = '1'
			throughObj.status = "A"
			throughObj.name = '已完工'
		} else if (e == 'rate') {
			return
		}

		let url = "/pages/projectInfo/index?type=home&";

		for (let i in throughObj) {
			let item = null;
			item = ((throughObj[i] ?? "") === "") ? `${i}=&` : `${i}=${throughObj[i]}&`;
			url = url += item;
		}

		url = url.substr(0, url.length - 1);

		uni.navigateTo({
			url
		})
	}


	function getProjectInfo() {
		getHomeStats({
			year: projectYear.value,
			indusKind: projectKindId,
			buildAddre: projectAreaId,
			zjly: projectAmtId
			
		}).then(res => {
			const {
				data
			} = res;
			//  亿元项目数
			for (let i in projectNum.value) {
				projectNum.value[i].value = data[projectNum.value[i].key] ?? "--";
			}
			// 资金投资情况
			for (let i in fundNum.value) {
				fundNum.value[i].value = data[fundNum.value[i].key] ?? "--";
			}
			// 新建项目数
			for (let i in newProjectNum.value) {
				newProjectNum.value[i].value = data.buildingCount[newProjectNum.value[i].key] ?? "--";
			}
			// 实际整体进度
			fullPercents.value = (data.numBl ?? "") === "" ? 0 : parseFloat(data.numBl);

			// 圆环图
			numNew.value = ringChartData.value.series[0].data[0].value = data.numNew;
			numOld.value = ringChartData.value.series[0].data[1].value = data.numOld;
			numNo.value = ringChartData.value.series[0].data[2].value = data.numNo;
			ringOpts.value.title.name = data.numTotal ?? "0";
			showRing.value = true;

			// 饼图
			addreListOrginal = data.buildAddress;

			let tempArr = [];
			for (let i in data.buildAddress) {
				tempArr.push({
					name: data.buildAddress[i].title,
					value: data.buildAddress[i].num,
					labelShow: false,
				})
			}

			if (data.buildAddress.length > 0) {
				pieChartData.value.series[0].data = tempArr
			} else {
				pieChartData.value.series[0].data = [{
					name: "无数据",
					value: 0,
					labelShow: false
				}]
			};
			showPie.value = true;
		})
	}

	let numNew = ref(0);
	let numOld = ref(0);
	let numNo = ref(0);

	// 公告列表
	let announcementList = ref([]);

	function getAnnounceMent() {
		getannouncementList({
			pageNo: 1,
			pageSize: 3
		}).then(res => {
			let titleList = res.data.list.map(item => {
				return item.title
			})
			announcementList.value = titleList.length > 0 ? titleList : ['当前暂无公告'];
			let bigItem = functionList.value.find(item => item.name === "通知公告");
			bigItem.badgeValue = res.data.totalCount ?? 0;
		})
	}

	// 逾期数量
	let overdueTotal = ref(0);
	let overdueWill = ref(0);
	let overdued = ref(0);

	function getOverdue() {
		getOverdueNum().then(res => {
			let bigItem = functionList.value.find(item => item.name === "问题督办");
			bigItem.badgeValue = Number((res.data.willOver ?? 0) + (res.data.isOver ?? 0));
		})
	}

	// 功能列表
	let functionList = ref([{
		name: '基本信息',
		url: '/pages/functionList/index',
		icon: iconEnterpriseInfo,
		type: 'jbxx',
		permissionCode: '711'
	}, {
		name: '进度管理',
		url: '/pages/functionList/index',
		icon: jdglicon,
		type: 'jdgl',
		permissionCode: '811'
	}, {
		name: '统计分析',
		url: '/pages/functionList/index',
		icon: tjfxicon,
		type: 'tjfx',
		permissionCode: '714'
	}, {
		name: '重点项目',
		url: '/pages/projectImportant/index',
		icon: zdxmicon,
		type: 'zdxm',
		permissionCode: '711',
	}, {
		name: '形象进度',
		url: '/pages/projectImage/index',
		icon: xxjdicon,
		// permissionCode: '7112'
	}, {
		name: '政策文件',
		url: '/pages/policy/search/index',
		icon: zcwjicon,
		// permissionCode: '7112'
	}, {
		name: '红黄灯',
		url: '/pages/light/index',
		icon: hhdicon,
		type: 'hhd',
		permissionCode: '711',
	}, {
		name: '办事流程',
		url: '/pages/process/index',
		icon: bslcicon,
		// permissionCode: '7112'
	}, {
		name: '问题督办',
		url: '/pages/functionList/index',
		icon: wtdbicon,
		type: 'wtdb',
		permissionCode: '713',
		showBadge: true,
		badgeValue: 0,
	}, {
		name: '通知公告',
		url: '/pages/announcement/list/index',
		icon: tzggicon,
		// permissionCode: '7112'，
		showBadge: true,
		badgeValue: 0,
	}])

	// 判断功能菜单权限
	const roles = store.getters && store.getters.permissions;

	function judgeFuncList() {
		// let tempList = JSON.parse(JSON.stringify(functionList.value))
		// for (let i in tempList) {
		// 	//如果父级都没权限 直接移除
		// 	if (!roles.includes(tempList[i].permissionCode)) {
		// 		tempList[i].ban = true
		// 	} else {
		// 		let funcListSon = tempList[i].funcList
		// 		for (let j in funcListSon) {
		// 			if (!roles.includes(funcListSon[j].permissionCode)) {
		// 				funcListSon[j].ban = true
		// 			}
		// 		}
		// 	}
		// }

		// let filterList = tempList.filter(item => {
		// 	return !item.ban
		// })

		// for (let i in filterList) {
		// 	let filterListSon = filterList[i].funcList.filter(item => {
		// 		return !item.ban
		// 	})
		// 	filterList[i].funcList = filterListSon
		// }

		// functionList.value = filterList
	}

	function goToPage(url, permissionCode, type) {
		if (permissionCode) {
			let havePermission = checkRoleById([permissionCode])
			if (!havePermission) return
		}

		uni.$u.route({
			url: url,
			params: {
				type: type || null
			}
		})
	}

	// =============================未填写周报月报
	let popupShow = ref(false)
	let unWriteList = ref([])
	let unWriteListTotal = ref(0)

	function getUnwirteList() {
		getUnwriteReportList().then(res => {
			if (res.data.list.length > 0) {
				popupShow.value = true;
				unWriteList.value = res.data.list;
				unWriteListTotal.value = res.data.list.length;
			}
		})
	}

	function goToWriteReport(item) {
		const {
			sub_id: subId,
			month1: kj_month,
		} = item;
		let year = item.month1.substr(0, 4)
		let startDate = item.month1.substr(0, 10)
		if (item.kind === "1") { // 周报		
			uni.navigateTo({
				url: `/pages/weekly/input/index?subId=${subId}&startDate=${startDate}&year=${year}&kj_month=${kj_month}`
			})
		} else { // 月报	
			let kjMonth = kj_month.substring(0, 4) + '年' + kj_month.substring(4, 6) + '月';
			uni.navigateTo({
				url: `/pages/monthly/input/index?subId=${subId}&startDate=${startDate}&year=${year}&kj_month=${kjMonth}`
			})
		}
	}

	function popupClose() {
		popupShow.value = false
	}

	function getMessageCount() {
		getMessageNum().then(res => {
			if (res.data.count) {
				uni.setTabBarBadge({ //显示数字
					index: 1, //tabbar下标
					text: res.data.count + '' //数字
				})
			} else {
				uni.removeTabBarBadge({ //显示数字
					index: 1, //tabbar下标
				})
			}
		})
	}

	function projectgoto(e) {
		let params = {
			indusKind: projectKindId,
			subjectId: projectAreaId,
			zjly: projectAmtId,
			year: projectYear.value,
			startAmt: '',
			endAmt: '',
			type: 'home',
			queryType: 0
		}
		
		if (e.key == 'numAmt1') {
			params.startAmt = 0
			params.endAmt = 10000
			params.name = '亿元以下'
		} else if (e.key == 'numAmt2') {
			params.startAmt = 10000
			params.endAmt = 50000
			params.name = '1-5亿'
		} else if (e.key == 'numAmt3') {
			params.startAmt = 50000
			params.endAmt = 100000
			params.name = '5-10亿'
		} else if (e.key == 'numAmt4') {
			params.startAmt = 100000
			params.endAmt = null
			params.name = '10亿以上'
		}

		uni.$u.route({
			url: '/pages/projectInfo/index',
			params: params
		})
	}

	function amtgoto(e) {
		let params = {
			indusKind: projectKindId,
			subjectId: projectAreaId,
			zjly: projectAmtId,
			isCurrMonth: null,
			year: null,
			key: null
		}
		if (e.key == 'amtJh') {
			params.year = projectYear.value
			params.key = 'year'
			params.name = '年度计划'
			uni.$u.route({
				url: '/pages/countAnalysis/through/index',
				params: params
			})

		} else if (e.key == "monthPlan") {
			params.isCurrMonth = true
			params.key = 'mothAmt'
			params.name = '当月计划'
			uni.$u.route({
				url: '/pages/countAnalysis/through/index',
				params: params
			})
		} else if (e.key == 'amtSj') {
			params.year = projectYear.value
			params.key = 'ndjh'
			params.name = '年度完成'
			uni.$u.route({
				url: '/pages/countAnalysis/through/index',
				params: params
			})
		}
	}

	//轮播图
	let bannerList = reactive([])

	async function getBannerList() {
		getBanner().then(res => {
			bannerList = res.data.pictureList
		})
	}


	function bannerClick(e) {
		let result = {}
		for (let i = 0; i < bannerList.length; i++) {
			if (i == e) {
				result = bannerList[i]
			}
		}

		nextTick(() => {
			// uni.navigateTo({
			// 	url: `/pages/policy/detail/index?title=${result.title}&id=${result.id}`
			// })
			uni.$u.route({
				url: '/pages/policy/detail/index',
				params: {
					title: result.title,
					id: result.id
				}
			})
		})
	}

	onLoad(() => {
		let now = new Date();
		projectYear.value = now.getFullYear();
		defaultIndex.value = [projectYear.value - 2000];
		// judgeFuncList(); //判断权限
		getAnnounceMent(); //获取公告
		getHYFL(); //获取行业分类
		getJSDD(); //获取建设地点
		getZJLY(); // 获取资金来源
		getProjectInfo(); //获取项目数据
		getOverdue(); //获取逾期数量
		// getUnwirteList(); //获取未填写周报月报信息
		getBannerList(); //获取轮播图数据
		getMessageCount(); //获取未读消息数量
	});

	onShow(() => {
		if (popupShow.value) {
			getUnwirteList();
		}
	})
</script>

<template>
	<view class="container">
		<!-- 头 固定-->
		<view class="title-content">
			<text class="title">哈密市重点项目建设及工作可视化管理平台</text>

			<!-- 搜索 -->
			<view class="search">
				<view class="search-input">
					<view class="search-icon"></view>
					<input @click="goToPage('/pages/search/index')" placeholder="项目、领导电话..."
						placeholder-style="color: #D8D8D8;font-size:24rpx" />
				</view>

				<view class="search-focus" @click="goToPage('/pages/focus/index')">
					<view class="search-focus-icon"></view>
					<text class="text">关注</text>
				</view>
			</view>
		</view>

		<view class="top-blue">
			<view class="banner-box">
				<u-swiper :list="bannerList" indicator indicatorMode="line" keyName='coverImg' circular radius='20rpx'
					height="254rpx" @click="bannerClick"></u-swiper>
			</view>

			<view class="function-list">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item,index) in functionList" :key="index"
						@click="goToPage(item.url,item.permissionCode,item.type)">
						<view class="grid-item">
							<u-badge v-if="item.showBadge" class="badge-num" type="error" max="99" :value="item.badgeValue"></u-badge>
							<view class="grid-item-icon">
								<image :src="item.icon"></image>
							</view>

							{{item.name}}
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<!-- 项目信息 -->
			<view class="project-info">
				<view class="project-info-select">
					<view class="choose-year" @click="yearShowChoose()">
						{{projectYear??"年度"}}
						<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
					</view>

					<view class="choose-year border" @click="kindShowChoose()">
						{{projectKind ??"行业分类"}}
						<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
					</view>

					<view class="choose-year border" @click="areaShowChoose()">
						{{projectArea ??"建设地点"}}
						<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
					</view>

					<view class="choose-year border" @click="zjlyShowChoose()">
						<view class="choose-year-text">{{projectAmt ??"资金来源"}}</view>
						<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="project-num-box">
					<view class="project-num-box-item text-color1">
						<view class="item-title">
							亿元项目数(个)
						</view>
						<view class="item-box" v-for="(item,index) in projectNum" :key="index" @click="projectgoto(item)">
							<view class="name">
								{{item.name}}
							</view>
							<view class="num">
								{{item.value}}
							</view>
						</view>
					</view>
					<view class="project-num-box-item text-color2">
						<view class="item-title">
							资金投资情况(万元)
						</view>
						<view class="item-box high-gap" v-for="(item,index) in fundNum" :key="index" @click="amtgoto(item)">
							<view class="name">
								{{item.name}}
							</view>
							<view class="num">
								{{item.value}}
							</view>
						</view>
						<!-- <view class="item-box-horizon">
            	<view class="item-box" v-for="(item,index) in fundNum" :key="index"
            		@click="amtgoto(item)">
            		<view class="name">{{item.name}}</view>
            		<view class="num">{{item.value}}</view>
            	</view>
            </view> -->
					</view>
				</view>

				<view class="project-num-box">
					<view class="project-num-box-item text-color3">
						<view class="item-title">
							新建项目数(个)
						</view>
						<view class="item-box-horizon">
							<view class="item-box" v-for="(item,index) in newProjectNum" :key="index"
								@click="newProjectClick(item.key)">
								<view class="name">{{item.name}}</view>
								<view class="num">{{item.value}}{{item.key === "rate" ? "%" : ""}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="project-process">
					<view class="title">实际整体进度</view>

					<view class="line-progress">
						<u-line-progress :percentage="fullPercents" inactiveColor="#C1CEED" activeColor="#5D5AFF" :showText="false"
							height="13"></u-line-progress>
					</view>

					<view class="percent">{{fullPercents}}%</view>
				</view>
				<!-- 饼图 -->
				<view class="charts">
					<view class="charts-item" style="width: 40%;">
						<view class="charts-item-title">
							项目个数
						</view>

						<view class="charts-item-ring">
							<view class="pie-back">
								<image src="@/static/echarts-pie.png" mode=""></image>
							</view>
							<qiun-data-charts v-if="showRing" type="ring" :opts="ringOpts" :chartData="ringChartData" :ontouch="true"
								@getIndex="ringClick" />
						</view>

						<view class="charts-item-description">
							<view class="charts-item-key">
								<view class="charts-item-color" style="border-color: #0A0EE4;"></view>
								<view class="charts-item-name">新建项目</view>
							</view>
							<view class="charts-item-value">{{numNew}}</view>
						</view>

						<view class="charts-item-description">
							<view class="charts-item-key">
								<view class="charts-item-color" style="border-color: #F05C17;"></view>
								<view class="charts-item-name">续建项目</view>
							</view>
							<view class="charts-item-value">{{numOld}}</view>
						</view>

						<view class="charts-item-description">
							<view class="charts-item-key">
								<view class="charts-item-color" style="border-color: #FFAE89;"></view>
								<view class="charts-item-name">储备项目</view>
							</view>
							<view class="charts-item-value">{{numNo}}</view>
						</view>
					</view>

					<view class="charts-item" style="width: 60%; padding: 0 20rpx; box-sizing: border-box;">
						<view class="charts-item-title">
							建设地点实际投资占比
						</view>
						<view class="charts-item-pie">
							<qiun-data-charts v-if="showPie" type="pie" :opts="pieOpts" :chartData="pieChartData"
								tooltipFormat="tooltipDemo1" :ontouch="true" @getIndex="pieClick" />
						</view>

						<view class="charts-item-description" v-for="(item,index) in pieChartData.series[0].data" :key="index">
							<view class="charts-item-key">
								<view class="charts-item-color" :style="{borderColor:pieOpts.color[index]}"></view>
								<view class="charts-item-name">{{item.name ?? "--"}}</view>
							</view>
							<view class="charts-item-value">{{item.value ?? "--"}}%</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 底部间隔 -->
			<view class="gap-bottom"></view>
		</view>

		<!-- 周报月报弹窗 -->
		<u-popup :show="popupShow" :round="20" @close="popupClose()" mode="center" closeable>
			<view class="remind-box">
				<text class="remind-title">提示</text>

				<view class="remind-card" v-for="(item,index) in unWriteList" :key="index">
					<view class="remind-item">
						<view class="remind-item-name">类型</view>
						<view class="remind-item-content">{{item.kind==='1'?'缺失周报':'缺失月报'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-name">项目名称</view>
						<view class="remind-item-content">{{item.sub_name || '--'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-name">说明</view>
						<view class="remind-item-content">{{item.remark || '--'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-btn" @click="goToWriteReport(item)">
							{{item.kind==='1'?'填写周报':'填写月报'}}
						</view>
					</view>

					<view class="remind-count">
						{{index + 1}}/{{unWriteListTotal}}
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>

		<!-- 行业选择 -->
		<u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>

		<!-- 地点选择 -->
		<u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
			closeOnClickOverlay></u-picker>

		<!-- 资金来源 -->
		<u-picker :show="zjlyShow" :columns="zjlyColumns" @confirm="zjlyClose" @cancel="zjlyClose" @close="zjlyClose"
			closeOnClickOverlay></u-picker>
	</view>
</template>

<style lang="scss" scoped>
	@font-face {
		font-family: TITLETEXT;
		src: url('@/font/RuiZiAoYunJingShenPinBoJianMianFei-Shan(REEJI-PinboGB-Flash)-2.ttf');
	}

	page {
		height: 100%;
		background-color: #EAF1FF;
	}

	.text-color1 {
		color: #003FA8;
		background: #F0F4FC;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.text-color2 {
		color: #8F5F00;
		background: #FFFAF0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	// .text-color2 {
	// 	width: 100% !important;
	// 	height: 140rpx !important;
	// 	margin-top: 12rpx;
	// 	padding: 14rpx 15rpx 20rpx 15rpx;
	// 	color: #8F5F00;
	// 	background: #FFFAF0;
	// 	border-radius: 16rpx 16rpx 16rpx 16rpx;
	// }
	.text-color3 {
		width: 100% !important;
		height: 140rpx !important;
		margin-top: 12rpx;
		padding: 14rpx 15rpx 20rpx 15rpx;
		color: #4E00A8;
		background: #F8F3FF;
		border-radius: 16rpx;
	}

	.container {
		background: #EAF1FF;
	}

	.title-content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 258rpx;
		padding-top: 104rpx;
		text-align: center;
		background-color: #1763E7;
		z-index: 1;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			color: #FFF;
		}
	}

	.search {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 82rpx;
		margin: auto;
		padding: 25rpx 0 25rpx 0;

		.search-input {
			display: flex;
			align-items: center;
			width: 80%;
			height: 52rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			text-align: left;
			background-color: #fff;

			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.search-icon {
				width: 28rpx;
				height: 32rpx;
				margin-right: 26rpx;
				background-image: url('@/static/search-black.svg');
				background-size: 100% 100%;
			}
		}

		.search-focus {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 19%;
			height: 52rpx;
			background: linear-gradient(270deg, #63B4FF 29%, rgba(23, 99, 230, 0.32) 88%);
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.search-focus-icon {
				width: 36rpx;
				height: 32rpx;
				margin-right: 10rpx;
				background-image: url('@/static/focus.png');
				background-size: 100% 100%;

			}

			.text {
				margin-right: 20rpx;
				font-size: 28rpx;
				white-space: nowrap;
				color: #FFFFFF;
			}
		}
	}

	.top-blue {
		width: 100%;
		height: 702rpx;
		padding-top: 260rpx;
		margin-bottom: 82rpx;
		background: linear-gradient(180deg, #1763E7 60%, rgba(234, 241, 255, 0) 93%);
		border-radius: 0 0 40rpx 40rpx;

		.banner-box {
			width: 92%;
			height: 254rpx;
			margin: auto;
		}
	}

	.announcementList {
		width: 92%;
		height: 72rpx;
		margin: 0 auto 32rpx;
		padding: 10rpx 0;
		color: #FF8D02;
		background-color: #FFF7DC;
		border-radius: 26rpx;

		.announcementList-text {
			margin-bottom: 18rpx;
			font-size: 28rpx;
		}
	}

	::v-deep .u-notice-bar {
		width: 100%;
		// padding: 0;
		border-radius: 19rpx;
	}

	::v-deep .u-notice__swiper__item__text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.special-funcs {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 210rpx;
		margin: 50rpx auto 32rpx;
		background-size: 100% 100%;

		.special-func-item {
			width: 200rpx;
			height: 210rpx;
			padding: 34rpx 18rpx;
			box-sizing: border-box;
			background-size: 100% 100%;

			.special-func-title {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}

			.special-func-name {
				color: #FFFFFF;
				line-height: 34rpx;
				font-size: 32rpx;
				font-family: TITLETEXT;
			}
		}

		.gov {
			background-image: url('@/static/special-gov.png');
		}

		.todo {
			background-image: url('@/static/special-todo.png');
		}

		.images {
			background-image: url('@/static/special-image.png');
		}
	}

	.project-info-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		height: 80rpx;
		background-color: #fff;
		margin: auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.lines {
			height: 46rpx;
			border-right: #D7DDEA;
		}

		.choose-year {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #343437;

			.choose-year-text {
				width: 3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.border {
			border-left: 3rpx solid #EAF0FD;
		}
	}

	.project-info {
		width: 92%;
		min-height: 326rpx;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;

		.project-num-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 92%;
			margin: auto;

			.project-num-box-item {
				width: 48%;
				height: 262rpx;
				padding: 20rpx 15rpx 20rpx 15rpx;

				.item-title {
					font-size: 28rpx;
					font-weight: 500;
					font-family: OPPOSans-M;
				}

				.item-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5rpx 0 5rpx 0;

					.name {
						font-size: 24rpx;
						font-weight: 400;
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						font-family: OPPOSans-M;
					}
				}

				.high-gap {
					padding: 5rpx 0 16rpx 0;
				}
			}
		}

		.blue {
			color: #1763E7
		}

		.project-num-minbox {
			display: flex;
		}

		.project-num-item {
			flex: 1;
			margin: auto 0;
			font-size: 24rpx;
			color: #343437;
			text-align: center;

			.project-num-value {
				margin-bottom: 8rpx;
				font-size: 36rpx;
				color: #343437;
				font-weight: 700;
			}
		}

		.project-process {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 92%;
			margin: auto;
			height: 88rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #4B17E7;

			.line-progress {
				width: 58%;
			}

			.title {
				font-size: 28rpx;
				font-weight: 500;
				font-family: OPPOSans-M;
				color: #001643;
			}

			.percent {

				font-weight: 500;
				font-size: 28rpx;
				font-family: OPPOSans-M;
				color: #001643;
			}
		}
	}

	.item-box-horizon {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		margin-top: 4rpx;

		.item-box {
			display: block !important;
			text-align: center;
		}
	}

	.charts {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: auto;

		.charts-item {

			height: 100%;
			box-sizing: border-box;
			border-radius: 40rpx;
			// border: 3rpx solid rgba(200, 216, 247, 0.302);

			.charts-item-title {
				margin: auto;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #001643;
				font-family: OPPOSans-M;
			}

			.charts-item-ring {
				position: relative;
				height: 250rpx;
				margin: 0 auto;

				.pie-back {
					position: absolute;
					left: 50%;
					top: 10rpx;
					transform: translate(-49%);

					image {
						width: 268rpx;
						height: 268rpx;
						z-index: 0;
					}
				}
			}

			.charts-item-pie {
				width: 100%;
				// height: 400rpx;
				height: 250rpx;
				margin: 0 auto;
			}

			.charts-item-text {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3D3D3D;
			}
		}
	}

	.charts-item-description {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 20rpx 0;
		font-size: 24rpx;

		.charts-item-key {
			display: flex;
			align-items: center;
		}

		.charts-item-color {
			width: 26rpx;
			height: 26rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			border: 6rpx solid #fff;
		}

		.charts-item-name {
			font-size: 24rpx;
			color: #001643;
		}


		.charts-item-value {
			font-weight: 500;
			font-size: 24rpx;
			color: #001643;
		}
	}

	.overdue {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 136rpx;
		margin: 25rpx auto;
		border-radius: 28rpx;
		backdrop-filter: blur(40rpx);
	}

	.overdue-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 328rpx;
		height: 136rpx;
		padding: 0 28rpx 0 44rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: #001D4F;
		font-weight: 400;
		font-family: TITLETEXT;
		background-color: #fff;
		border-radius: 28rpx;

		.overdue-icon {
			background-size: 100% 100%;
			background-position: center center;
		}

		.overdue-will {
			width: 52rpx;
			height: 53rpx;
			background-image: url('@/static/overdue-warn.png');

			.badge-num {
				position: absolute;
				top: 40rpx;
				right: -36rpx;
			}
		}

		.overdued {
			width: 61rpx;
			height: 54rpx;
			background-image: url('@/static/overdue.png');

			.badge-num {
				position: absolute;
				top: 40rpx;
				right: -36rpx
			}
		}

		.badge-box {
			position: relative;
		}

		.overdue-item-text {
			display: flex;
			align-items: center;
		}
	}

	.report {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: 25rpx auto 0;
		padding: 0 78rpx;
		height: 164rpx;
		border-radius: 28rpx;
		background: #fff;
	}

	.report-item {
		width: 128rpx;
		height: 142rpx;
		margin: auto 0;
		text-align: center;

		.report-icon {
			width: 96rpx;
			height: 96rpx;
			margin: 0 auto;
			background-size: 100% 100%;
		}

		.weekly {
			background-image: url('@/static/icon-weekly.svg');
		}

		.monthly {
			background-image: url('@/static/icon-monthly.svg');
		}

		.yearly {
			background-image: url('@/static/icon-yearly.svg');
		}

		.report-item-text {
			margin-top: 10rpx;
			color: #000;
			font-size: 28rpx;
		}
	}

	.gap-line {
		width: 100%;
		height: 20rpx;
		background: #E8ECF4;
	}

	.function-list {
		margin: 20rpx auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background: #FFFFFF;
		height: 278rpx;
		width: 92%;

		.grid-item {
			height: 62rpx;
			margin: 18rpx 0 46rpx;
			font-size: 28rpx;
			color: #343437;
			font-weight: 400;

			.badge-num {
				position: absolute;
				top: 5rpx;
				right: 25rpx;
			}

			.grid-item-icon {
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto 6rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom-item {
			margin-bottom: 0;
		}
	}

	.gap-bottom {
		width: 100%;
		height: 150rpx;
	}

	.remind-box {
		width: 672rpx;
		min-height: 464rpx;
		max-height: 858rpx;
		padding: 16rpx 40rpx;
		overflow: hidden;
		overflow-y: scroll;

		.remind-title {
			color: #FF4800;
			font-size: 36rpx;
		}

		.remind-card {
			position: relative;
			min-height: 376rpx;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #D8D8D8;

			.remind-count {
				position: absolute;
				top: 0;
				right: -40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 134rpx;
				height: 64rpx;
				font-size: 32rpx;
				color: #1869F6;
				background: #CEE0FF;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
			}
		}

		.remind-item {
			display: flex;
			align-items: flex-start;
			margin-top: 40rpx;
			font-size: 32rpx;

			.remind-item-name {
				min-width: 192rpx;
				color: #9E9E9E;
			}

			.remind-item-content {
				color: #343437;
				float: left;
			}

			.remind-item-btn {
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 36rpx;
				color: #fff;
				text-align: center;
				background: #1869F6;
				border-radius: 16rpx;
			}
		}
	}

	::v-deep .u-popup__content {
		overflow: hidden;
	}
</style>