<template>
  <router-view v-slot="{ Component }">
    <Component :is="Component"></Component>
    <van-popup v-model:show="showAlert" closeable :close-on-click-overlay="false" close-icon-position="top-right"
      position="bottom" @close="closePopup">
      <div class="alert-content">
        <div class="alert-cnt">
          <van-icon name="warning-o" color="orange"></van-icon> {{ message }}
        </div>
        <div class="foot-btn">
          <van-button round block type="primary" @click="okUpdate">
            确定更新
          </van-button>
        </div>
      </div>
    </van-popup>
  </router-view>
  <GdMap />
</template>

<script setup>
import GdMap from "./components/GdMap/index.vue";
import watermark from "./utils/watermark.js";
import emitter from "./utils/eventBus.js";
import { onMounted, onUnmounted, ref, watch, reactive } from "vue";
import { getMyTaskList, getMyTaskTotal } from "./api/rwzx.js";
import { getDistance, hintToast, timeValidate } from "./utils/tools";
import { qcckPost, qcckGet } from "@/api/qcckApi";
import { useRoute } from "vue-router";
const route = useRoute();
const bbTime = ref(null); //查询报备定时函数
let userInfo;
let message = ref("版本已经更新，请退出重新登录!");
let userLocation;
try {
  userInfo = JSON.parse(window.localStorage.getItem("userInfo")); //用户信息
  userLocation = JSON.parse(bridge.getLocation()); //手机端
} catch (error) {
  userLocation = setPint(); //PC端
}
const isLogin = ref(true);
const isFirst = ref(true);
const isVersion = ref(true);
const showAlert = ref(false); //版本更新弹窗

watch(
  () => route,
  (val) => {
    if (val.path != "/") {
      if (isLogin.value) {
        // 水印
        let user = JSON.parse(localStorage.getItem("userInfo"));
        if (user) {
          let name =
            user.userName +
            "(" +
            user.inDustRialId +
            ")" +
            " - " +
            user.deptName;
          let time = timeValidate(new Date());
          watermark.set(name, time);
        }
      }
      isLogin.value = false;
    } else {
      isLogin.value = true; //退出
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  // getLocation(); //获取经纬度
  // setInterval(() => {
  //   getLocation(); //获取经纬度
  // }, 10000);
  //默认设置用户主题色
  if (!getStorage("themeSetting")) {
    setStorage("themeSetting", "light");
  }
  //设置主题颜色
  let themeType = getStorage("themeSetting");
  setAttribute(themeType == "light" ? "theme1" : "theme2");
  //手动点击首页设置主题色
  emitter.on("selectTheme", (res) => {
    setAttribute(res); // 应用主题
  });
});
const getLocation = () => {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        if (pos.coords) {
          var latitude = pos.coords.latitude;
          var longitude = pos.coords.longitude;
          qcckPost(
            { jd: longitude, wd: latitude, bbid: "" },
            "/mosty-qwzx/tbQwXfbb/updateBbJzwz"
          ).then((res) => {
            console.log(res, "res");
          });
        }
      },
      (err) => {
        console.log(err, "err");
      }
    );
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
};

// 关闭提示
function closePopup() {
  clearInterval(bbTime.value);
  bbTime.value = null;
  showAlert.value = false;
}
//随机生成坐标
function setPint() {
  let obj = {};
  for (let i = 0; i < 1; i++) {
    obj = {
      app_x: 104.019822 + Math.random() / 5,
      app_y: 30.450369 + Math.random() / 5,
      app_sfzh: userInfo ? userInfo.idEntityCard : "",
    };
  }
  return obj;
}

// 调用任务接口
function _getTaskList() {
  let data = {
    pageSize: 10,
    pageCurrent: 1,
  };
  getMyTaskList(data).then((res) => { });
}
onUnmounted(() => {
  clearInterval(bbTime.value);
  bbTime.value = null;
});

function setAttribute(theme) {
  window.document.documentElement.setAttribute("data-theme", theme);
}
</script>

<style lang="scss">
@import "./assets/styles/mixin.scss";

body {
  @include bg_color($background-color-theme);
}

#app {
  width: 100vw;
}

.alert-content {
  height: 24vw;

  .alert-cnt {
    margin-top: 10vw;
    text-align: center;

    .van-icon {
      margin-right: 2vw;
    }
  }

  .foot-btn {
    margin: 4vw 5vw;
  }
}

//首页模块标题样式
.leaderTitle {
  height: 12.2vw;
  line-height: 12.2vw;
  font-size: 4.26667vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4.5vw;
  font-weight: 550;
  @include font_color($font-color-theme);
}

