<template>
  <!-- 地图 -->
  <div class="position-r" id="map">
    <newFiberMapBox :initJson="`/static/libs/mapbox/style/TemporaryProject.json`"></newFiberMapBox>
  </div>

  <!-- 项目详情弹窗 -->
  <van-popup v-model:show="showBottom" position="center" :style="{ height: '60%' }" round>
    <van-cell-group inset>
      <van-cell title="项目名称:" :label="ProjectData.projectName" />
      <van-cell title="项目类型:" :label="formatter(ProjectData.projectTypeCode)" />
      <van-cell title="项目建设情况:" :label="formatter2(ProjectData.buildStatus)" />
      <van-cell title="项目简介:" :label="ProjectData.projectOverview" />
    </van-cell-group>

    <div class="Btn Btn1" @click="patrolFilling(false, ProjectData)">上报问题</div>
  </van-popup>

  <!-- 上报弹窗 -->

  <van-popup v-model:show="showForm" position="bottom" closeable :style="{ width: '100%', height: '90%' }">
    <div class="TaskTItle" v-if="showForm">问题填报</div>

    <TaskForm
      class="DakaPropID"
      v-if="showForm"
      @closeFormTransition="closeFormTransition"
      :projectName="AllData.projectName"
      :projectCode="AllData.projectCode"
    />
  </van-popup>
</template>

<script setup name="TemporaryProject">
import { getProjects } from '@/api/publicApi.js';
import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
import * as turf from '@turf/turf';
import TaskForm from './TaskForm.vue'; // 表单组件
import bus from '@/utils/utils';
const timer = ref(null);
const showBottom = ref(false);
const ProjectData = ref({});
const showForm = ref(false); //表单弹窗显隐状态
const AllData = reactive({ projectName: '', projectCode: '', numberNum: '' });
const legendList = ref([
  {
    name: '海绵型建设与社区',
    layername: 'HMJZYSQ',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型道路广场',
    layername: 'HMXDLGC',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型公园与绿地',
    layername: 'HMXGYLD',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型水系',
    layername: 'HMXSX',
    data: [],
    isCheck: true,
  },
  {
    name: '管网排查与修复',
    layername: 'GWPCYXF',
    data: [],
    isCheck: true,
  },
  {
    name: '雨水管网及泵站',
    layername: 'GWJBZ',
    data: [],
    isCheck: true,
  },
  {
    name: 'GIS平台建设与监测设施',
    layername: 'GIS',
    data: [],
    isCheck: true,
  },
]);
const jiansheleixing = ref([
  { name: 'not_approved', font: '尚未立项' },
  { name: 'XMQQSWWCSJJD', font: '在建' },
  { name: 'XMQQSWWCZB', font: '在建' },
  { name: 'not_yet_under_construction', font: '在建' },
  { name: 'opened', font: '在建' },
  { name: 'completed', font: '已竣工' },
  { name: 'Suspended', font: '已停工' },
]);
const getProjectss = async () => {
  let { data } = await getProjects();
  let features = data;
  // console.log(features, 'features');
  let projectionFeatures = [];
  features.forEach((element) => {
    if (!element.projectLocation) return;
    let feature = turf.point(element.projectLocation.split(','), element);
    projectionFeatures.push(feature);
    legendList.value.forEach((i) => {
      if (i.layername == element.projectTypeCode) {
        i.data.push(feature);
      }
    });
  });
  legendList.value.forEach((i) => {
    i.data = turf.featureCollection(i.data);
  });
  // console.log('legendList---', legendList.value);
  bus.emit('setLegendData', legendList.value);
  timer.value = setInterval(() => {
    if (!!!newfiberMap.map.getLayer('point')) {
      return;
    } else {
      legendList.value.forEach((i) => {
        bus.emit('setLayerVisible', i);
      });
      clearInterval(timer.value);
    }
  }, 1000);
};

const formatter = (item) => {
  let str = '';
  legendList.value.forEach((element) => {
    if (element.name == item) {
      str = element.font;
    }
  });
  return str;
};

const formatter2 = (item) => {
  let str = '';
  jiansheleixing.value.forEach((element) => {
    if (element.name == item) {
      str = element.font;
    }
  });
  return str;
};

/**
 * 问题填报
 */
const patrolFilling = (val, item) => {
  showForm.value = !showForm.value;
  console.log(item, '1');
  AllData.projectName = item.projectName;
  AllData.projectCode = item.projectNo;
};

// 关闭
const closeFormTransition = (msg) => {
  showForm.value = false;
};

onMounted(() => {
  getProjectss();
  setTimeout(() => {
    newfiberMap.map.on('click', 'point', (e) => {
      const feature = (
        newfiberMap.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)[0];
      showBottom.value = true;
      console.log('feature---', feature.properties);
      ProjectData.value = feature.properties;
    });
  }, 2000);
});
</script>

<style lang="less" scoped>
.position-r {
  position: relative;
  width: 100%;
  height: 100%;
  background: #c6c6c6;
}

.Btn {
  width: 190px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 9px 9px 9px 9px;
  opacity: 1;
  margin: 10px auto;
}

.Btn1 {
  background: #409eff;
  font-size: 32px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.TaskTItle {
  width: 100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  background: #fdfdfd;
  position: relative;
  font-size: 32px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;

  .ClearClass {
    position: absolute;
    right: 10px;
    top: 0;
  }
}
</style>