<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.realStartDatetime }}</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.realEndDatetime }}</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务状态</div>
        <div class="detail-value flex flex-align-center">
          <span>
            {{
              props.DataList.status == 'to_start'
                ? '未开始'
                : props.DataList.status == 'proceed'
                ? '进行中'
                : props.DataList.status == 'done'
                ? '已完成'
                : props.DataList.status == 'expired'
                ? '超时'
                : ''
            }}
          </span>
        </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.expiredDays }}</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.issuedDatetime }}</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.remark }}</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>
    <!-- 巡查照片 -->
    <!-- <div>
      <p style="color: aliceblue">巡查照片</p>
      <div v-if="dataListPhone.length">
        <el-image style="width: 150px; height: 60px; margin: 5px" v-for="i in dataListPhone" :src="i.url" :preview-src-list="[i.url]">
        </el-image>
      </div>
      <el-empty v-else description="暂无图片" :image-size="30" />
    </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">
        <!-- <template #default="scope">
          <dict-tag :options="problem_type" :value="String(scope.row.problemType)" />
        </template> -->
      </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' ? '需要整改' : '' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="问题描述" prop="problemContent" />
      <el-table-column label="上报时间" prop="createTime" />
      <el-table-column label="巡查照片" prop="sysFileList">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px; margin: 5px"
            v-for="i in scope.row.sysFileList"
            :src="i.url"
            :preview-src-list="[i.url]"
          >
          </el-image>
          <span v-if="scope.row.sysFileList.length == ''">暂无照片</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { patrolProblemlist } 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 queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

/** 查询列表 */
const getList = async IdA => {
  let res = await patrolProblemlist({ patrolTaskNo: 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.number);
    }
  },
  { 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>