<template>
  <div class="home">
    <van-nav-bar title="愉快政" fixed left-arrow />

    <van-cell-group>
      <van-cell title="当前站点" :value="yhzinfo.mc" />
    </van-cell-group>

    <div class="content">
      <van-grid :gutter="10" :column-num="3" class="grid">
        <van-grid-item
          icon="setting-o"
          text="设备管理"
          :to="{
            name: 'EquipManage',
            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
          }"
        />
        <van-grid-item
          icon="setting-o"
          text="物资管理"
          :to="{
            name: 'MaterialManage',
            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
          }"
        />
        <van-grid-item
          icon="setting-o"
          text="人员管理"
          :to="{
            name: 'StaffManage',
            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
          }"
        />
        <van-grid-item
          icon="setting-o"
          text="冰雪灾害"
          :to="{
            name: 'IceEventManage',
            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
          }"
        />
        <van-grid-item
          icon="setting-o"
          text="气象预警"
          :to="{
            name: 'WarningMessage',
            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
          }"
        />
      </van-grid>
    </div>
    <van-popup
      :show="YHZConfirmpopup"
      position="center"
      round
      close-on-click-overlay
      :style="{ height: '20%', width: '80%' }"
      @close="onYHZConfirmClose"
      class="confirmpopup"
    >
      <div class="confirmpopup__content">
        <h3>请在服务站授权定位</h3>
      </div>
      <div class="btn-box">
        <van-button class="btn" @click="onYHZConfirmClose">取消</van-button>
        <van-button class="btn" type="primary" @click="getLocation"
          >授权定位</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import "vant/es/toast/style";
import "vant/es/popup/style";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";
import { request } from "../../../shared/utils/request";

const router = useRouter();
const yhzinfo = ref({});

const route = useRoute();
const token = route.query.token;
const YHZConfirmpopup = ref(false);

// 获取当前登录用于就职的养护站信息
const getYHZinfo = async () => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yhz/getStationByUser`,
      method: "GET",
    });
    if (res.code === "00000") {
      yhzinfo.value = res.data[0];
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
      type: "fail",
    });
  }
};

const onYHZConfirmClose = () => {
  YHZConfirmpopup.value = false;
};

onMounted(async () => {
  if (token) {
    localStorage.setItem("token", token);
    router.replace({ path: route.path }).then(() => {
      window.location.reload();
    });
  }
  await getYHZinfo();
  if (
    yhzinfo.value.isManager &&
    (yhzinfo.value.jd === "" || yhzinfo.value.wd === "")
  ) {
    YHZConfirmpopup.value = true;
  }
});

const goToUser = () => {
  router.push("/user");
};
</script>

<style scoped>
.home {
  padding-top: var(--van-nav-bar-height);
}

.content {
  padding: 16px;
}

.grid {
  margin-top: 16px;
}

.btn-box {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: 16px;
}
.btn {
  width: 50%;
}

.confirmpopup__content {
  padding: 20px;
}
</style>
