<template>
  <div class="inspectionRiver">
    <!-- 地图组件 -->
    <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0">地图</div>
    <!-- 底部按钮 -->
    <div class="BottomBtn">
      <div class="Btn Btn1" @click="patrolFilling(false)">问题填报</div>
      <div class="Btn Btn3" @click="EndPatrolClick">结束巡查</div>
    </div>

    <!-- 巡查填报表单弹窗 -->
    <van-popup v-model:show="AllData.showForm" position="bottom" closeable :style="{ width: '100%', height: '90%' }">
      <div class="TaskTItle" v-if="AllData.showForm">问题填报</div>
      <TaskForm
        class="DakaPropID"
        v-if="AllData.showForm"
        @closeFormTransition="closeFormTransition"
        :patrolLogId="AllData.patrolLogId"
        :MarkForData="AllData.MarkForData"
        :isDisable="AllData.isDisable"
      />
    </van-popup>
    <!-- 结束巡查 -->
    <van-popup v-model:show="AllData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '30%' }">
      <div class="QxBox">
        <div class="Titlediv">确认结束巡查吗？</div>
        <!-- <div class="Contentdiv"></div> -->
        <div class="QxBoxBtn">
          <van-button round @click="TaskCancelPatrol"> 结束巡查 </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, watch, onMounted, onBeforeUnmount } from 'vue';
import { timestampToTime, checkUserSystem, getCurrentPositon } from '@/utils/common.js';
import { patrolTaskFinishPatrol, PatrolTaskID } from '@/api/xuncha';
import CoordTransform from '@/utils/gis/CoorTransform.js';
import WKT from 'terraformer-wkt-parser';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from '@/pinia/store.js';
import TaskForm from './TaskForm'; // 表单组件
const router = useRouter();
const route = useRoute();
const pinias = useStore();

const props = defineProps({
  patrolLogId: String,
  MarkForData: Object,
});
const { proxy } = getCurrentInstance();
const AllData = reactive({
  taskID: '', //当前巡检任务ID
  longitudeNow: '',
  latitudeNow: '',
  IntervalKry: '', //定时器ID--获取经纬度信息
  TimerArray: [], //记录定时器数据
  num: 0,
  videoSrc: '',
  status: false,
  showForm: false, //表单弹窗显隐状态
  modeClass: ['slide-bottom'],
  countDown: 3, //倒计时时间长度
  timeOutID: null,
  NoticeFont: null, //顶部标题内容
  ScopeValue: false, //当前是否在可以打卡范围内
  patrolSectionId: null, //当前的巡查段编号
  patrolLogId: null, //当前的日志编号
  DaKaPopupShow: false, //打卡弹窗组件的加载状态
  EndPatrolShow: false, //结束巡查组件的加载状态
  socketOpen: false, //判断socket 的在线情况
  socketMsgQueue: [],
  PostionValue: {
    userName: null,
    lonLat: null,
    refType: null,
    refid: null,
    patrolDatetime: null,
  },
  option: {
    type: null,
    num: null,
    id: null,
    sectionType: null,
  }, //父页面传过来的按钮信息
  patrolPathLngLat: [], //当前巡检详情中已经巡检的路径
  MarkForData: {}, //点击图标获取到的数据
  isDisable: false, //弹窗内容是否为只读
  isOne: true, //第一次进入页面
  websock: null,
  showCancel: false, //取消的弹窗组件
  DaKaPopup: false, // 打卡的弹窗组件
  oldLonLat: {
    lon: null,
    lat: null,
  }, //储存的旧数据
});

/**
 * 问题填报
 */
const patrolFilling = (val) => {
  // console.log(val, 'valvalval');
  AllData.isDisable = val;
  AllData.showForm = !AllData.showForm;
};

// 结束巡查点击弹框
const EndPatrolClick = () => {
  AllData.showCancel = true;
};

// 关闭
const closeFormTransition = (msg) => {
  AllData.showForm = false;
  // console.log(`案件弹窗关闭事件`, msg);
  if (msg == 'AnJianUpdatas') {
    // 通知地图刷新
    // TaskMapRef.value.MaskUpdata(2);
  }
};

// 结束巡查关闭
const TaskCancelPatrol = () => {
  getCurrentPositon((lng, lat, address) => {
    // console.log('获取安卓定位参数--', address);
    // 获取当前巡检任务的所有轨迹信息
    // patrolTaskId(route.query.id).then((res) => {
    //   if (res && res.code == 200) {
    //     let lengthKm = 0;
    //     if (!!res.data.patrolPath) {
    //       lengthKm = turf.length(WKT.parse(res.data.patrolPath));
    //     } else {
    //       lengthKm = 0;
    //     }
    let param = {
      endPlace: address,
      // patrolTaskId: props.taskID,
      patrolLogId: route.query.id,
      patrolTaskId: route.query.id,
      // patrolName: AllData.formData.NoticeFont,
      // fileSaveRequestList: AllData.PicListData.concat(AllData.PicListData2),
      // logContent: AllData.formData.caseContent,
      // patrolLength: Number(lengthKm).toFixed(1),
    };
    patrolTaskFinishPatrol(param).then((res) => {
      if (res?.code == 200) {
        proxy.showSuccessToast('结束成功');
        router.push('/TaskInspection');
        stopAndIosLocation(); // 原生安卓、ios结束websocket推送
      }
    });
    //   }
    // });
  });
};

