<template>
  <div>
    <Title title="降雨预警">
      <template v-slot:title-slot>
      </template>
    </Title>
    <div ref="chartDom"  class="content-box yse-events"></div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import {useStore} from "vuex";
import Title from "../../../components/title";
//初始化Highcharts
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

let state = useStore().state;
let chartDom = ref(null);
const mychat = ref(null);
const unit = ref("")
const weather7D = ref(null)

const options =  {
  tooltip:{
    useHTML:true,
    backgroundColor:"#00000000",
    formatter:function(){
      let {name,unit} = this.series.userOptions;
      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
    }
  },
  chart: {
    backgroundColor:"#ffffff00",
    type: 'areaspline',
  },
  title: {
    text: null
  },
  credits: {
    enabled:false,
  },
  xAxis: {
    gridLineWidth: 1,
    type: 'datetime',
    gridLineColor:"#e6e6e630",
    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
    labels: {
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  yAxis: {
    min: 0,
    title: null,
    gridLineWidth: 1,
    gridLineColor:"#e6e6e630",
    labels: {
      format:"{value}",
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  legend: {
    /* 图例显示顺序反转
     * 这是因为堆叠的顺序默认是反转的，可以设置
     * yAxis.reversedStacks = false 来达到类似的效果
     */
    enabled:false,
    reversed: true,
    padding:0,
    itemStyle: {
      color: '#fff',
      fontFamily:'ArialMT'
    }
  },
  plotOptions: {
    areaspline: {
      marker: {
        radius: 0
      },
      lineWidth: 0,
      states: {
        hover: {
          lineWidth: 0
        }
      },
      threshold: null
    }
  },
  series: []
}

async function initWeather(){
  let {code,data} = await VE_API.system.weather();
  weather7D.value = data.daily;
}

function init3() {
  unit.value = "mm"
  let data = weather7D.value;
  let categories = [];
  let seritsData1 = [];
  data.forEach((item)=>{
    categories.push(item.fxDate.substring(5,10))
    seritsData1.push(parseFloat(item.precip))
  })
  options.xAxis.categories = categories;

  options.series = [{
    name:"降雨量",
    unit:"mm",
    data: seritsData1,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#0c45ee90'], // middle
        [0.5, '#46dee390'], // middle
        [1, '#e9af0090'] // end
      ]
    },
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}

onMounted(async () => {
  await initWeather()
  init3()
})


</script>

<style lang="scss" scoped>

.content-box{
  position: absolute;
  width: 100%;
  height: calc(100% - 48px - 10px);
  bottom: 0px;
}

.title-slot{
  background-image: url(@/assets/img/tabs_btn3.png);
  width: 88px;
  height: 50/16*1rem;
  border-radius: 0.25rem;
  font-size:14/16*1rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  float:right;
  text-align: center;
  box-sizing: border-box;
}

.btn{
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(180,255,251,0.6);
  width: 88px;
  height: 28px;
  .active{
    width: 88px;
    height: 28px;
    background: rgba(3,44,57,0.8);
    box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51E9F0;
  }
}

</style>
