<template>
  <!-- 未来24小时预报 -->
  <div class="rainFutureHourP">
    <div class="partTitleHM">
      未来24小时预报
      <el-button size="small" style="float: right; width: 80px; margin: 10px 50px 0px 0px" @click="dialogShowYJ = true">
        发布应急响应
      </el-button>
      <el-button size="small" style="float: right; width: 70px; margin: 10px 10px 0px 0px" @click="dialogShowModal = true">
        内涝模型
      </el-button>
    </div>
    <div class="partContHM">
      <div id="rainFH"></div>
    </div>
  </div>

  <!-- 内涝模型 -->
  <el-dialog title="内涝模型" v-model="dialogShowModal" width="1800px" append-to-body>
    <RiskDetail v-if="dialogShowModal"></RiskDetail>
  </el-dialog>

  <!-- 发布应急响应 -->
  <el-dialog title="发布应急响应通知" v-model="dialogShowYJ" width="700px" append-to-body>
    <ResponseYJ v-if="dialogShowYJ"></ResponseYJ>
  </el-dialog>
</template>

<script setup>
import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
import ResponseYJ from './responseYJ.vue'; //发布应急响应
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 dialogShowModal = ref(false);
const dialogShowYJ = ref(false);
const chartOption = ref({
  tooltip: {
    trigger: 'axis',
    show: true,
  },
  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: '降雨量mm',
      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 = [],
      dataText = [],
      axisList = [],
      tempData = [],
      rainData = [],
      markPointList = [];
    datas.map((item, index) => {
      let value = item.temp_fc;
      data1.push(value);
      dataText.push(item.text);
      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[0].data = rainData; //降水量
    chartOption.value.yAxis[0].max = Math.max(...rainData);
    chartOption.value.series[1].data = dataText; //天气现象
    chartOption.value.series[1].markPoint.data = markPointList; //天气标记点
    chartOption.value.series[2].data = tempData; //温度数据
    chartDom.clear();
    chartDom.setOption(chartOption.value, true);
  });
};

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

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

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