<template>
  <!-- 未来24小时预报 -->
  <div class="rainFutureHourP">
    <div class="partTitleHM">未来24小时预报</div>
    <div class="partContHM">
      <div id="rainFH"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { xfEachHour } from '@/api/dataAnalysis/syntherticData';
import SunWea from '@/assets/images/weather_icon/icon__00.png';
import DYWea from '@/assets/images/weather_icon/icon__01.png';
import SnowWea from '@/assets/images/weather_icon/icon__02.png';
import RainWea from '@/assets/images/weather_icon/icon__03.png';
import YTWea from '@/assets/images/weather_icon/icon__04.png';

const { proxy } = getCurrentInstance();
const chartOption = ref({
  tooltip: {
    trigger: 'axis',
    show: false,
  },
  grid: {
    top: 40,
    bottom: 30,
    left: 30,
    right: 30,
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: false,
      lineStyle: {
        width: 2,
        color: '#58b2ed',
      },
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: 'rgba(255,255,255,1)',
      fontSize: 12,
      fontFamily: 'AlibabaPuHuiTi',
    },
    data: [],
  },
  yAxis: [
    {
      type: 'value',
      name: 'mm',
      axisLabel: {
        color: 'rgba(24, 255, 255, 1)',
        show: true,
      },
      nameTextStyle: {
        color: 'rgba(24, 255, 255, 1)',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#60C2FF',
          opacity: 0.3,
        },
      },
    },
    {
      type: 'value',
      name: '℃',
      axisLabel: {
        color: '#FFB049',
        show: true,
      },
      nameTextStyle: {
        color: '#FFB049',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#60C2FF',
          opacity: 0.3,
        },
      },
    },
  ],
  // dataZoom: [{ type: 'inside', start: 0, end: 48, realtime: true, xAxisIndex: [0] }],
  series: [
    {
      data: [],
      name: '降雨量',
      type: 'bar',
      yAxisIndex: 0,
      barGap: '10%', // Make series be overlap
      barCateGoryGap: '10%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
          {
            offset: 0,
            color: 'rgba(24, 255, 255, 1)',
          },
          {
            offset: 1,
            color: 'rgba(188, 255, 255, 1)',
          },
        ]),
      },
    },
    {
      data: [],
      name: '天气',
      type: 'line',
      yAxisIndex: 1,
      markPoint: {
        symbolOffset: [0, -20],
        symbolSize: 20,
        itemStyle: {
          color: '#56ACEF',
        },
        data: [],
      },
      lineStyle: {
        opacity: 0,
      },
      itemStyle: {
        opacity: 0,
      },
    },
    {
      data: [],
      name: '温度',
      type: 'line',
      smooth: true,
      color: '#FFB049',
      yAxisIndex: 1,
    },
  ],
});

// 获取天气信息
const getWeather = () => {
  let chartDom = echarts.init(document.getElementById('rainFH'));
  xfEachHour().then(res => {
    let datas = JSON.parse(res.data).result.hourly_fcsts;
    let data1 = [],
      axisList = [],
      tempData = [],
      rainData = [],
      markPointList = [];
    datas.map((item, index) => {
      let value = item.temp_fc;
      data1.push(value);
      rainData.push(item.prec); //降水量
      axisList.push(item.data_time.slice(11, 16));
      markPointList.push({
        name: '天气',
        coord: [index, value],
        symbol: 'image://' + textToImageWea(item.text),
        animation: true,
      });
      tempData.push(item.temp_fc);
    });
    chartOption.value.xAxis.data = axisList; //x轴日期
    chartOption.value.series[1].data = data1; //天气数据降雨量
    chartOption.value.series[1].markPoint.data = markPointList; //天气标记点
    chartOption.value.series[2].data = tempData; //温度数据
    chartOption.value.series[0].data = rainData; //降水量
    chartDom.clear();
    chartDom.setOption(chartOption.value, true);
  });
};

// 天气转换
function textToImageWea(text) {
  if (text == '晴') {
    return SunWea;
  } else if (text == '阴') {
    return YTWea;
  } else if (text.includes('雪')) {
    return SnowWea;
  } else if (text.includes('雨')) {
    return RainWea;
  } else {
    // 其他都按多云处理
    return DYWea;
  }
}

onMounted(() => {
  getWeather();
});
</script>

<style lang="scss" scoped>
.rainFutureHourP {
  width: 100%;
  #rainFH {
    width: 100%;
    height: 200px;
  }
}
</style>