<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" round closeable class="detailPup">
    <div class="projectDetail">
      <van-cell-group inset>
        <van-cell title="项目名称:" :label="ProjectData.projectName" />
        <van-cell title="项目类型:" :label="ProjectData.projectTypeName" />
        <van-cell title="项目建设情况:" :label="formatter2(ProjectData.buildStatus)" />
        <van-cell title="项目简介:" :label="ProjectData.projectOverview" />
        <div class="title">问题记录</div>
        <div v-if="problemList.length > 0">
          <div class="part" v-for="item in problemList" :key="item.id" @click="checkProblem(item)">
            <div class="time">{{ item.createTime }}</div>
            <div class="user">{{ item.userName }}</div>
          </div>
        </div>
        <van-empty description="暂无上报问题记录" v-if="problemList.length == 0" />
      </van-cell-group>
    </div>
    <div class="btnReport" @click="patrolFilling(false, ProjectData)">上报问题</div>
  </van-popup>

  <!-- 上报弹窗 -->
  <van-popup v-model:show="showForm" position="top" :style="{ width: '100%' }">
    <div class="TaskTItle" v-if="showForm">问题填报</div>

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

  <!-- 项目的问题详情 -->
  <van-popup v-model:show="showProblem" position="center" closeable round :style="{ width: '100%' }">
    <van-cell-group inset>
      <van-cell
        title="巡查类型:"
        :label="problemDetail.uploadType == '1' ? '计划巡查' : problemDetail.uploadType == '2' ? '临时巡查' : ''"
      />
      <van-cell
        title="整改状态:"
        :label="
          problemDetail.isRectification == '1' ? '无需整改' : problemDetail.isRectification == '2' ? '需要整改' : ''
        "
      />
      <van-cell title="检查项:" :label="jcxList.filter((item) => item.value == problemDetail.checkItem)[0].label" />
      <van-cell title="问题描述:" :label="problemDetail.problemContent" />
      <div style="margin: 15px 18px; font-size: 15px">问题图片</div>
      <div class="imageP" v-if="problemDetail.sysFileList.length > 0">
        <van-image
          :src="item.url"
          v-for="item in problemDetail.sysFileList"
          :key="item.id"
          @click="clickImg(problemDetail.sysFileList)"
        />
      </div>
    </van-cell-group>
  </van-popup>
</template>

<script setup name="TemporaryProject">
import { getProjects, patrolProblemList, getDicts } from '@/api/publicApi.js';
import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
import * as turf from '@turf/turf';
import TaskForm from '@/views/components/TaskForm.vue'; // 表单组件
import bus from '@/utils/utils';
import { useStore } from '@/pinia/store.js';
import { showImagePreview } from 'vant';
const pinias = useStore();
const timer = ref(null);
const showBottom = ref(false);
const problemList = ref([]); //问题记录列表
const showProblem = ref(false);
const problemDetail = ref({});
const ProjectData = ref({});
const jcxList = ref([]);
const showForm = ref(false); //表单弹窗显隐状态
const AllData = reactive({ projectName: '', projectCode: '', numberNum: '', uploadType: '2' });
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 () => {
  pinias.showLoading();
  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);
  pinias.hideLoading();
  timer.value = setInterval(() => {
    if (!!!newfiberMap.map.getLayer('point')) {
      return;
    } else {
      legendList.value.forEach((i) => {
        bus.emit('setLayerVisible', i);
      });
      clearInterval(timer.value);
    }
  }, 1000);
};
// 建设类型匹配
const formatter2 = (item) => {
  let str = '';
  jiansheleixing.value.forEach((element) => {
    if (element.name == item) {
      str = element.font;
    }
  });
  return str;
};

// 获取项目的问题记录
async function getProjectDetail() {
  let res = await patrolProblemList({ projectNo: ProjectData.value.projectNo });
  problemList.value = res.data || [];
}

// 查看项目详情
function checkProblem(item) {
  problemDetail.value = item;
  showProblem.value = true;
}

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

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

// 获取项目检查项字典
function getJCX() {
  jcxList.value = [];
  getDicts('inspection_items').then((resp) => {
    jcxList.value = resp.data.map((p) => ({
      label: p.dictLabel,
      value: p.dictValue,
    }));
  });
}
// 点击预览大图//照片弹框
function clickImg(url) {
  let params = [];
  url.forEach((item) => {
    params.push(item.url);
  });
  showImagePreview(params);
}

onMounted(() => {
  getJCX();
  let initeTimer = setInterval(() => {
    if (!newfiberMap) return;
    getProjectss();
    clearInterval(initeTimer);
  }, 1000);
  // 加载项目数据
  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;
      getProjectDetail(); //获取项目的问题列表
    });
  }, 2000);
});
onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<style lang="less" scoped>
.position-r {
  position: relative;
  width: 100%;
  height: 100%;
  background: #c6c6c6;
}
.imageP {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-left: 35px;
  .van-image {
    width: 30%;
    margin-right: 10px;
  }
}
.detailPup {
  .projectDetail {
    max-height: 60vh;
    overflow: auto;
    .title {
      margin: 15px 35px;
      font-size: 28px;
    }
    .part {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 35px;
      color: #157fff;
      border-bottom: 1px solid #f7f8fa;
      .user {
        flex: 1;
        text-align: right;
      }
      .time {
        width: 60%;
      }
    }
  }
  .btnReport {
    width: 190px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 9px 9px 9px 9px;
    margin: 20px auto;
    background: #409eff;
    font-size: 28px;
    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>