<template>
  <div>
    <div class="btn" @click="showWarningBroad">
      <!-- <div>语音播报</div>
    <a-badge :count="10">
      <a href="#" class="head-example"></a>
    </a-badge> -->
      <div style="display: flex; flex-direction: row; justify-content: space-between" class="btn-header">
        <img :src="parseWeatherData(weatherObj.text)" class="weather-icon" />
        <span class="unit">{{ weatherObj.pressure }} hPa</span>
        <FileSearchOutlined style="font-size: 18px; color: #fff; line-height: 50px" />
      </div>
    </div>
    <div v-if="isShowWeatherBroad" class="broadcast" ref="VoiceBroadcastRef" id="VoiceBroadcast">
      <div class="title">
        <div class="message-title">详情</div>
      </div>
      <div class="broadcast-context">
        <div class="context-tab">
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 0 }" @click="toSelectList(0)"> 温度</div>
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 1 }" @click="toSelectList(1)"> 气压</div>
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 2 }" @click="toSelectList(2)"> 风力</div>
        </div>
        <div class="context-box">
          <div class="echarts-box">
            <BarAndLine
              v-if="activeKey == 0"
              xAxisPropType="fxTime"
              height="240px"
              :dataSource="monitorData"
              :chartsColumns="ChartsColumnsWD"
              :option="Option"
            />
            <BarAndLine
              v-if="activeKey == 1"
              xAxisPropType="fxTime"
              height="240px"
              :dataSource="monitorData"
              :chartsColumns="ChartsColumnsQY"
              :option="Option"
            />
            <BarAndLine
              v-if="activeKey == 2"
              xAxisPropType="fxTime"
              height="240px"
              :dataSource="monitorData"
              :chartsColumns="ChartsColumnsFL"
              :option="Option"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { Tooltip, Badge } from 'ant-design-vue';
import { SoundOutlined, ClearOutlined, FileSearchOutlined, WarningOutlined } from '@ant-design/icons-vue';
import Icon from '/@/components/Icon';
import { defineComponent, ref, onMounted, nextTick } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useDrag } from '@/hooks/event/useDrag';

export default defineComponent({
  name: 'VoiceBroadcast',
  components: { Icon, Tooltip, Badge, SoundOutlined, ClearOutlined, FileSearchOutlined, WarningOutlined, BarAndLine },

  setup() {
    const getWeather = () => defHttp.post({ url: '/safety/ventanalyDevice/getWeatherData' });
    const activeKey = ref(0);
    const isShowWeatherBroad = ref(false);
    const monitorData = ref<any[]>([]);

    const ChartsColumnsWD = [
      {
        legend: '温度',
        seriesName: '(℃)',
        ymax: 0.8,
        yname: '℃',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'temp',
      },
    ];
    const ChartsColumnsQY = [
      {
        legend: '气压',
        seriesName: '(hPa)',
        ymax: 0.8,
        yname: 'hPa',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'pressure',
      },
    ];
    const ChartsColumnsFL = [
      {
        legend: '风力',
        seriesName: '(等级)',
        ymax: 0.8,
        yname: '等级',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'widnScale',
      },
    ];

    const Option = {
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: null,
      },
    };
    const weatherObj = ref({
      cloud: '',
      dew: '',
      fxTime: '',
      humidity: '',
      icon: '',
      pop: '',
      precip: '',
      pressure: '',
      temp: '',
      text: '',
      wind360: '',
      windDir: '',
      windScale: '',
      windSpeed: '',
    });

    const iconMap = {
      晴: new URL('/src/assets/icons/sun.svg', import.meta.url).href,
      雨: new URL('/src/assets/icons/rain.svg', import.meta.url).href,
      雪: new URL('/src/assets/icons/snow.svg', import.meta.url).href,
      多云: new URL('/src/assets/icons/clound.svg', import.meta.url).href,
      风: new URL('/src/assets/icons/wind.svg', import.meta.url).href,
    };

    function parseWeatherData(res) {
      return iconMap[res] || new URL('/src/assets/icons/sun.svg', import.meta.url).href;
    }
    function showWarningBroad() {
      isShowWeatherBroad.value = !isShowWeatherBroad.value;
      if (isShowWeatherBroad.value) {
        toSelectList(0);

        nextTick(() => {
          const dom = document.getElementById('VoiceBroadcast');
          if (dom) useDrag(dom);
        });
      }
    }
    async function toSelectList(key) {
      activeKey.value = key;
    }
    async function getWeatherInfo() {
      const res = await getWeather();

      weatherObj.value = JSON.parse(res.weatherDataNow);
      monitorData.value = JSON.parse(res.weatherData);
    }
    onMounted(() => {
      nextTick(async () => {
        await getWeatherInfo();
      });
    });

    return {
      showWarningBroad,
      isShowWeatherBroad,
      activeKey,
      weatherObj,
      parseWeatherData,
      toSelectList,
      monitorData,
      ChartsColumnsWD,
      ChartsColumnsQY,
      ChartsColumnsFL,
      Option,
    };
  },
});
</script>
<style lang="less" scoped>
.unit {
  font-size: 15px;
  line-height: 47px;
  color: #fff;
}
.btn {
  line-height: 30px;
  cursor: pointer;
  display: flex;
}
.btn-header {
  width: 130px;
  height: 50px;
}
.weather-icon {
  width: 20px;
  height: 20px;
  margin-top: 14px;
  margin-right: 10px;
}
.broadcast {
  width: 500px;
  height: 350px;
  border-radius: 4px;
  position: fixed;
  top: 50px;
  right: 20px;
  background-color: rgb(255, 255, 255);
  background: url('../../../../assets/images/warn-dialog-bg.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 9999999;
  color: #fff;

  .title {
    text-align: center;
    padding: 0 20px;

    :deep(.ant-badge:not(.ant-badge-status)) {
      margin-right: 40px !important;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    .message-title {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      flex: 1;
    }
    .badge-box {
      display: flex;
      align-items: center;
      padding-top: 10px;
      .badge-title {
        display: inline-block;
        width: 62px;
        line-height: 32px;
        background-color: #2174f0;
        border-radius: 26px;
        text-align: center;
        color: #fff;
        padding-bottom: 2px;
      }
    }
  }

  .broadcast-context {
    .context-tab {
      display: flex;
      .context-tab-item {
        line-height: 24px;
        background: url('../../../../assets/images/tab-1.png') no-repeat center;
        border-radius: 24px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        width: 80px;
      }
      .context-tab-item-active {
        background: url('../../../../assets/images/tab-2.png') no-repeat center;
      }
    }
    .context-box {
      width: 100%;
      height: calc(100% - 32px);
      .echarts-box {
        width: 100%;
        height: 500px;
      }
    }
  }
}
:deep(.zxm-badge-count) {
  width: 0px;
  height: 0px;
}
</style>
