<template>
  <div class="patroLogDetails">
    <!-- 地图 -->
    <div class="mapBox" :class="!allData.fullFlag ? 'mapFull' : ''">
      <!-- <LogMap :patrolTrack="allData.path" :caseList="allData.caseList" ref="mapzxcdsfsd" /> -->
      <newFiberMapBox></newFiberMapBox>
      <div class="controlDiv">
        <div class="controlDivList">
          <img src="/src/assets/images/patroLog/play.png" alt="" @click="playLocus" />
          <div class="controlDivFont" @click="playLocus">播放</div>
        </div>
        <div class="controlDivList">
          <img src="/src/assets/images/patroLog/play.png" alt="" @click="suspend" />
          <div class="controlDivFont" @click="suspend">暂停</div>
        </div>
        <div class="controlDivList">
          <img src="/src/assets/images/patroLog/full-src.png" alt="" @click="fullScreen" />
          <div class="controlDivFont" @click="fullScreen">全屏</div>
        </div>
      </div>
    </div>

    <!-- 底部详情 -->
    <div class="publicDetailNF" v-if="allData.fullFlag">
      <div class="InspectionRecord">
        <div class="labelA">项目巡检记录</div>
        <div class="singleDiv">
          <text class="label">巡查记录编号</text>
          <text class="value">{{ allData.detailsInfoTwo.basicInfoId }}</text>
        </div>

        <div class="singleDiv">
          <text class="label">项目名称</text>
          <text class="value">{{ allData.detailsInfoTwo.projectName }}</text>
        </div>
        <div class="singleDiv">
          <text class="label">巡检人 </text>
          <text class="value">{{ allData.detailsInfoTwo.taskUserName }}</text>
        </div>

        <div class="singleDiv">
          <text class="label">巡检日期</text>
          <text class="value">{{ allData.detailsInfoTwo.realStartDatetime }}</text>
        </div>
        <div class="singleDiv">
          <text class="label">任务描述</text>
          <text class="value">{{ allData.detailsInfoTwo.taskDescribe }} </text>
        </div>
        <div class="singleDiv">
          <text class="label">备注</text>
          <text class="value"> {{ allData.detailsInfoTwo.remark }} </text>
        </div>
      </div>

      <div class="Problemrecord" v-for="(item, index) in allData.detailsInfo">
        <div class="labelA">问题记录{{ index++ }}</div>
        <div class="singleDiv">
          <text class="label">问题类型 </text>
          <text class="value"> {{ item.problemType }} </text>
        </div>
        <div class="singleDiv">
          <text class="label">检查项 </text>
          <text class="value"> {{ item.checkItem }} </text>
        </div>
        <div class="singleDiv">
          <text class="label">巡检人 </text>
          <text class="value"> {{ item.userName }} </text>
        </div>
        <div class="singleDiv">
          <text class="label">巡检日期</text>
          <text class="value">{{ item.createTime }}</text>
        </div>
        <div class="singleDiv">
          <text class="label">整改状态</text>
          <text class="value"> {{ item.isRectification }} </text>
        </div>
        <div class="singleDiv">
          <text class="label">问题描述</text>
          <text class="value"> {{ item.problemContent }} </text>
        </div>
        <div class="singleImgDiv">
          <text class="label">现场照片</text>
          <div class="imgDiv">
            <img
              class="img"
              v-for="(item1, index) in item.sysFileList"
              :key="index"
              :src="item1.url"
              @click="clickImg(item1)"
            />
          </div>
          <!-- 照片弹框 -->
          <van-popup v-model:show="allData.show" closeable position="bottom" :style="{ height: '85%' }">
            <img :src="allData.photo" alt="" class="photo" />
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { patrolProblemList, PatrolTaskID } from '@/api/xuncha';
import { showImagePreview } from 'vant';
import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
import WKT from 'terraformer-wkt-parser';
import * as turf from '@turf/turf';
import point_start from '@/assets/images/patroLog/point_start.png';
import point_end from '@/assets/images/patroLog/point_end.png';
import user from '@/assets/images/patroLog/user.png';
const route = useRoute();
const router = useRouter();
const allData = reactive({
  num: 1,
  id: '',
  fullFlag: true,
  detailsInfo: {},
  detailsInfoTwo: {},
  path: [],
  videoSrc: null,
  recordPath: [],
  imgList: [
    // {
    //   url: 'http://42.193.7.161:9000/newfiber-standard/2023/03/14/Screenshot_2023-03-14-17-14-32-53_a2e629f0ea915b4ed11e296a059c9a12_20230314200209A029.jpg',
    // },
  ],
  videoList: [
    // {
    //   name: 'f210e3b80bf1dd5d867c633de815053e.mp4',
    //   url: 'https://server1.wh-nf.cn:6084/mp4/etdzpdx_video01.mp4',
    // },
  ],
  caseList: [],
  patrolSectionId: '',
  geometryBufferData: '',
  show: false,
  showvideo: false,
  photo: '',
  videoPop: '',
  palyPath: null,
  path: [],
  center: '',
  pathData: [],
  planLineCenter: [],
  recordTimer: null,
  stept: 0,
});
// 获取项目巡检记录数据
const getData = async () => {
  let res = await patrolProblemList({ patrolTaskId: route.query.id });
  if (res && res.code == 200) {
    allData.detailsInfo = {
      ...res.data,
    };
    console.log(allData.detailsInfo, ' allData.detailsInfo');
  }
};

