<template>
  <!-- 长效考核-项目管控规划落实 -->
  <div class="planControlCX">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/planningcontrolCX.json`" @map-click="clickGisMap"></MapBox>

    <div class="longTermTitle">
      统计年度
      <el-select v-model="currentYear" style="width: 100px" @change="getGhgk">
        <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item" />
      </el-select>
    </div>
    <!-- <img src="@/assets/images/longTerm/ghgk.png" class="imgTL" /> -->
    <div class="tuli">
      <div style="margin: 10px; font-size: 18px">图例</div>
      <div v-for="i in tuliList" class="tuli_img">
        <img :src="i.icon" alt="" />
        <div>{{ i.label }}</div>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
    <div :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
      <div class="selectTitle">
        <div class="name" style="font-size: 17px">
          {{ currentYear }}年度完成{{
            activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
          }}落实海绵管控指标项目
        </div>
      </div>
      <div class="planCont" v-loading="loadingGH">
        <div :class="['flex', activeIndex == 1 ? 'activePlan' : '']" @click="changeProject(1)">
          <p class="title">落实海绵项目指标项目数</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="(ghgkObj.implementIndicatorsProjectNum / ghgkObj.permitsProjectNum) * 100"
            status="success"
          >
            <span class="name">{{ ghgkObj.implementIndicatorsProjectNum }}</span>
          </el-progress>
          <p class="title">完成规划审批项目数 {{ ghgkObj.permitsProjectNum }}个</p>
        </div>
        <div :class="['flex', activeIndex == 2 ? 'activePlan' : '']" @click="changeProject(2)">
          <p class="title">落实设计审查要求项目数</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="(ghgkObj.designStandardNum / ghgkObj.completionAcceptanceNum) * 100"
            status="success"
          >
            <span class="name">{{ ghgkObj.designStandardNum }}</span>
          </el-progress>
          <p class="title">完成设计审查项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
        </div>
        <div :class="['flex', activeIndex == 3 ? 'activePlan' : '']" @click="changeProject(3)">
          <p class="title">通过竣工验收项目数</p>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="(ghgkObj.inGoodConditionNum / ghgkObj.completionAcceptanceNum) * 100"
            status="success"
          >
            <span class="name">{{ ghgkObj.inGoodConditionNum }}</span>
          </el-progress>
          <p class="title">申报竣工验收项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
        </div>
      </div>

      <div class="selectTitle">
        <div class="name">
          {{ currentYear }}年度{{
            activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
          }}项目信息
        </div>
      </div>
      <el-table ref="tableArea" :data="tableData" height="550" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
        <el-table-column label="序号" type="index" width="55" />
        <el-table-column label="项目名称" prop="projectName" />
        <el-table-column label="建设单位" prop="chargeDepartment" />
        <el-table-column label="申报年份" prop="year" width="80" />
        <el-table-column label="指标达成情况" prop="achievementTarget" width="160" />
      </el-table>
    </div>
    <!-- 详情 -->
    <el-dialog v-model="dialogShow" :title="dialogTitle" width="900px" append-to-body>
      <Operate1 v-if="activeIndex == 1" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate1>
      <Operate2 v-if="activeIndex == 2" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate2>
      <Operate3 v-if="activeIndex == 3" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate3>
    </el-dialog>
  </div>
</template>
<script setup>
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import bus from '@/bus';
import Operate1 from '@/views/project/processControl/planPermission/operate.vue'; //规划许可详情
import Operate2 from '@/views/project/processControl/constructionPermits/operate.vue'; //施工许可详情
import Operate3 from '@/views/project/processControl/completionAcceptance/operate.vue'; //竣工验收详情
import { projectTypeList } from '@/api/project/projectInformationNew';
import { projectManageImplement } from '@/api/longTerm/index.js';

const { proxy } = getCurrentInstance();
const loadingGH = ref(true);
const ghgkObj = ref({}); //规划管控落实情况
const currentYear = ref();
const yearList = ref([]);
const ifExpand = ref(true);
// const tableData = ref([
//   { name: '孝感市疾病预防控制中心实验楼项目', year: '2024', val: 45, id: 1 },
//   { name: '市妇幼保健院东院城区', year: '2024', val: 35, id: 2 },
// ]);
const tableData = ref([]);
const tableLoading = ref(false);
const tableArea = ref(null);
const activeIndex = ref(1);
const dialogShow = ref(false);
const dialogTitle = ref('');
const curRow = ref({ id: '' });
const opts = ref({ type: 'views' });
const projectTypes = ref([]);
const timer = ref(null);
let tuliList = ref([
  { label: '未落实海绵指标项目', id: 0, icon: '/images/1.1.jpg' },
  { label: '落实海绵指标项目', id: 1, icon: '/images/1.2.jpg' },
]);
// 获取项目类型
const getProjectTypeList = async () => {
  const res = await projectTypeList({ status: '0' });
  if (res?.code !== 200) return;
  projectTypes.value = res?.data || [];
};

// 年份设置，从2021开始到当前年份
function setYear() {
  yearList.value = [];
  let year = new Date().getFullYear();
  currentYear.value = year;
  for (let i = 2021; i <= year; i++) {
    yearList.value.push(i);
  }
}
// 获取规划管控制度落实情况
function getGhgk() {
  loadingGH.value = true;
  projectManageImplement({ year: currentYear.value }).then(res => {
    ghgkObj.value = res.data;
    console.log(ghgkObj.value, '  ghgkObj.value');
    tableData.value = ghgkObj.value.implementIndicatorsProjectList;
    loadingGH.value = false;
    changeProject(1);
  });
}

/**
 * 规划管控落实制度点击
 * @param {*}val 1 规划许可，2 施工许可，3 竣工验收
 */
function changeProject(val) {
  activeIndex.value = val;
  if (val == 1) {
    tableData.value = ghgkObj.value.implementIndicatorsProjectList;
    dialogTitle.value = '项目落实规划管控指标详情';
    // gis地图渲染
    ghgkObj.value.implementIndicatorsProjectList &&
      ghgkObj.value.implementIndicatorsProjectList.map(item => {
        item.type = item.implementIndicators == 1 ? 'success_zishui' : 'error_zishui';
      });
    intiMapData(ghgkObj.value.implementIndicatorsProjectList);
  } else if (val == 2) {
    tableData.value = ghgkObj.value.designStandardList;
    dialogTitle.value = '项目落实设计审查要求详情';
    // gis地图渲染
    ghgkObj.value.designStandardList.map(item => {
      item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
    });
    intiMapData(ghgkObj.value.designStandardList);
  } else {
    tableData.value = ghgkObj.value.inGoodConditionList;
    dialogTitle.value = '项目竣工验收申请详情';
    // gis地图渲染
    ghgkObj.value.inGoodConditionList.map(item => {
      item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
    });
    intiMapData(ghgkObj.value.inGoodConditionList);
  }
}

// 表格项目点击在地图定位
function checkProject(row) {
  console.log(row);
}

// intiMapData(datas);
function intiMapData(data) {
  let keys = ['error_zishui', 'success_zishui'];
  newfiberMapbox.popupService.popups.forEach((popup, index) => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  if (newfiberMapbox.map.getLayer('projectPoint')) {
    newfiberMapbox.map.removeLayer('projectPoint');
    newfiberMapbox.map.removeLayer('projectPointlabel');
    newfiberMapbox.map.removeSource('projectPoint');
  }
  //keys.forEach(key => {
  let geojson1 = turf.featureCollection(
    data.map(item =>
      turf.point(item.projectLocation.split(',').map(Number), {
        ...item,
        name: `${item.projectName}\n项目编号  ${item.projectNo}`,
        color: item.implementIndicators == 1 ? '#d9001b' : '#70b603',
      })
    )
  );
  addWaterloggingLayer(geojson1, 'projectPoint');
}
//地图渲染点位
const addWaterloggingLayer = (geojson, layerName) => {
  !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  !!!newfiberMapbox.map.getLayer(layerName) &&
    newfiberMapbox.map.addLayer({
      id: layerName,
      type: 'circle',
      source: layerName,
      paint: {
        'circle-color': ['get', 'color'],
        'circle-radius': 7,
      },
    });
  !newfiberMapbox.map.getLayer(layerName + 'label') &&
    newfiberMapbox.map.addLayer({
      id: layerName + 'label',
      type: 'symbol',
      source: layerName,
      layout: {
        'text-field': ['get', 'projectName'],
        'text-font': ['KlokanTech Noto Sans Regular'],
        'text-size': 16,
        'text-offset': [0, -2],
      },
      paint: {
        'text-color': '#d1dbe5',
      },
    });
};

// // 地图点击事件
// function clickGisMap(lngLat, params) {
//   console.log(lngLat, params);
//   if (params.id) curRow.value = params;
//   dialogShow.value = true;
// }

onMounted(() => {
  setYear(); //设置年份
  getGhgk(); //获取规划管控数据
  getProjectTypeList(); // 获取项目类型
  setTimeout(() => {
    newfiberMapbox.map.on('click', e => {
      let clickfeature = newfiberMapbox.map
        .queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ])
        .filter(i => i.layer.id == 'projectPoint');
      console.log('clickfeature', '点击事件', clickfeature);
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('projectPoint') && newfiberMapbox.map.removeLayer('projectPoint');
  !!newfiberMapbox.map.getLayer('projectPointlabel') && newfiberMapbox.map.removeLayer('projectPointlabel');
  !!newfiberMapbox.map.getSource('projectPoint') && newfiberMapbox.map.removeSource('projectPoint');
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.planControlCX {
  width: 100%;
  height: 100%;
  position: relative;
  .imgTL {
    position: absolute;
    z-index: 99;
    left: 30px;
    bottom: 20px;
  }
  .preContentRight {
    width: 500px;
    height: calc(100vh - 100px);
    border: 1px solid #1d8db4;
    background: $mainBg;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 90;
    padding: 15px;
    overflow: auto;
    .chartHeight {
      width: 100%;
      height: 260px;
    }
    .el-table__body tr {
      cursor: pointer;
    }
    .planCont {
      margin: 20px auto;
      .flex {
        margin-bottom: 20px;
      }
    }
  }
  .tuli {
    left: 20px;
    bottom: 30px;
    padding: 10px;
    z-index: 111;
    position: absolute;
    background: $mainColor1;
    // display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    color: #fff;
    .tuli_img {
      display: flex;
      width: 180px;
      align-items: center;
      margin-top: 8px;
      img {
        margin-right: 10px;
        width: 25px;
      }
    }
  }
}
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0);
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
</style>