<template>
  <div class="first">
    <div class="ditu">
      <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`"></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">
          <div v-if="props.DataList.expiredDays < 1">未超时</div>
          <div v-else style="color: red">超时 {{ props.DataList.expiredDays }} 天</div>
        </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" :max-height="250">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="问题类型" prop="problemTypeName"> </el-table-column>
      <el-table-column label="检查项" prop="checkItemName">
        <!-- <template #default="scope">
          <dict-tag :options="inspection_items" :value="String(scope.row.checkItem)" />
        </template> -->
      </el-table-column>
      <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/gisMapBox.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 point_project from '@/assets/images/gisMap/in.png';

const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
  pathData: {
    type: Array,
    default: null,
  },
  pathGeometry: {
    type: String,
    default: '',
  },
});
const { proxy } = getCurrentInstance();
const { problem_type, inspection_items } = proxy.useDict('problem_type', 'inspection_items'); //  巡查类型的字典
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) => {
  newfiberMap_risk.map.addSource(layerId, {
    type: 'geojson',
    data: geojson,
  });
  newfiberMap_risk.map.addLayer({
    id: layerId,
    type: 'line',
    source: layerId,
    paint: {
      'line-color': 'rgba(35, 217, 110,1)',
      'line-width': 3,
    },
  });
};
//添加轨迹起止点
const addStartAndEnd = (geojson, layerId, Icon) => {
  newfiberMap_risk.map.loadImage(Icon, (error, image) => {
    if (error) throw error;
    newfiberMap_risk.map.addImage(layerId + '_icon', image);
  });
  newfiberMap_risk.map.addSource(layerId, {
    type: 'geojson',
    data: geojson,
  });
  newfiberMap_risk.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,
    },
  });
};

// 添加项目点位
const addProjectPoint = (map, data, layerId) => {
  newfiberMap_risk.map.loadImage(point_project, (error, image) => {
    if (error) throw error;
    !!!map.getSource(layerId) && map.addImage(layerId, image);
    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
    !!!map.getLayer(layerId) &&
      map.addLayer({
        id: layerId,
        type: 'symbol',
        source: layerId,
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 2,
          'text-anchor': 'bottom',
          'text-offset': [0, 3],
          'text-max-width': 50,
          'icon-image': layerId,
          'icon-size': 0.2,
        },
        paint: {
          'text-color': 'rgba(127, 11, 147, 1)',
          'text-halo-color': 'rgba(255, 255, 255, 1)',
          'text-halo-width': 2,
        },
      });
  });
};

watch(
  () => props.DataList,
  val => {
    if (val) {
      dataListPhone.value = [];
      getList(props.DataList.number);
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.pathGeometry,
  val => {
    if (val) {
      if (newfiberMap_risk.map.getLayer('recordLineGeojson')) {
        newfiberMap_risk.map.removeLayer('recordLineGeojson');
        newfiberMap_risk.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) {
      setTimeout(() => {
        if (newfiberMap_risk.map.getLayer('point_start')) {
          newfiberMap_risk.map.removeLayer('point_start');
          newfiberMap_risk.map.removeLayer('point_end');
          newfiberMap_risk.map.removeSource('point_start');
          newfiberMap_risk.map.removeSource('point_end');
          newfiberMap_risk.map.removeImage('point_start_icon');
          newfiberMap_risk.map.removeImage('point_end_icon');
        }
      }, 1000);
      let drewPoint = turf.featureCollection([turf.point(props.DataList.projectLocation.split(',').map(Number))]);
      console.log('----', drewPoint);
      addProjectPoint(newfiberMap_risk.map, drewPoint, 'point_project'); // 添加项目点位
      setTimeout(() => {
        newfiberMap_risk.map.easeTo({
          center: props.DataList.projectLocation.split(','),
          zoom: 15,
        });
      }, 2000);

      if (!val.length) return;
      console.log('val----', val);
      //起止点
      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);
        newfiberMap_risk.map.setPitch(0);
        newfiberMap_risk.map.easeTo({
          center: start_84,
          zoom: 15,
        });
      }, 2000);
    }
  },
  { deep: true, immediate: true }
);
onMounted(() => {});
</script>

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