// 获取问题记录数据
const getDatatwo = async () => {
  let res = await PatrolTaskID(route.query.id);
  if (res && res.code == 200) {
    allData.detailsInfoTwo = {
      ...res.data,
    };
    console.log('res.data---', res.data);
    let data = res.data;
    if (!data.patrolPath) return;
    allData.recordPath = data.patrolPathLngLat;
    //轨迹线
    let recordLineGeojson = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: WKT.parse(data.patrolPath),
        },
      ],
    };
    console.log('recordLineGeojson--', recordLineGeojson);
    addRecordLine(recordLineGeojson, 'recordLineGeojson');
    //起止点
    let startPointGeojson = {
      type: 'FeatureCollection',
      features: [turf.point([Number(data.patrolPathLngLat[0].lng), Number(data.patrolPathLngLat[0].lat)])],
    };
    let endPointGeojson = {
      type: 'FeatureCollection',
      features: [
        turf.point([
          Number(data.patrolPathLngLat[data.patrolPathLngLat.length - 1].lng),
          Number(data.patrolPathLngLat[data.patrolPathLngLat.length - 1].lat),
        ]),
      ],
    };
    addStartAndEnd(startPointGeojson, 'point_start', point_start);
    addStartAndEnd(endPointGeojson, 'point_end', point_end);
    newfiberMap.map.easeTo({
      center: [Number(data.patrolPathLngLat[0].lng), Number(data.patrolPathLngLat[0].lat)],
      zoom: 15,
    });
  }
};
//添加轨迹线
const addRecordLine = (geojson, layerId) => {
  newfiberMap.map.on('style.load', () => {
    newfiberMap.map.addSource(layerId, {
      type: 'geojson',
      data: geojson,
    });
    newfiberMap.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.map.on('style.load', () => {
    newfiberMap.map.loadImage(Icon, (error, image) => {
      if (error) throw error;
      newfiberMap.map.addImage(layerId + 'icon', image);
    });
    newfiberMap.map.addSource(layerId, {
      type: 'geojson',
      data: geojson,
    });
    newfiberMap.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 clickImg = async (item) => {
  showImagePreview([item.url]);
};
// 全屏
const fullScreen = () => {
  allData.fullFlag = !allData.fullFlag;
  nextTick(() => {
    // olMap.map.resize();
  });
};
//播放
const playLocus = () => {
  if (!allData.recordPath) return;

  allData.recordTimer = setInterval(() => {
    if (allData.stept == allData.recordPath.length) {
      clearInterval(allData.recordTimer);
      return;
    }
    let dynamicPepoleGeojson = {
      type: 'FeatureCollection',
      features: [
        turf.point([Number(allData.recordPath[allData.stept].lng), Number(allData.recordPath[allData.stept].lat)]),
      ],
    };
    if (!newfiberMap.map.getLayer('dynamicPepoleGeojson')) {
      addStartAndEnd(dynamicPepoleGeojson, 'dynamicPepoleGeojson', user);
    } else {
      newfiberMap.map.getSource('dynamicPepoleGeojson').setData(dynamicPepoleGeojson);
    }
    allData.stept += 1;
  }, 100);
};
//暂停
const suspend = () => {
  clearInterval(allData.recordTimer);
};
onMounted(() => {
  getData();
  getDatatwo();
});
</script>

<style lang="less">
.patroLogDetails {
  width: 100%;
  height: 100vh;
  background: #fafafa;
  .mapBox {
    width: 100%;
    height: 683px;
    position: relative;
    border: 1px solid red;
    .controlDiv {
      position: absolute;
      top: 0px;
      right: 45px;
      width: 150px;
      z-index: 111;
      .controlDivList {
        display: inline-block;
        width: 150px;
        height: 70px;
        margin-top: 20px;
        box-shadow: 0px 1px 21px 0px rgba(0, 28, 46, 0.3);
        border-radius: 24px;

        img {
          width: 40px;
          height: 40px;
          margin: 8px;
          float: left;
          margin-top: 15px;
        }

        .controlDivFont {
          float: left;
          height: 48px;
          line-height: 48px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
          margin-left: 8px;
        }
      }
    }
  }

  .publicDetailNF {
    padding: 10px 20px 10px 10px;
    overflow: auto;
    width: 90%;
    height: calc(100% - 823px);
    margin-left: 3%;

    .InspectionRecord {
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
    }
    .Problemrecord {
      margin-top: 20px;
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
      //   height: calc(100% - 220px);
    }
    .labelA {
      padding-top: 20px;
      margin-left: 30px;
      color: red;
      font-size: 32px;
    }
    .singleDiv {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      min-height: 80px;
      padding: 10px 0px;

      .label {
        width: 160px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #121212;
        text-align: center;
      }

      .value {
        flex: 1;
        margin-left: 20px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #7b7b7e;
        text-align: right;
        line-height: 30px;

        .tellDiv {
          margin-left: 20px;
          color: #145bf7;
        }

        .dealproDiv {
          margin: 0 20px;
          color: #409eff;
        }
      }
    }
    .singleImgDiv {
      width: 100%;
      min-height: 84px;
      height: auto;
      display: flex;

      .label {
        display: inline-block;
        width: 140px;
        height: 80px;
        line-height: 80px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #121212;
        text-align: center;
      }

      .imgDiv {
        display: flex;
        height: auto;
        width: calc(100% - 140px);
        text-align: right;
        overflow: auto;

        .img {
          margin-right: 15px;
          height: 105px;
          width: 145px;
          border-radius: 5px;
          margin-top: 20px;
          background: red;
          &:last-child {
            margin-right: 100px;
          }
        }
      }

      .videoDiv {
        .value {
          line-height: 50px;
          color: #409eff;
        }
      }
    }
  }
  .mapFull {
    width: 100%;
    height: 100%;
  }
  .photo {
    margin-top: 80px;
    margin-left: 30px;
    width: 700px;
    height: 1200px;
  }
}
</style>