<template>
  <div class="patroLogDetails">
    <!-- 地图 -->
    <div class="mapBox" :class="!allData.fullFlag ? 'mapFull' : ''">
      <!-- <LogMap :patrolTrack="allData.path" :caseList="allData.caseList" ref="mapzxcdsfsd" /> -->
      <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';
const route = useRoute();
const router = useRouter();
const allData = reactive({
  num: 1,
  id: '',
  fullFlag: true,
  detailsInfo: {},
  detailsInfoTwo: {},
  path: [],
  videoSrc: null,
  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: [],
});
// 获取项目巡检记录数据
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,
    };
  }
};
//照片弹框
const clickImg = async (item) => {
  showImagePreview([item.url]);
};

// 全屏
const fullScreen = () => {
  allData.fullFlag = !allData.fullFlag;
  nextTick(() => {
    // olMap.map.resize();
  });
};

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;
      .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>