<script setup>
import { reactive, ref, provide, nextTick, onMounted, inject } from "vue";
import areaList from "./areaList.vue";
import { useRoute, useRouter } from "vue-router";
import mitt from "@/utils/mitt";
import { getStreet } from "@/api/index.js";
import { useAppStore } from "@/store/app.js";
import { useUserStore } from "@/store/user.js";
import axios from "axios";

const reload = inject('reload');

const info = reactive({
  address: '泸县',
  pinyin: 'luxian'
})

const appStore = useAppStore();
const userSotre = useUserStore();

const areaListRef = ref(null);

// 选择镇
const choseArea = ref(null)
const open = () => {
  if (list.value.length > 0) areaListRef.value.show();
}
// 关闭
const offAreaList = (e) => {
  Object.keys(e).forEach(key => {
    if (e[key]) {
      info[key] = e[key];
    }
  })
  info.address = e.name;
  mitt.emit('map_info', info);
  reload();
}

const list = ref([])
const initList = async () => {
  let street = appStore.street;
  if (street?.length == 0) {
    let { data } = await getStreet({
      area_code: appStore.address.areaCode
    })
    street = data;
    appStore.setStreet(street);
  }
  let area = appStore.area;
  if (userSotre.userInfo.street_code) {
    let data = street.find(item => item.code == appStore.address.streetCode);
    info.address = data?.name;
    list.value = [];
    appStore.setAddress({
      areaCode: appStore.address.areaCode,
      streetCode: appStore.address.streetCode
    })
  } else {
    let data = area.find(item => item.code == appStore.address.areaCode);
    info.address = data?.name;
    list.value = [data, ...street];
    if (appStore.address.streetCode) {
      data = street.find(item => item.code == appStore.address.streetCode);
      info.address = data?.name;
    }
    appStore.setAddress({
      areaCode: appStore.address.areaCode,
      streetCode: appStore.address.streetCode
    })
  }
  mitt.emit('map_info', info);
}

const router = useRouter()
const route = useRoute()

const navToDelivery = () => {
  if (route.path == '/') {
    // router.push('/delivery');
    return;
  }
  else router.back();
}

let nowTime = ref([]);

const updateClock = () => {
  let now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();
  let y = now.getFullYear();
  let m = now.getMonth() + 1;
  let d = now.getDate();

  nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');

  nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
    minutes.toString().padStart(2, '0') + ':' +
    seconds.toString().padStart(2, '0');
}

const logout = () => {
  // router.replace('/login')
  router.push('/login')
}

const weather = ref("暂无天气信息")
const initWeather = (city = 510500) => {
  axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
    if (res.data.status == 1) {
      weather.value = res.data.lives[0].weather;
    }
  }).catch((e) => {
    console.log(e);
  })
}


onMounted(() => {
  initList();

  // 每秒钟更新一次时间
  setInterval(updateClock, 1000);

  initWeather();
})
</script>

<template>
  <div class="header">
    <div class="left">
      <img
        class="logo item"
        src="/src/assets/head_img/logo.png"
        @click="navToDelivery"
      />
      <div class="item">{{ nowTime[0] }}</div>
      <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
      <div class="item">{{ nowTime[1] }}</div>
    </div>
    <div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
    <div class="right">
      <div class="item" @click.stop="open" style="position: relative">
        <img src="/src/assets/head_img/location.png" alt="" />
        {{ info.address }}  
        <areaList
          ref="areaListRef"
          :list="list"
          :choseArea="choseArea"
          @offAreaList="offAreaList"
          style="position: absolute; top: 100%; left: 0"
        ></areaList>
      </div>
      <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
      <div class="item">
        <img src="/src/assets/head_img/weather.png" alt="" />
        {{ weather }}
      </div>
      <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
      <div class="item" @click="logout">
        <img src="/src/assets/head_img/close.png" alt="" />
      </div>
    </div>
    <img class="img" src="/src/assets/img/shiler.png" alt="" />
  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  background-image: url("../assets/img/header.png");
  background-size: 100% 100%;
  background-color: rgba($color: #000000, $alpha: 0.8);
  height: 3.75rem;
  align-items: center;
  position: relative;
  .img {
    position: absolute;
    bottom: -10%;
    left: 50%;
    z-index: 9999999;
    width: 50vw;
    height: 100%;
    transform: translate(-50%, 50%);
  }
  .icon {
    width: 0.8rem;
    height: 2rem;
  }
  .head-title {
    /* font-weight: bold; */
    font-family: "ifonts", sans-serif;
    font-size: 2rem;
    height: 100%;
    line-height: 3.5rem;
  }
  .left {
    display: flex;
    justify-content: left;
    align-items: center;
    flex: 1;
    .logo {
      width: 2rem;
      height: 2rem;
    }
    .item {
      margin-left: 1rem;
      cursor: pointer;
    }
  }
  .right {
    display: flex;
    flex: 1;
    justify-content: right;
    .item {
      margin-right: 1rem;
      display: flex;
      align-items: center;
      margin-right: 1rem;
      cursor: pointer;
      img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
      }
    }
  }
}
</style>