.leaderTitle .title img {
  width: 5.33334vw;
  height: 5.33334vw;
  margin-right: 2vw;
}

.leaderTitle .title img,
.leaderTitle .title span {
  vertical-align: middle;
}

.leaderTitle .title {
  padding: 0 0 0;
}

// .leaderTitle,
// .jrfxBox,
// .leaderTzBox,
// .leaderPubBox {
// 	position: relative;
// 	top: -6vw;
// }

//统计数据条格样式
.item_box {
  @include font_color($font-color-theme);
  border-radius: 2.5vw;
  @include bg_color($background-color-theme);
  @include border_outer_color($border-outer-color-theme);
  // height: 28vw;
}

//左侧标题样式
.wq_title {
  /* flex: 1; */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 8vw;
  @include font_size($font_medium_s);
  color: #fff;
  background-color: #104ecc;
  padding: 1vw 0;
}

//统计字体大小
.numb {
  padding-top: 1vw;
  font-weight: 500;
  font-size: 6vw;
  @include total_font_color($total-font-color-theme);
}

//空数据样式
.van-empty {
  margin-top: 15vw !important;
}

.home_box {
  @include bg_color($background-color-theme);
}

.leaderBg {
  padding: 20vw 0 4vw 0;
}

/* 首页头部banner和按钮 */
.leaderTop {
  height: 45.33334vw;
  background: url("./assets/images/new/banner.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  top: -6vw;
  margin-bottom: 7vw;
}

.isGq {
  background: url("./assets/images/new/banner_gq.png") no-repeat;
  background-size: 100%;
}

.welcome {
  font-size: 4.26667vw;
  // padding: 14.46667vw 4.73334vw 0 5.73334vw;
  padding: 12.86667vw 5.73334vw 2vw 5.73334vw;
  display: flex;
  justify-content: space-between;

  // margin-bottom: 6vw;
  // margin-bottom: 14vw;
  .userName_box {
    // background: linear-gradient(0deg, #ff949e 0%, #f63c4b 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    // font-weight: bold;
    color: #fff;
    @include font_size($font_medium);
    display: block;
    padding-bottom: 1.5vw;
  }

  .tq_box {
    display: block;
    @include font_size($font_medium_s);
    padding-left: 0.5vw;
    margin-bottom: 2vw;
  }
}

.welcome img.face {
  height: 4.26667vw;
  vertical-align: middle;
  margin-right: 2vw;
}

.welcome span {
  vertical-align: middle;
  // color: #fff !important;
  // @include font_color($font-color-theme);
}

//列表顶部时间样式
.time_icon {
  display: flex;
  align-items: center;

  .timeicon {
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1.5vw;
  }
}

.other_type_title {
  color: #3e6ee8;
  position: relative;
  padding-left: 2vw;
}

.other_type_title::after {
  content: "";
  position: absolute;
  width: 0.55vw;
  height: 4vw;
  left: 0;
  top: 0.8vw;
  background-color: #3e6ee8;
}

.gauge {
  margin: 2vw 3.5vw;
}

// 字体颜色
.yellow {
  color: #ffcc40;
}

.red {
  color: red;
}

.green {
  color: #07c160;
}

.bule {
  color: #3e6ee8;
}

.cyan {
  color: cyan;
}

.bg_yellow {
  background-color: #ffcc40;
}

.bg_red {
  background-color: red;
}

.bg_orange {
  background-color: orange;
}

.bg_green {
  background-color: #07c160;
}

.bg_bule {
  background-color: #3e6ee8;
}

.bg_cyan {
  background-color: cyan;
}

//底部按钮样式
.mapPattern {
  padding: 10vw 20vw;
}

//只显示一排内容
.text_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

//只显示两排内容
.text_detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

//印章样式
.zwzl_box {
  position: absolute;
  right: -1vw;
  width: 18vw;
  top: 6vw;
}

//地图模板样式
.modelHtml {
  @include font_size($font_medium_s);
  background: #fff;
  padding: 5vw;
  border-radius: 1vw;
  position: relative;

  .mapClass {
    position: absolute;
    font-size: 25px;
    top: -2px;
    right: 1vw;
  }
}

.textimeFzyc {
  background: linear-gradient(to bottom, #ffffff, #02f131);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2vw;
  font-weight: 600;
}

//吸顶盒子样式
.sticky_box {
  @include bg_color($background-color-theme);
}

.amap-icon img {
  width: 25px;
  height: 34px;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.info {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
}
</style>
