<template>
  <div class="first">
    <div class="ditu">
      <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
    </div>
    <!-- 类容 -->
    <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查任务名称</div>
        <div class="detail-value flex flex-align-center">
          {{ props.DataList.taskName }}
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查人员</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.taskUserList[0].userName }}</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务开始时间</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.planStartDatetime }}</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务结束时间</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.planEndDatetime }}</div>
      </div>

      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查位置</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.projectLocationName }}</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查项目</div>
        <div class="detail-value flex flex-align-center">
          {{ props.DataList.projectList[0].projectAbbreviation }}
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查任务描述</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.taskDescribe }}</div>
      </div>
    </div>

    <el-table :data="dataList" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="存在问题" prop="problemType"> </el-table-column>
      <el-table-column label="督办事项" prop="checkItem" />
      <el-table-column label="整改状态" prop="isRectification">
        <template #default="scope">
          <span>
            {{
              scope.row.isRectification == '1'
                ? '无需整改'
                : scope.row.isRectification == '2'
                ? '待整改'
                : scope.row.isRectification == '3'
                ? '整改已完成'
                : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="整改通知单" prop="problemContent" />
      <el-table-column label="整改回复单" prop="createTime" />
      <el-table-column label="整改时限" prop="problemContent" />
      <el-table-column label="整改方式" prop="createTime" />
      <el-table-column label="责任人及电话" prop="problemContent" />
      <el-table-column label="创建时间" prop="createTime" />
    </el-table>
  </div>
</template>

<script setup>
import { patrolProblempage } from '@/api/longoPeration/inspectiontasks';
import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
import CoordTransform from '@/utils/gis/CoorTransform.js';
import point_start from '@/assets/newImgs/point_start.png';
import point_end from '@/assets/newImgs/point_end.png';
import user from '@/assets/newImgs/user_1.png';
const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
  pathData: {
    type: Array,
    default: null,
  },
  pathGeometry: {
    type: String,
    default: '',
  },
});
const { proxy } = getCurrentInstance();
const { problem_type } = proxy.useDict('problem_type'); //  巡查类型的字典
const dataList = ref([]);
const dataListPhone = ref([]);
/** 查询列表 */
const getList = async IdA => {
  let res = await patrolProblempage({ patrolTaskId: IdA });
  dataList.value = res.data;
  res.data.forEach(element => {
    dataListPhone.value = element.sysFileList;
  });
};
//添加轨迹线
const addRecordLine = (geojson, layerId) => {
  newfiberMapbox.map.addSource(layerId, {
    type: 'geojson',
    data: geojson,
  });
  newfiberMapbox.map.addLayer({
    id: layerId,
    type: 'line',
    source: layerId,
    paint: {
      'line-color': 'rgba(35, 217, 110,1)',
      'line-width': 3,
    },
  });
};
//添加轨迹起止点
const addStartAndEnd = (geojson, layerId, Icon) => {
  newfiberMapbox.map.loadImage(Icon, (error, image) => {
    if (error) throw error;
    newfiberMapbox.map.addImage(layerId + '_icon', image);
  });
  newfiberMapbox.map.addSource(layerId, {
    type: 'geojson',
    data: geojson,
  });
  newfiberMapbox.map.addLayer({
    id: layerId,
    type: 'symbol',
    source: layerId,
    layout: {
      'icon-image': layerId + '_icon',
      'icon-size': 0.2,
      'icon-offset': [0, 0],
      'icon-allow-overlap': true,
    },
  });
};
watch(
  () => props.DataList,
  val => {
    if (val) {
      dataListPhone.value = [];
      getList(props.DataList.id);
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.pathGeometry,
  val => {
    if (val) {
      if (newfiberMapbox.map.getLayer('recordLineGeojson')) {
        newfiberMapbox.map.removeLayer('recordLineGeojson');
        newfiberMapbox.map.removeSource('recordLineGeojson');
      }
      if (val === '') return;

      //轨迹线
      let recordLineGeojson = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: Terraformer.WKT.parse(val),
          },
        ],
      };
      console.log('recordLineGeojson--', recordLineGeojson);
      gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
      setTimeout(() => {
        addRecordLine(recordLineGeojson, 'recordLineGeojson');
        gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
      }, 2000);
    }
  }
);
watch(
  () => props.pathData,
  val => {
    if (val) {
      console.log('val-----', val);
      if (newfiberMapbox.map.getLayer('point_start')) {
        newfiberMapbox.map.removeLayer('point_start');
        newfiberMapbox.map.removeLayer('point_end');
        newfiberMapbox.map.removeSource('point_start');
        newfiberMapbox.map.removeSource('point_end');
        newfiberMapbox.map.removeImage('point_start_icon');
        newfiberMapbox.map.removeImage('point_end_icon');
      }
      if (!val.length) return;

      //起止点
      let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
      let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
      let startPointGeojson = {
        type: 'FeatureCollection',
        features: [turf.point(start_84)],
      };
      let endPointGeojson = {
        type: 'FeatureCollection',
        features: [turf.point(end_84)],
      };
      setTimeout(() => {
        addStartAndEnd(startPointGeojson, 'point_start', point_start);
        addStartAndEnd(endPointGeojson, 'point_end', point_end);
        newfiberMapbox.map.setPitch(0);
        newfiberMapbox.map.easeTo({
          center: start_84,
          zoom: 15,
        });
      }, 2000);
    }
  },
  { deep: true, immediate: true }
);
onMounted(() => {});
</script>

<style scoped lang="scss">
.first {
  .ditu {
    width: 100%;
    height: 200px;
  }
}
</style>