<!--
 * @Author: your name
 * @Date: 2022-09-15 14:10:42
 * @LastEditTime: 2022-09-27 16:12:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \new_gxga_app\src\pages\my\views\wdgj.vue
-->
<template>
  <van-config-provider :theme-vars="themeVars">
    <div style="padding-top: 13vw">
      <TopNav
        navTitle="我的轨迹"
        rightIcon="location"
        :showRight="true"
        @clickRight="onClickRight"
      />
      <van-cell title="选择时间" @click="calShow = true">
        <template #value>
          <span>{{ chooseTime }}</span>
        </template>
      </van-cell>
      <van-calendar
        v-model:show="calShow"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        color="#3e6ee8"
      ></van-calendar>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text=" "
        @load="onLoad"
        offset="30"
        :immediate-check="false"
      >
        <van-steps
          direction="vertical"
          :active="0"
          active-color="#3e6ee8"
          :inactive-color="themeType == 'light' ? '#333' : '#fff'"
        >
          <van-step v-for="item in gjList" :key="item">
            <div class="steps_box">{{ item.dwsj }}</div>
            <div class="steps_box">地址：{{ item.dzxz }}</div>
            <div class="steps_box">
              停留时长：{{ (item.xfsc / 60 / 60).toFixed(2) }}小时
            </div>
          </van-step>
        </van-steps>
        <van-empty
          description="暂无轨迹信息"
          image="default"
          v-if="gjList.length <= 0 && showEmpty"
        />
      </van-list>
    </div>
  </van-config-provider>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import { ref, reactive, onMounted } from "vue";
import { getWdgj } from "../../../api/common.js";
import { getUserLzLocation } from "../../../api/user.js";
import { dateFormat } from "../../../utils/tools.js";
import router from "../../../router/index.js";
const themeType = ref(getStorage("themeSetting"));
const themeVars = ref({
  stepsBackgroundColor: themeType.value == "light" ? "#fff" : "#041634",
});
const minDate = new Date(2000, 0, 1);
const maxDate = new Date();
const chooseTime = ref(dateFormat());
const calShow = ref(false); //是否显示日历
const gjList = ref([]); //轨迹数据
const loading = ref(false);
const finished = ref(false);
const pageSize = ref(10);
const pageCurrent = ref(1);
const total = ref(0);
const showEmpty = ref(false);
const kssj = ref(dateFormat());
const jssj = ref(dateFormat());
onMounted(() => {
  _getWdgj();
});
//触底加载
function onLoad() {
  if (total.value <= pageCurrent.value) {
    finished.value = true;
    return;
  }
  pageCurrent.value++;
  _getWdgj();
}

//确认日期选择
function onConfirm(val) {
  calShow.value = false;
  pageCurrent.value = 1;
  gjList.value = [];
  chooseTime.value = dateFormat("", val);
  _getWdgj();
}
//点击地图模式
function onClickRight() {
  router.push(`/my/views/wdgjMapPoint?time=${chooseTime.value}`);
}
//获取轨迹数据
function _getWdgj() {
  loading.value = true;
  let data = {
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    dwrq: chooseTime.value,
    sfzh: JSON.parse(window.localStorage.getItem("userInfo")).idEntityCard,
  };
  getWdgj(data)
    .then((res) => {
      loading.value = false;
      if (res && res.records.length > 0) {
        total.value = res.pages;
        for (let i = 0; i < res.records.length; i++) {
          res.records[i].address = "";
          // _getUserLocation(res.records[i].jd, res.records[i].wd, (_res) => {
          //   res.records[i].address = _res;
          //   gjList.value.push(res.records[i]);
          // });

           gjList.value.push(res.records[i]);
        }
      } else {
        showEmpty.value = true;
      }
    })
    .catch((err) => {
      loading.value = false;
      showEmpty.value = true;
    });
}
//获取当前位置信息
function _getUserLocation(jd, wd, fun) {
  getUserLzLocation({ jd, wd }).then((res) => {
    if (res) {
      fun(res);
    }
  });
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
::v-deep .van-step__line {
  background: #ebedf0 !important;
}
.steps_box {
  // @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  line-height: 6vw;
}
</style>
