<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="我的" :showRight="true" :showLeft="true" />
    <div class="user_box" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchchend">
      <img src="../../assets/images/tx.png" alt="" style="width: 75px; height: 75px" />
      <div class="user">
        <span class="user_name">{{ user.userName }}</span>
        <span class="user_dep">{{ user.deptName }}</span>
      </div>
    </div>
    <div class="user_function_box">
      <div class="user_function_item" v-for="(item, index) in functionList.list" :key="index"
        @click="onClickSkip(item.path)">
        <div class="">
          <img :src="item.imgUrl" alt="" style="width: 28px; height: 28px" />
          <span class="function_title">{{ item.name }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-popup v-model:show="showLoadtion">
      <div class="loadtion_box">
        <van-field v-model="Loadtion.address" colon label="地址" label-width="40px" />
        <van-field v-model="Loadtion.lng" colon label="经度" label-width="40px" />
        <van-field v-model="Loadtion.lat" colon label="纬度" label-width="40px" />
        <van-field v-model="Loadtion.ly" colon label="来源" label-width="40px" />
      </div>
    </van-popup>
    <van-popup v-model:show="showLogin">
      <van-form @submit="onSubmit" class="form">
        <van-field v-model="form.userName" name="userName" label="用户名" placeholder="身份证号或警号" left-icon="manager"
          label-width="50px" :rules="[{ required: true, message: '请填写身份证号或警号' }]" />
        <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="密码" left-icon="lock"
          label-width="50px" :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
            loading-text="登录中...">登录</van-button>
        </div>
      </van-form>
    </van-popup>
    <!-- 底部tas -->
    <!-- <BottomTabs type="wd" /> -->
    <div style="height: 11.8666vw"></div>
  </div>
</template>

<script setup>
import Base64 from "base-64";
import { ref, reactive, onMounted, onActivated } from "vue";
import {
  login,
  idCardlogin,
  getUserInfo,
  getUserLzLocation,
} from "../../api/user.js";
import BottomTabs from "../../components/bottomTabs.vue";
import TopNav from "../../components/topNav.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { hintToast } from "../../utils/tools.js";
const store = useStore();
const showLogin = ref(false);
const showLoadtion = ref(false);
const Loadtion = ref({
  address: "暂无地址信息",
  lng: "暂无",
  lat: "暂无",
  ly: "暂无",
});
const form = ref({
  userName: "",
  password: "",
});
const user = ref({
  userName: "警官",
  deptName: "测试部门",
});
const isLoading = ref(false);
const router = useRouter();
const caEnevt = ref(0);
//功能模块
const functionList = reactive({
  list: [
    {
      name: "个人信息",
      imgUrl: require("../../assets/images/menu-info.png"),
      path: "/userInfo",
    },
    {
      name: "工作日志",
      imgUrl: require("../../assets/images/menu-gzrz@2x.png"),
      path: "/gzrz",
    },
    {
      name: "我的轨迹",
      imgUrl: require("../../assets/images/menu-wdgj.png"),
      path: "/wdgj",
    },
    {
      name: "收藏应用",
      imgUrl: require("../../assets/images/menu-scyy.png"),
      path: "/scyy",
    },
    {
      name: "任务中心",
      imgUrl: require("../../assets/images/menu-rwtj.png"),
      path: "/yyzx/rwzx",
    },
    {
      name: "我的巡防报备",
      imgUrl: require("../../assets/images/menu-rwzx.png"),
      path: "/calendar",
    },
    {
      name: "我的值班报备",
      imgUrl: require("../../assets/images/leader/top_bb.png"),
      path: "/zbbbCalendar",
    },
    // {
    //   name: "通讯录",
    //   imgUrl: require("../../assets/images/menu-txl.png"),
    //   path: "/txl",
    // },
    {
      name: "当前位置",
      imgUrl: require("../../assets/gxapp/overview.png"),
      path: "dqwz",
    },
  ],
});
onMounted(() => {
  user.value = JSON.parse(window.localStorage.getItem("userInfo"));
});
//获取当前位置信息
function _getUserLocation() {
  let { lng, lat, zbly } = getLocation();
  if (jd && lat) {
    Loadtion.value.lng = lng;
    Loadtion.value.lat = lat;
    Loadtion.value.ly = zbly == 1 ? "GPS" : "融合";
    getUserLzLocation({ "jd": lng, "wd": lat }).then((res) => {
      if (res) {
        Loadtion.value.address = res;
      }
    });
    showLoadtion.value = true;
  } else {
    hintToast("暂无坐标信息");
  }
}
//长按事件
function onTouchstart() {
  window.isClick = true;
  caEnevt.value = setTimeout(() => {
    window.isClick = false;
    showLogin.value = true;
  }, 5e3);

  return false;
}
//清除事件
function onTouchmove() {
  clearTimeout(caEnevt.value);
  caEnevt.value = 0;
}
//释放事件
function onTouchchend() {
  clearTimeout(caEnevt.value);
  if (caEnevt.value) {
  }
  return false;
}
//手动登录
const onSubmit = (e) => {
  isLoading.value = true;
  login({
    kaptcha: "",
    userName: e.userName.trim(),
    password: Base64.encode(e.password.trim()),
  })
    .then((res) => {
      isLoading.value = false;
      const token = res.jwtToken;
      _getUserInfo(res.userId, res.deptList[0].deptName, res.deptList);
      store.commit("setToken", token);
    })
    .catch((err) => {
      isLoading.value = false;
    });
};
//获取用户信息
function _getUserInfo(id, deptName, deptList) {
  getUserInfo(id).then((res) => {
    let { userName, id, idEntityCard, mobile, inDustRialId, sex } = res;
    let userinfo = {
      deptName,
      userName,
      deptList,
      id,
      idEntityCard,
      mobile,
      inDustRialId,
      sex,
    };
    store.commit("userStatus", userinfo);
    showLogin.value = false;
    user.value = JSON.parse(getStorage("userInfo"));
    user.value = userinfo;
    form.value.userName = "";
    form.value.password = "";
  });
}
//跳转
function onClickSkip(url) {
  switch (url) {
    case "dqwz":
      router.push('/dqLocation')
      // _getUserLocation();
      break;
    default:
      router.push(url);
  }
}
</script>

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

.user_function_box,
.user_box {
  @include font_color($font-color-theme);
}

.user_box {
  display: flex;
  align-items: center;
  padding: 4vw 3vw;
  margin: 3vw;
  border-radius: 5px;
  @include user_function_item_color($user-function-item-theme);

  .user {
    display: flex;
    flex-direction: column;
    margin-left: 3vw;

    .user_name {
      @include font_size($font_large_s);
    }

    .user_dep {
      @include font_size($font_medium_s);
      margin-top: 2vw;
    }
  }
}

.user_function_box {
  @include user_function_item_color($user-function-item-theme);
  @include font_size($font_medium_s);
  margin: 0 3vw;
  border-radius: 5px;
  padding: 0vw 3vw;

  .user_function_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vw 0;
    @include item_bottom_color($bottom-border-top-clore-theme);

    >div {
      display: flex;
      align-items: center;

      .function_title {
        display: inline-block;
        margin-left: 5vw;
      }
    }
  }
}

.form {
  width: 350px;
  border-radius: 2vw;
}

.loadtion_box {
  width: 340px;
}

::v-deep .van-popup {
  border-radius: 1.5vw;
}
</style>
