<template>
  <div  class="go-title-03">
    <div class="headerbox">
      <div class="headerli" v-for="item in headerData">{{item}}</div>
      <div class="scopedbox headerli">操作</div>
    </div>
    <div class="sectionbox">
      <div class="nodatabox" v-if="dataset.length<1">暂无数据</div>
      <div class="secli" v-for="item in dataset">
        <div class="li">
          <div class="la">{{ item.TownName }}</div>
        </div>
        <div class="li">
          <div class="la">{{ item.Name }}</div>
        </div>
        <div class="li">
          <span class="onlinecircle" v-if="item.State=='在线'"></span>
          <span class="outlinecircle" v-else></span>
          <span>{{ item.State }}</span>
        </div>
        <div class="li">{{ item.OnLineTime }}</div>
        <div class="li scopedbox">
          <div class="locationbox flex ai-c jc-c" @click="goflyaddress(item)">
            <img class="img" src="@/assets/images/chart/xunchaguiji/locationicon.png" />
            <span>位置</span>
          </div>
          <div class="rotatebox flex ai-c jc-c" @click="rotateLine(item)">
            <img class="img" src="@/assets/images/chart/xunchaguiji/rotateicon.png" />
            <span>轨迹</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, onMounted } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import * as mars3d from "mars3d";
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})
 
const { w, h } = toRefs(props.chartConfig.attr)
const entityArr = ref([])
const {
  textColors,
  textSize,
  backgroundColors,
  dataset,
  headerData
} = toRefs(props.chartConfig.option)
const goflyaddress=(e)=>{
  entityArr.value.forEach(item =>{
    let graphic = window.graphicLayer.getGraphicById(item);
    window.graphicLayer.removeGraphic(graphic);
  })
  entityArr.value = []
  handlerAddEntity(e)
}
// 添加Entity
const handlerAddEntity = (data) => { 
  let graphicOptions = {
    id: data.CreateId,
    position: [parseFloat(data.Lng), parseFloat(data.Lat)],
    style: {
      image: '@/assets/images/chart/xunchaguiji/jiuyuanrenyuan.png',
      clampToGround: true,
      scale: 0.5,
    }
  }
  entityArr.value.push(data.CreateId)
  let graphic = window.graphicLayer.getGraphicById(data.CreateId);

  graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
  window.graphicLayer.addGraphic(graphic);
  window.globalMap.flyToGraphic(graphic,{radius:300});
}
const rotateLine = (data)=>{
  axios({
    method: "get",
    url: VITE_GLOB_API_URL + '/api/FirePatrol/GetPatrolPointByTime',
    params: {
      id: data.CreateId
    },
    headers: {
        'X-Token': localStorage.getItem("X-Token")
    }
  }).then(res => {
    let rel = res.data.result
    let positionsArr = []
    rel.forEach(item =>{
      let arr = []
      arr.push(item.lng,item.lat)
      positionsArr.push(arr)
    })
    const graphic = new mars3d.graphic.PolylineEntity({
      positions: positionsArr,
      style: {
        color: '#25F8EE',
        depthFail: true,
        opacity: 1,
      },
      attr: { remark: "轨迹" },
      flyTo: true
    })
    window.graphicLayer.addGraphic(graphic)
  })
}
const getListData=()=>{
  axios({
    method: "post",
    url: VITE_GLOB_API_URL + '/api/FireManagement/GetPointUserOnLine',
    data: {
      page: 1,
      limit: 9999
    },
    headers: {
        'X-Token': localStorage.getItem("X-Token")
    }
  }).then(res => {
    let rel = res.data.result.items.userinfo
    props.chartConfig.option.dataset = rel
  })
}
onMounted(() => {
  getListData()
})

</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  flex-direction: column;
  .flex{
    display: flex;
  }
  .ai-c{
    align-items: center;
  }
  .jc-c{
    justify-content: center;
  }
  .headerbox{
    display: flex;
    height: 38px;
    border-top: 2px solid v-bind('backgroundColors[3]');
    background-color: v-bind('backgroundColors[0]');

    .headerli{
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: v-bind('textSize[0]+"px"');
      color: v-bind('textColors[0]');
    }
  }
  .scopedbox{
    height: 100%;
    min-width: 120px;
  }
  .sectionbox{
    height: calc(100% - 38px);
    overflow: auto; 
    .nodatabox{
      padding: 40px 0;
      text-align: center;
      color: #fff;
      font-size: 20px;
    }
    .secli{
      background: v-bind('backgroundColors[1]');
      display: flex;
      height: 38px;
      .li{
        width: 0;
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: v-bind('textSize[1]+"px"');
        color: v-bind('textColors[1]');
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        text-align: center;
        .la{
          white-space: nowrap; 
          overflow: hidden; 
          text-overflow: ellipsis;
        }
        .onlinecircle{
          width: 4px;
          height: 4px;
          background: #73FF73;
          box-shadow: 0px 0px 8px 1px rgba(0,255,64,0.75);
        }
        .outlinecircle{
          width: 4px;
          height: 4px;
          background: #A1A4B1;
          box-shadow: 0px 0px 8px 1px rgba(161,164,177,0.75);
        }
        .locationbox{
          width: 47px;
          height: 22px;
          background: linear-gradient( 180deg, #1F2B1E 0%, #384232 100%);
          border-radius: 2px;
          border: 1px solid #F7CD7A;
          font-size: 10px;
          color: #FFFFFF;
          cursor: pointer;
          .img{
            width: 16px;
            height: 16px;
          }
        }
        .rotatebox{
          width: 47px;
          height: 22px;
          background: linear-gradient( 180deg, #182B20 0%, #136C3D 100%);
          border-radius: 2px;
          border: 1px solid #8FF4B1;
          font-size: 10px;
          color: #FFFFFF;
          cursor: pointer;
          .img{
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .secli:nth-child(2n){
      background: v-bind('backgroundColors[2]');
    }
  }
  
}
/* 整个滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}
/* 滚动轨道的样式 */
::-webkit-scrollbar-track {
  background: #00611A; /* 轨道背景颜色 */
}
/* 滚动滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #0EB687; /* 滑块背景颜色 */
}
/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
}
</style>
