<template>
  <a-row class="template-head-view" display="flex" align="center">
    <a-col :span="6">
      <div class="template-head-date" v-if="headerData.date">
        {{ getCurrentDateTime }}
      </div>
    </a-col>
    <a-col :span="12">
      <div class="template-head-title" :class="{ fontLab: pageTemplate == '2' }">
        {{ title || '能源管理中心' }}
      </div>
    </a-col>
    <a-col :span="6">
      <div class="template-head-weather">
        <template v-if="headerData.weather">
          <img v-if="currentWeather.text.includes('雨')" src="@/assets/bi/icon-rain.png" alt=""/>
          <img v-else-if="currentWeather.text.includes('多云')" src="@/assets/bi/icon-cloudy.png" alt=""/>
          <img v-else-if="currentWeather.text.includes('阴')" src="@/assets/bi/icon-cloud.png" alt=""/>
          <img v-else src="@/assets/bi/icon-weather.png" alt=""/>
          {{ currentWeather.text }}
          <img src="@/assets/bi/icon-temperature.png" alt=""/>
          {{ currentWeather.temp }}
          <img src="@/assets/bi/icon-humidness.png" alt=""/>
          {{ currentWeather.humidity }}
          <span>{{ currentTime || '' }}</span>
        </template>
        <icon-wifi v-if="headerData.network" :class="['wifi-status', network===true?'green':network===false?'red':'wifi-status']"/>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
import dayjs from 'dayjs';
import {getStation, getWeather, getNetwork} from '@/api/public';
import {useIntervalFn} from '@vueuse/core';
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
const props = defineProps({
  headerData: {
    type: Object,
    default: () => {
      return {
        date: '',
        weather: '',
        network: false,
      };
    },
  },
  pageTemplate: {
    type: String,
    default: '0',
  },
  title: {
    type: String,
    default: '',
  },
});
const currentWeather = ref({
  text: '',
  temp: '',
  humidity: '',
});
const currentTime = ref('');
const network = ref('');

/**
 * @desc 获取当前时间 YYYY年MM月DD日
 */
const getCurrentDateTime = computed(() => {
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const day = dayjs();
  const curTime = day.format('YYYY年MM月DD日');
  const week = Number(day.format('d'));
  return `${curTime} ${weekDays[week]}`;
});

/**
 * 获取天气
 */
const fetchWeather = async () => {
  let resStation = await getStation();
  if (resStation.code != 200) {
    return;
  }
  //默认获取当前站点的位置信息
  let res: any = await getWeather(resStation.data.coordinate || '122.13,37.42');
  if (res.code == 200) {
    currentWeather.value = {
      text: res.data.now.text,
      temp: res.data.now.temp + '℃',
      humidity: res.data.now.humidity + '%',
    };
  }
};


/**
 * @desc 每秒执行一次 获取当前时分秒
 */
const {resume: startInterval, pause: stopInterval} = useIntervalFn(async () => {
  currentTime.value = dayjs().format('HH:mm:ss');
}, 1000);

const fetchNetwork = async (stationId: number) => {
  const res: any = await getNetwork(stationId);
  try {
    if (res.code == 200) {
      network.value = res.data;
    }
  } catch (e) {
    console.error(e);
  } finally {
  }
}

onMounted(async () => {
  if (props.headerData.weather) {
    startInterval();
    await fetchWeather();
  }

  if (props.headerData.network) {
    if (route.query.stationId) await fetchNetwork(route.query.stationId);
  }
});
onBeforeUnmount(() => {
  stopInterval();
})
</script>

<style lang="less" scoped>
@font-size: 16px;
@font-size-mini: 14px;
@font-size-medium: 18px;
@font-size-large: 20px;
@color-w: white;

.template-head-view {
  width: 100%;
  height: 100%;
}

.template-head {
  height: 100%;
  display: flex;
  align-items: center;
}

.template-head-date {
  font-size: @font-size-medium;
  letter-spacing: 1px;
  //padding-left: 70px;
  padding-left: 38px;
  padding-bottom: 30px;
  line-height: 40px;
  box-sizing: border-box;
}

.template-head-title {
  font-size: 48px;
  text-align: center;
  font-weight: bold;
}

.fontLab {
  background: linear-gradient(180deg, #ffffff 100%, #0f8dff 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(15, 141, 255, 0.8);
}

.template-head-weather {
  font-size: @font-size-medium;
  padding-right: 38px;
  padding-bottom: 30px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;

  .wifi-status {
    font-size: 28px;
    color: #fff;
    margin-left: 10px;
  }

  .red{
    color: rgb(245, 34, 45);
  }

  .green{
    color: rgb(82, 196, 26);
  }

  img {
    margin-left: 10px;
    margin-right: 2px;
    width: 32px;

    &:nth-child(2) {
      width: 16px;
    }

    &:nth-child(3) {
      width: 17px;
    }
  }

  span {
    margin-left: 14px;
  }
}
</style>