<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle :title="'气象一览'" refreshName="metRefreshName2" />
      <div>
        <div class="total222">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1">
              <template #tab>
                <span> 降雨实况 </span>
              </template>
              <div style="width: 100%; height: 260px">
                <div @click="rainfallClick()" id="mo-map1">
                  <!-- {{ oneHourPrecipitation[0].img }} -->
                  <img :src="onHour.activeObj.img" />
                  <div class="mo-map1-title"> 1小时降水量：{{ onHour.activeObj.time }} </div>
                </div>
                <!--  -->
              </div>
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #tab>
                <span> 天气预报 </span>
              </template>
              <div id="mo-map2" style="width: 100%; height: 260px">
                <weather />
              </div>
            </a-tab-pane>
            <template #renderTabBar="{ DefaultTabBar, ...props }">
              <component :is="DefaultTabBar" v-bind="props" :style="{ zIndex: 1, textAlign: 'center' }" />
            </template>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeUnmount, toRef, getCurrentInstance, onMounted, reactive } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import weather from '../../../components/weather/index.vue';
import eventBus from '/@/utils/eventBus';
import { getAppEnvConfig } from '/@/utils/env';
const { VITE_GLOB_BASE_IMG } = getAppEnvConfig();
eventBus.on('metRefreshName2', () => {
  activeKey.value = '1';
});
// const props = defineProps({
//   oneHourPrecipitation: {
//     type: Array,
//     default: () => {
//       return [];
//     },
//   },
// });
let onHour = reactive({
  activeObj: {},
  activeArr: [],
});
function rainfallClick() {
  eventBus.emit('rainfallClick', onHour.activeArr);
}
function setImg(value) {
  return `${VITE_GLOB_BASE_IMG}${value}`;
}
let setIntervalOut = null;
function setActiveImg() {
  let index = 1;
  setIntervalOut = setInterval(() => {
    if (onHour.activeArr.length - 1 == index) {
      onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[index]));
      onHour.activeObj.img = setImg(onHour.activeArr[index].img);
      index = 0;
    } else {
      onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[index]));
      onHour.activeObj.img = setImg(onHour.activeArr[index].img);
      index++;
    }
  }, 3000);
}
eventBus.on('onHourPrecipitation', (e) => {
  onHour.activeArr = e;
  onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[0]));
  onHour.activeObj.img = setImg(onHour.activeArr[0].img);
  // 设置循环事件
  setActiveImg();
});
let activeKey = ref('1');
onBeforeUnmount(() => {
  // 清空定时器
  clearInterval(setIntervalOut);
  // alert(1);
});
</script>

<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}

.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}

// 修改组件样式
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  background: url('../../../assets/images/weatheHome/active-bar.png') no-repeat;
  // width: 45px;
  background-size: 100%;
  height: 40px;
  width: 169px;
}
::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  // background: url('../../../assets/images/tab.png') no-repeat;
  // width: 45px;
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 42px;
  // line-height: 42px;
  // margin-left: -6px;
}
// ::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active span) {
//   position: relative;
//   // top: 10px !important;
// }
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab) {
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 40px;
  // line-height: 42px;
  padding: 12px 0px 12px 0px;
  margin: 0;
  width: 149px;
}
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab span) {
  position: relative;
  top: -4px;
  color: #377dff;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active span) {
  color: #c9d1d9 !important;
}
::v-deep(.ant-tabs-top-bar) {
  margin-bottom: 0px !important;
}
::v-deep(.ant-tabs-ink-bar) {
  visibility: hidden;
}

::v-deep(
    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-bottom > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before,
    .ant-tabs-bottom > div > .ant-tabs-nav::before
  ) {
  border-bottom: 0px;
}
::v-deep(.ant-tabs) {
  color: #fff;
}
::v-deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #ffe75c;
}
::v-deep(.ant-tabs-tab) {
  // font-size: 18px;
  // font-weight: bold;
  font-size: 16px;
  font-weight: normal !important;
}
::v-deep(.ant-tabs-bar) {
  border-bottom: 0px solid #303030 !important;
}

::v-deep(.ant-tabs-nav) {
  background: url('../../../assets/images/weatheHome/bar-bg.png') no-repeat;
  background-size: 100%;
  width: 318px !important;
  height: 48px !important;
  padding-top: 3px;
  margin: 0 auto;
}
// 修改组件样式结束
#mo-map1 {
  // background-color: red;
  width: 95%;
  height: 240px;
  margin: 0 auto;
  padding-top: 10px;
  position: relative;
  .mo-map1-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    line-height: 40px;
    color: #fff;
    text-align: center;
  }
  img {
    margin: 0px auto;
    width: 100%;
    height: 100%;
  }
}
</style>
