<template>
  <div  class="go-title-xuncha">
    <div class="flex titlebox ai-c">
      <img class="img" src="@/assets/images/chart/xunchaguiji/titlelefticon.png" />
      <div class="flex">
        <div v-for="(item,index) in navsArr" class="flex navsli ai-c jc-c cursor" :class="navsIndex==index?'active':''" @click="navsClick(index)">{{item}}</div>
      </div>
    </div>
    <div class="daterangebox">
      <n-date-picker 
        v-model:formatted-value="rangeValue" 
        type="datetimerange" 
        clearable 
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        @update:formatted-value="dateChange"
       />
    </div>
    <div class="contentbox" v-if="navsIndex=='0'">    
      <div class="flex fc-w ai-c jc-c" v-if="xunChaGuiJiList.length<1">暂无数据</div>
      <div class="flex contentli column jc-c" v-for="item in xunChaGuiJiList">
        <div class="flex ai-c jc-sb secbox">
          <div>
            <img class="userImg" src="@/assets/images/chart/xunchaguiji/userimgs.png" />
            <span class="username">{{ item.name }}</span>
          </div>
          <div class="flex">
            <!-- <div class="flex locationbox ai-c jc-c" @click="circleGeom(item)">
              <img class="img" src="@/assets/images/chart/xunchaguiji/btnicons04.png" />
              <span>范围</span>
            </div> -->
            <div class="flex rotatebox ai-c jc-c" @click="rotateLine(item)">
              <img class="img" src="@/assets/images/chart/xunchaguiji/rotateicon.png" />
              <span>轨迹</span>
            </div>
          </div>
        </div>
        <div class="flex datebox ai-c">
          <span>{{ item.startTime }}</span>
          <img class="line" src="@/assets/images/chart/xunchaguiji/linerotate.png" />
          <span>{{ item.endTime }}</span>
        </div>
      </div>
    </div>
    <div class="contentbox" v-if="navsIndex=='1'">    
      <div class="flex ai-c jc-c fc-w" v-if="clockInRecordList.length<1">暂无数据</div>
      <div class="flex contentli column jc-c" v-for="item in clockInRecordList">
        <div class="flex ai-c secbox">
          <div class="flex column ai-c userbox">
            <img class="userImg1" src="@/assets/images/chart/xunchaguiji/userimgs.png" />
            <span class="username">{{ item.Name }}</span>
            <div class="spanbox">打卡人员</div>
          </div>
          <div class="splitebox"></div>
          <div class="flex column">
            <div class="flex clockinfobox">
              <img class="iconsimg" src="@/assets/images/chart/xunchaguiji/clockfill.png" />
              <span class="lab">打卡时间</span>
              <span class="val">{{ item.CreateTime }}</span>
            </div>
            <div class="flex clockinfobox">
              <img class="iconsimg" src="@/assets/images/chart/xunchaguiji/positionicon.png" />
              <span class="lab">打卡点位置</span>
              <span class="val">
                <span>{{ item.Lng }}</span>
                <span v-if="item.Lat&&item.Lng">，</span>
                <span>{{ item.Lat }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, ref, onMounted } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { EventBus } from '@/utils/eventBus'
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 {
  textColor,
  textSize,
  textColor1,
  textSize1,
  textColor2,
  textSize2,
  clockInRecordList,
  xunChaGuiJiList
} = toRefs(props.chartConfig.option)

