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

  import {
    onLoad,
    onShow,
    onTabItemTap
  } 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 = ''
      throughObj.status = '7'
      throughObj.name = '已开工'
    } else if (e == 'stop') {
      throughObj.queryType = 0
      throughObj.propKind = ''
      throughObj.status = '8'
      throughObj.name = '已停工'
    } else if (e == 'end') {
      throughObj.queryType = 0
      throughObj.propKind = ''
      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/morePage/wtdb/wtdbMorePage',
    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();
    }
  })
  onTabItemTap((e) => {
    console.log(e, '点击tab');
    // uni.$u.route({
    // 	url: 'pages/login/index',
    // })
  })
</script>

<template>
  <view class="container">
    <!-- 头 固定-->
    <view class="title-content">
      <view class="status_bar">

      </view>
      <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;
  }

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .title-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 20rpx;
    text-align: center;
    background-color: #1763E7;
    z-index: 1;
    border: 1px solid red;

    .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/searchs-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;
    border: 1px solid red;

    .banner-box {
      width: 92%;
      height: 254rpx;
      margin: auto;
      border: 1px solid red;
    }
  }

  .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>