<template>
    <div class="go-border-06">
      <svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
       
      </svg>
      <div class="box">
        <GoIconify
          :icon="weatherIcon || ''"
          :color="colors"
          :width="size"
          :rotate="rotate"
        />
        <span class="text">{{ Weather }} °C</span>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, PropType, onMounted, toRefs } from 'vue';
  import axios from 'axios';
  import dayjs from 'dayjs';
  import { CreateComponentType } from '@/packages/index.d';
  import { GoIconify } from '@/components/GoIconify';
  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true
    }
  })
  const weatherIcon = ref()
  
  const { w, h } = toRefs(props.chartConfig.attr)
  const { colors, dataset, textSize, textColor, size, rotate } = toRefs(props.chartConfig.option)

  onMounted(() => {
    getWeather()
  });

  const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
  const Weather = ref('');
  async function getWeather() {
    try {
      //高德天气查询
      axios({
        method: 'get',
        url: `https://restapi.amap.com/v3/weather/weatherInfo?city=371300&key=ae4fb485fa25f5884b9cd7c1101687c4`,
      }).then((res) => {
        console.log('aaa', res.data)
        Weather.value = res.data.lives[0].temperature;
        if(res.data.lives[0].weather == '阴'){
          weatherIcon.value = "wi:cloud"
        }else if(res.data.lives[0].weather == '晴'){
          weatherIcon.value = "wi:day-sunny"
        }else{
          weatherIcon.value = "wi:umbrella"
        }
      });
    } catch (error) {
      // 备用
      // http://www.tianqiapi.com/index/doc?version=v63
      // 若次数试用用尽，注册账号后，切换appid和appsecret即可
      axios({
        method: 'get',
        url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
      }).then((res) => {
        Weather.value = res.data.tem;
        console.log('rrrr',res)
        if(res.data.wea == '阴'){
          weatherIcon.value = "wi:cloud"
        }else if(res.data.wea == '晴'){
          weatherIcon.value = "wi:day-sunny"
        }else{
          weatherIcon.value = "wi:umbrella"
        }
      });
    }

    function updateTime() {
      currentTime.value = dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm');
      console.log('currentTime', currentTime)
    }
    
  }
  </script>
  
  <style lang="scss" scoped>
  @include go('border-06') {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  
    svg {
      position: absolute;
      z-index: -1;
    }
  
    .fill {
      fill: v-bind('colors[0]');
    }
    .fill-none {
      fill: none;
    }
    .stroke {
      stroke: v-bind('colors[1]');
    }
    .box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }
  
    .text {
      margin-left: 10px;
      color: v-bind('textColor');
      font-size: v-bind('textSize+"px"');
    }
  }
  </style>
  