const navsIndex = ref('1')
const navsArr = ref(['巡查轨迹','打卡记录'])
const rangeValue = ref()
const userId = ref()
const dateRange = ref([null,null])
const navsClick = (index) =>{
  navsIndex.value = index
}
const dateChange = (e)=>{
  dateRange.value = e
}
const rotateLine = (data)=>{
  axios({
    method: "get",
    url: VITE_GLOB_API_URL + '/api/FirePatrol/GetPatrolPointByTime',
    params: {
      id: data.createId,
      beginTime: dateRange.value[0],
      endTime: dateRange.value[1]
    },
    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 circleGeom = (data) =>{

}
const getRecordListData = ()=>{
  axios({
    method: "get",
    url: VITE_GLOB_API_URL + '/api/FireGrid/GetClockOnList',
    params: {
      page: 1,
      limit: 9999,
      userId: userId.value,
      beginTime: dateRange.value[0],
      endTime: dateRange.value[1]
    },
    headers: {
        'X-Token': localStorage.getItem("X-Token")
    }
  }).then(res => {
    let rel = res.data.result.items
    props.chartConfig.option.clockInRecordList = rel
  })
}
const getXunChaListData = ()=>{
  axios({
    method: "get",
    url: VITE_GLOB_API_URL + '/api/FirePatrol/GetPatrolInfoByUserId',
    params: {
      id: userId.value,
      beginTime: dateRange.value[0],
      endTime: dateRange.value[1]
    },
    headers: {
        'X-Token': localStorage.getItem("X-Token")
    }
  }).then(res => {
    let rel = res.data.result
    props.chartConfig.option.xunChaGuiJiList = rel
  })
}
onMounted(() => {
  // 获取eventBus传过来的值
  EventBus.on('clockinlistsenddata', (data) => {
    userId.value = data.Id
    getRecordListData()
    getXunChaListData()
  });
  
})
</script>

<style lang="scss" scoped>
@include go('title-xuncha') {
  position: relative;
  .flex{
    display: flex;
  }
  .column{
    flex-direction: column;
  }
  .ai-c{
    align-items: center;
  }
  .jc-c{
    justify-content: center;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .cursor{
    cursor: pointer;
  }
  .fc-w{
    color: #fff;
    font-size: 18px;
  }
  .titlebox{
    width: 100%;
    height: 32px;
    border-bottom: 1px solid #0A392A;
    color: v-bind('textColor');
    font-size: v-bind('textSize+"px"');
    .img{
      width: 27px;
      height: 30px;
      margin-right: 1px;
    }
    .navsli{
      width: 110px;
      height: 32px;
      background: url("@/assets/images/chart/xunchaguiji/btnbg.png");
      background-size: 100% 100%;
    }
    .navsli.active{
      width: 110px;
      height: 32px;
      background: url("@/assets/images/chart/xunchaguiji/btnbgactive.png");
      background-size: 100% 100%;
    }
  }
  .daterangebox{
    width: 90%;
    margin: 20px 5%;
  }
  .contentbox{
    height: calc(100% - 110px);
    overflow: auto;
    .contentli{
      width: 100%;
      height: 83px;
      background: url("@/assets/images/chart/xunchaguiji/lisbg02.png");
      background-size: 100% 100%;
      margin-bottom: 10px;
      .secbox{
        width: 94%;
        margin-left: 3%;
        .userImg{
          width: 45px;
          height: 45px;
          margin-right: 5px;
        }
        .userImg1{
          width: 27px;
          height: 28px;
        }
        .username{
          color: v-bind('textColor1');
          font-size: v-bind('textSize1+"px"');
        }
        .spanbox{
          width: 42px;
          height: 13px;
          background: #05954F;
          border-radius: 8px;
          font-size: 8px;
          color: #FFFFFF;
          text-align: center;
          line-height: 13px;
        }
        .userbox{
          width: 25%;
        }
        .splitebox{
          width: 1px;
          height: 57px;
          background: #05954F;
          margin-right: 20px;
        }
        .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;
          margin-right: 10px;
          .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;
          }
        }
        .clockinfobox{
          .iconsimg{
            width: 20px;
            height: 20px;
          }
          .lab{
            white-space: nowrap;
            font-size: v-bind('textSize2+"px"');
            color: v-bind('textColor2');
            margin: 0 10px 0 5px;
          }
          .val{
            font-size: v-bind('textSize2+"px"');
            color: v-bind('textColor1');
          }
        }
      }
      .datebox{
        width: 94%;
        margin-left: 3%;
        color: v-bind('textColor2');
        font-size: v-bind('textSize2+"px"');
        .line{
          width: 20px;
          height: 8px;
          margin: 0 10px;
        }
      }
      
    }
  }
  :deep(.n-input){
    background: #00611A;
  }
  :deep(.n-input__input-el) {
    color: #fff;
    font-size: 14px;
  }
  :deep(.n-input__state-border){
    border-color: #00611A;
  }
  /* 整个滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
  }
  /* 滚动轨道的样式 */
  ::-webkit-scrollbar-track {
    background: #00611A; /* 轨道背景颜色 */
  }
  /* 滚动滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background: #0EB687; /* 滑块背景颜色 */
  }
  /* 当鼠标悬停在滑块上时改变颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
  }
}
</style>