// 原生安卓、ios结束websocket推送
function stopAndIosLocation() {
  let systems = checkUserSystem();
  if (systems == 'Android') {
    console.log('安卓结束websocket---');
    window.android.disconnect(String(route.query.id));
  } else if (systems == 'IOS') {
    console.log('ios结束websocket---');
    window.webkit.messageHandlers.stopLocation.postMessage({ data: { refid: route.query.id } });
  }
}
// 开始巡检--阶段性获取经纬度变化信息
const startGetPosition = () => {
  AllData.IntervalKry = setInterval(() => {
    getPostionNow();
  }, 3000);
};
/**
 * 获取当前定位
 */
const getPostionNow = () => {
  AllData.PostionValue = {
    patrolDatetime: null,
    lonLat: null,
    refType: null,
    refid: null,
    userName: null,
  };
  getCurrentPositon((lng, lat, address) => {
    // console.log('获取安卓定位参数--', address);
    let timer = timestampToTime(Date.now());
    let NewLonLat = CoordTransform.gcj02towgs84(Number(lng), Number(lat));
    AllData.PostionValue = {
      patrolDatetime: timer,
      lonLat: NewLonLat[0] + ',' + NewLonLat[1],
      refType: 'patrolLog',
      refid: AllData.patrolLogId,
      userName: pinias.userName,
    };
    // console.log(AllData.PostionValue, 'AllData.PostionValue');
  });
};
/**
 * 获取当前巡检任务详情
 */
const getInspectionInfo = (id) => {
  PatrolTaskID(id).then((res) => {
    if (res && res.code == 200) {
      AllData.gujiData = res.data.patrolPathLngLat;
      // 保存当前巡检ID
      AllData.taskID = res.data.id;
      // 保存当前巡查段编号
      // AllData.patrolSectionId = res.data.patrolSectionId;
      // console.log(AllData.patrolSectionId, '2 ');
      // 保存日志编号
      AllData.patrolLogId = res.data.patrolLogId;
      // 保存巡检记录
      AllData.patrolPathLngLat = res.data.patrolPathLngLat;
      // AllData.patrolLogId = '1630380590036803588'
      startGetPosition(); //开始获取原生定位
      sendSocketMessage(); //安卓、ios原生发送websocket
    }
  });
};

// 通过socket 发送数据
const sendSocketMessage = (msg) => {
  let systems = checkUserSystem();
  if (systems == 'Android') {
    console.log('安卓发送websocket---');
    let timer = timestampToTime(Date.now());
    let initObj = {
      patrolDatetime: timer,
      lonLat: '',
      refType: 'patrolLog',
      refid: AllData.patrolLogId,
      userName: pinias.userName,
    };
    console.log('安卓发送websocket111---', initObj);
    //给Android发送参数，通知给后端发送websocket
    window.android.initwebSocket(JSON.stringify(initObj));
  } else if (systems == 'IOS') {
    console.log('IOS开始发送websocket---');
    let timer = timestampToTime(Date.now());
    let initObj = {
      callId: 'sendCurrentLocationIOS',
      data: {
        patrolDatetime: timer,
        lonLat: '',
        refType: 'patrolLog',
        refid: AllData.patrolLogId,
        userName: pinias.userName,
      },
    };
    //给ios发送参数，通知给后端发送websocket
    window.webkit.messageHandlers.sendLocation.postMessage(initObj);
  }
};

watch(
  route,
  (val) => {
    if (!!!route.query.id) return;
    setTimeout(() => {
      //option为object类型，会序列化上个页面传递的参数
      console.log('传递的参数222--', route.query.id); //打印出上个页面传递的参数。
      //获取当前巡检任务详情
      getInspectionInfo(route.query.id);
    });
  },
  { immediate: true }
);
</script>

<style lang="less">
.inspectionRiver {
  width: 100%;
  height: calc(100vh - var(--van-nav-bar-height));
  position: relative;
  // background: red;

  // 底部三个按钮
  .BottomBtn {
    width: calc(100% - 52px);
    height: 140px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    position: absolute;
    bottom: 100px;
    left: 26px;
    box-sizing: border-box;
    display: flex;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .Btn {
      width: 190px;
      height: 86px;
      line-height: 86px;
      text-align: center;
      border-radius: 9px 9px 9px 9px;
      opacity: 1;
    }

    .Btn1 {
      background: #409eff;
      font-size: 32px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .Btn2 {
      border: 2px solid #409eff;
      background: #eef6ff;
      font-size: 32px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #409eff;
    }

    .Btn3 {
      background: #fff3f3;
      border: 2px solid #ea0000;
      font-size: 32px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ea0000;
    }
  }
  // 确认取消弹窗
  .QxBox {
    width: 100%;
    height: 350px;
    background-color: #ffffff;

    .Titlediv {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 32px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      box-sizing: border-box;
      padding: 0 20px;
      position: relative;
      border-bottom: 1px solid #ececec;
    }
    .QxBoxBtn {
      width: 100%;
      height: calc(350px - 80px);
      // background: red;box-sizing: border-box;
      display: flex;
      align-content: space-around;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
  }
  .TaskTItle {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background: #fdfdfd;
    position: relative;
    font-size: 32px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;

    .ClearClass {
      position: absolute;
      right: 10px;
      top: 0;
    }
  }
}
</style>