<template>
  <div class="info" @click="gotoWea">
    <div class="loc flex items-center">
      <n-icon size="18" color="#8a2be2">
        <IosPin />
      </n-icon>
      {{ addr }}
    </div>
    <div class="wea">
      <i :class="'qiIcon qi-' + now.icon + '-fill'"></i>
      <div class="tem">{{ now.text }} {{ now.temp }} ℃</div>
    </div>
  </div>
</template>
<script setup>
import { IosPin } from "@vicons/ionicons4";
import { ref } from "vue";
const city = ref("合肥市");
const addr = ref("安徽省合肥市");
let now = ref({});
const fLink = ref('')

function gotoWea(){
  window.open(fLink.value,"_blank")
}

onMounted(async () => { 
  const ress = await $http.addr.getAddressByIP();
  console.log("111", ress);
  const reg = ress.data.split("|")
  console.log("***********",reg);
  const res = {
    country:reg[0],
    province:reg[2],
    city:reg[3]
  }
  city.value = res.city;
  addr.value = ['上海','重庆','北京','天津'].includes(res.province) ? res.country + res.city : res.province + res.city;
  const r = await $http.wea.getWeather({ city: city.value });
  fLink.value = r.fxLink
  now.value = r.now;
});
</script>

<style lang="less" scoped>
.info {
  display: flex;
  // justify-content: space-between;
  align-items: center;

  .loc {
    margin-right: 15px;

    :deep(n-icon) {
      padding-top: 5px;
    }
  }

  .wea {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .qiIcon {
      font-size: 26px;
      color: @purple;
    }

    .tem {
      margin-left: 15px;
    }
  }
}</style>
