<script lang="ts" setup name="AlarmList">
import type { Ref } from 'vue'
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import {changePcd, dataRecord, getRobotList, robotWV, slam, trackRecord, updateSlam} from "@/api/home/robot/robot";
import useSettingsStore from "@/store/modules/settings";
import useWebsocketStore from "@/store/modules/websocket";
import ThreeMap from '@/components/ThreeMap/index.vue' // 竖轴

const $router = useRouter()
const settingsStore = useSettingsStore()
const percentage = ref(0)
const taskName = ref('')
const websocket = useWebsocketStore()
const alarmThreshold = ref(0)
const threeMap = ref() // 组件
const pcdUrl = ref('')
const gridHeight = ref(200)
const gridWidth = ref(200)
const resolution = ref(4)
const isMap = ref(false)

onMounted(() => {
  setTimeout(() => {
    getRobotList({}).then((response) => {
      if(response.code === 200) {
        const robot = response.data.filter((item: any) => item.id === settingsStore.robot.id)[0]
        pcdUrl.value = window.localStorage.getItem('baseurl-robot') + '/static/finalCloud_' + robot.id + '.pcd'
        gridHeight.value = Number(robot.gridHeight)
        gridWidth.value = Number(robot.gridWidth)
        resolution.value = Number(robot.resolution)
        alarmThreshold.value = Number(robot.alarmThreshold)
        console.log(gridHeight.value, gridWidth.value)
        isMap.value = true
        setTimeout(() => {
          threeMap.value.initMap()
        }, 100)
      }
    })
  }, 200)
})

// todo: 建图进度
function setThreshold() {
  robotWV({
    id: settingsStore.robot.id,
    alarmThreshold: alarmThreshold.value
  }).then((res) => {
    if(res.code === 200) {
      ElMessage.success(' 本底参数设置成功')
    }
  })
}

function startBag() {
  dataRecord({
    action: 1,
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('开始录包成功')
        isBag.value = true
      } else if(response.data === 0) {
        ElMessage.error('开始录包失败')
      }
    }
  })
}
function endBag() {
  dataRecord({
    action: 0,
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('完成录制成功')
        isBag.value = false
      } else if(response.data === 0) {
        ElMessage.error('完成录制失败')
      }
    }
  })
}
function updateMap() {
  updateSlam({
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('更新机器人数据成功')
      } else if(response.data === 0) {
        ElMessage.error('更新机器人数据失败')
      }
    }
  })
}

function startMap() {
  slam({
    action: 1,
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('生成地图成功')
      } else if(response.data === 0) {
        ElMessage.error('生成地图失败')
      }
    }
  })
}
function startSG() {
  changePcd({
    action: 1,
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('生成栅格地图成功')
      } else if(response.data === 0) {
        ElMessage.error('生成栅格地图失败')
      }
    }
  })
}

function cancel() {
  slam({
    action: 0,
    robotId: settingsStore.robot.id,
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('取消建图成功')
      } else if(response.data === 0) {
        ElMessage.error('取消建图失败')
      }
    }
  })
}

function startRoute() {
  trackRecord({
    action: 1,
    robotId: settingsStore.robot.id,
    track_name: taskName.value
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('开始寻迹录包成功')
        isRoute.value = true
      } else if(response.data === 0) {
        ElMessage.error('开始寻迹录包失败')
      }
    }
  })
}
function endRoute() {
  trackRecord({
    action: 0,
    robotId: settingsStore.robot.id,
    track_name: taskName.value
  }).then((response) => {
    if (response.code === 200) {
      if(response.data === 1) {
        ElMessage.success('完成寻迹录制成功')
        isRoute.value = false
      } else if(response.data === 0) {
        ElMessage.error('完成寻迹录制失败')
      }
    }
  })
}
// socket更新数据
const unwatch = watch(websocket, (newVal) => {
  if (newVal.mapData && Object.keys(newVal.mapData).length >= 1 ) {
    if(newVal.mapData.p === undefined) {
      return
    }
    percentage.value = Number(newVal.mapData.p)
    if( percentage.value === 100) {
      // 停止生成地图
      slam({
        action: 0,
        robotId: settingsStore.robot.id,
      }).then((response) => {
        if (response.code === 200) {
          if(response.data === 1) {
            ElMessage.success('已完成建图')
          }
        }
      })
    }
  }
})

onBeforeUnmount(() => {
  unwatch()
})
const isBag = ref(false)
const isRoute = ref(false)
</script>

<template>
  <app-container style="height: calc(100vh - 60px);">
    <div style="width: 530px">
      <div class="bag-title">
        <el-icon>
          <svg-icon name="icon-base" />
        </el-icon> 采集地图数据</div>
      <div class="bag-content">
        <el-button :type="!isBag?'primary':'info'" @click="startBag">开始录包</el-button>
        <el-button :type="isBag?'primary':'info'" @click="endBag">完成录制</el-button>
      </div>

      <div class="bag-title">
        <el-icon>
          <svg-icon name="icon-building" />
        </el-icon> 创建二维地图</div>
      <div class="bag-content">
        <el-button type="primary" @click="startMap">生成地图</el-button>
        <el-button type="primary" @click="startSG">生成栅格地图</el-button>
        <el-button type="primary" @click="updateMap">更新机器人数据</el-button>
      </div>

      <div class="bag-title"><el-icon><svg-icon name="icon-flow" /></el-icon> 建图进度</div>
      <div class="bag-content" style="display: flex">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" style="width:300px"/>
        <el-button type="info" @click="cancel" style="margin-left: 20px">取消</el-button>
      </div>

<!--            <div class="bag-title"><el-icon>-->
<!--              <svg-icon name="icon-log" />-->
<!--            </el-icon>-->
<!--              采集地图寻迹数据</div>-->
<!--            <div class="bag-content">-->
<!--              <el-input v-model="taskName" placeholder="寻迹名称" clearable style="width: 160px;margin-right: 10px"/>-->
<!--              <el-button :type="!isRoute?'primary':'info'" @click="startRoute">开始寻迹录包</el-button>-->
<!--              <el-button :type="isRoute?'primary':'info'" @click="endRoute">完成寻迹录制</el-button>-->
<!--            </div>-->
      <div class="bag-title">
        <el-icon><BellFilled /></el-icon>
        本底参数</div>
      <div class="bag-content">
        <el-input-number v-model="alarmThreshold" placeholder="本底参数" clearable style="width: 200px;margin-right: 10px"/>
        <el-button type="primary" @click="setThreshold">设置</el-button>
      </div>
    </div>
    <three-map v-if="isMap" ref="threeMap" class="map-pk" id="pcdcontainer-pk" :gridHeight="gridHeight" :gridWidth="gridWidth" :resolution="resolution" :pcdUrl="pcdUrl" is-measure="true"/>
  </app-container>
</template>
<style lang="scss">
.map-pk {
  width: 920px !important;
  height: 630px !important;
  position: absolute !important;
  left: 430px;
  top: 2px;
  //width: 800px !important;
  //height: 550px !important;
  //position: absolute !important;
  //left: 540px;
  //top: 10px;
}
.bag-title {
  margin: 20px 10px;
  color: #356ab0;
  font-weight: bold;
}
.bag-content {
  margin: 10px 20px;
}
.el-progress-bar__outer {
  background-color: #d6e6fd;
}
</style>