<template>
  <div class="wf-box">
    <a-tabs v-model:activeKeyType="activeKeyType">
      <a-tab-pane v-for="(item, index) in weatherData.weatherData.predict.detail" :key="index">
        <template #tab>
          <div class="tab-box">
            <div>{{ item.date }}</div>
            <div>{{ setWeek(item.date) }}</div>
            <div>
              <img
                style="width: 20px;"
                v-if="item.day.weather.temperature < 999"
                :src="showImg(item.day.weather.info)"
              />
            </div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.weather.info : '' }}</div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.wind.direct : '' }}</div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.wind.power : '' }}</div>
            <div :style="setColor(item.day.weather.temperature)" class="temperature"
              >{{ item.day.weather.temperature < 999 ? item.day.weather.temperature : '' }}℃</div
            >
            <div :style="setColor(item.night.weather.temperature)" class="temperature"
              >{{ item.night.weather.temperature }}℃</div
            >
            <div> <img style="width: 20px;" :src="showImg(item.night.weather.info)" /> </div>
            <div>{{ item.night.weather.info }}</div>
            <div>{{ item.night.wind.direct }}</div>
            <div>{{ item.night.wind.power }}</div>
          </div>
        </template>
        <div class="wf-content">
          <div>
            <div>{{ item.date }}</div>
            <div>{{ setWeek(item.date) }}</div>
            <div> <img src="../../../../assets/images/weatherIcon/js-icon.png" /> 降水</div>
            <div> <img src="../../../../assets/images/weatherIcon/qw-icon.png" />气温</div>
            <div> <img src="../../../../assets/images/weatherIcon/fs-icon.png" />风速</div>
            <div> <img src="../../../../assets/images/weatherIcon/fx-icon.png" />风向</div>
            <div> <img src="../../../../assets/images/weatherIcon/sd-icon.png" />湿度</div>
          </div>
          <template v-for="(items, indexs) in item.hour_predict" :key="indexs">
            <div v-if="indexs != 0">
              <div>{{ items[0] }}</div>
              <div><img :src="showImg2(items[1])" /></div>
              <div>{{ items[2] == '-' ? '0mm' : items[2]}}</div>
              <!-- strM -->
              <div :style="setColor(items[3])" class="temperature">{{ items[3] }}</div>
              <div>{{ items[4] }}</div>
              <div>{{ items[5] }}</div>
              <div>{{ items[6] }}</div>
            </div>
          </template>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="wf-echarts-box">
      <div class="wf-echarts-title"> 预报曲线 </div>
      <div id="wf-echarts" :style="{ width: '100%', height: '380px' }"> </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, getCurrentInstance, onMounted, reactive } from 'vue';
  import eventBus from '/@/utils/eventBus';
  eventBus.on('weather', () => {
    dataIns.name = [];
    dataIns.beforeMin = [];
    dataIns.beforeMax = [];
    dataIns.afterMin = [];
    dataIns.afterMax = [];
    setTimeout(() => {
      setEcharts();
      echarts1();
    }, 0);
  });
  let activeKeyType = ref<Number>(0);

  // echarts模块
  const { proxy } = getCurrentInstance();
  import * as echarts from 'echarts';
  // 获取传参
  const props = defineProps({
    weatherData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  // 写入颜色
  function setColor(value) {
    let str = value.replace('℃', '') * 1;
    let color = {};
    if (str <= 15) {
      color.background = '#c5f576';
      color.color = '#333';
    }
    if (str > 15 && str <= 20) {
      color.background = '#dff3bb';
      color.color = '#333';
      color.color = '#333';
    }
    if (str > 20 && str <= 25) {
      color.background = '#efdb64';
      color.color = '#333';
    }
    if (str > 25 && str <= 30) {
      color.background = '#e4ad54';
      color.color = '#333';
    }
    if (str > 30) {
      color.background = '#db9148';
      color.color = '#333';
    }

    return color;
  }
  function showImg(value) {
    // return require(`../../assets/images/weatherIcon/${value}.png`);
    return new URL(`../../../../assets/images/weatherIcon/${value}.gif`, import.meta.url).href;
  }
  function showImg2(url) {
  let urls = url.split('/')
  return new URL(`../../../../assets/images/weatherIcon/icon2/${urls[urls.length - 1]}`, import.meta.url).href;
}
  // 通过年月日获取星期几
  function setWeek(date) {
    let weeks = ['日', '一', '二', '三', '四', '五', '六'];
    let day = new Date(date || new Date()).getDay();
    return '星期' + weeks[day];
  }
  function echarts1() {
    const chart = echarts.init(document.getElementById('wf-echarts'));
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params) {
          return `<div>
            <div>
              高温（℃）：${params[0].value == '-' ? params[1].value : params[0].value}
            </div>
            <div>
              低温（℃）：${params[2].value == '-' ? params[3].value : params[2].value}
            </div>
          </div>`;
        },
      },
      grid: {
        left: '3%', //默认10%
        right: '4%', //默认10%
        bottom: '4%', //默认60
        containLabel: true,
        //grid区域是否包含坐标轴的刻度标签
      },
      legend: {
        data: ['高温', '低温'],
        textStyle: {
          fontSize: 14, //字体大小
          color: '#333', //字体颜色
        },
        left: 'right',
      },
      xAxis: {
        type: 'category',
        data: dataIns.name,
        axisLabel: {
          //x轴文字的配置
          show: true,
          textStyle: {
            color: '#333',
          },
          formatter: function (val) {
            var strs = val.split(''); //字符串数组
            var str = '';
            for (var i = 0, s; (s = strs[i++]); ) {
              //遍历字符串数组
              if (i > 5 && i < 17) {
                str += s;
              }

              if (!(i % 10)) str += '\n'; //按需要求余
            }
            if (val === getNowDate()) {
              return str + '\n' + '今天';
            } else {
              return str + '\n' + setWeek(val);
            }
          },
        },
      },
      yAxis: [
        {
          name: '温度：℃',
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: '#333',
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
              width: 1, //y轴线的宽度
              color: '#ccc',
            },
            show: true, //隐藏或显示
          },
          nameTextStyle: {
            color: '#333', //颜色
          },
        },
        {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: '#fff',
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
              width: 1, //y轴线的宽度
              color: '#484849',
            },
            show: true, //隐藏或显示
          },
          nameTextStyle: {
            color: '#333', //颜色
            padding: [0, 0, 0, 30],
          },
        },
      ],
      series: [
        {
          name: '高温',
          type: 'line',
          data: dataIns.beforeMax,
          smooth: true,
          itemStyle: {
            normal: {
              color: '#FF541B', //改变折线点的颜色
              lineStyle: {
                color: '#FF541B', //改变折线颜色
              },
            },
          },
        },
        {
          name: '高温',
          type: 'line',
          smooth: true, //关键点，为true是不支持虚线，实线就用true
          itemStyle: {
            normal: {
              color: '#FF541B', //改变折线点的颜色
              lineStyle: {
                width: 2,
                type: 'dotted', //'dotted'虚线 'solid'实线
                color: '#FF541B', //改变折线颜色
              },
            },
          },
          data: dataIns.afterMax,
        },
        {
          name: '低温',
          type: 'line',
          data: dataIns.beforeMin,
          smooth: true,
          itemStyle: {
            normal: {
              color: '#00D8F0', //改变折线点的颜色
              lineStyle: {
                color: '#00D8F0', //改变折线颜色
              },
            },
          },
        },
        {
          name: '低温',
          type: 'line',
          smooth: true, //关键点，为true是不支持虚线，实线就用true
          itemStyle: {
            normal: {
              color: '#00D8F0', //改变折线点的颜色
              lineStyle: {
                width: 2,
                type: 'dotted', //'dotted'虚线 'solid'实线
                color: '#00D8F0', //改变折线颜色
              },
            },
          },
          data: dataIns.afterMin,
        },
      ],
    };
    option && chart.setOption(option);
  }
  let dataIns = reactive({
    name: [],
    beforeMin: [],
    beforeMax: [],
    afterMin: [],
    afterMax: [],
  });
  function setEcharts() {
    dataIns.name = [];
    let tempchart = props.weatherData.weatherData.tempchart;
    // js 获取今天的年月日
    let day = getNowDate();
    console.log(day);
    // 记录今天的索引//默认100
    let dayIndex = 100;
    // props.weatherData.weatherData.tempchart
    tempchart.forEach((element, index) => {
      dataIns.name.push(element.time);
      if (element.time === day) {
        dayIndex = index;
        dataIns.beforeMin.push(element.min_temp);
        dataIns.beforeMax.push(element.max_temp);
        dataIns.afterMin.push(element.min_temp);
        dataIns.afterMax.push(element.max_temp);
      }
      if (index < dayIndex) {
        dataIns.beforeMin.push(element.min_temp);
        dataIns.beforeMax.push(element.max_temp);
        dataIns.afterMin.push('-');
        dataIns.afterMax.push('-');
      }
      if (index > dayIndex) {
        dataIns.beforeMin.push('-');
        dataIns.beforeMax.push('-');
        dataIns.afterMin.push(element.min_temp);
        dataIns.afterMax.push(element.max_temp);
      }
    });
    console.log(dataIns);
  }
  //js 获取今天，明天，后天的年月日
  function getNowDate(obj) {
    var d = new Date(); //创建 Date 对象的语法
    var vYear = d.getFullYear(); //获得当前年（4位数）
    var vMon = d.getMonth() + 1; //获得当前月（月份默认计算是从0开始，0-11代表1-12月，加1比较直观些）
    var vDay = d.getDate(); //获得当前日（1-31）
    //拼接成完整日期，格式如：2019-06-17
    var nowDate =
      vYear + '/' + (vMon < 10 ? '0' + vMon : vMon) + '/' + (vDay < 10 ? '0' + vDay : vDay);
    //返回完整日期
    return nowDate;
  }
  // 图表方法结束
  onMounted(() => {
    setEcharts();
    echarts1();
  });
</script>
<style lang="less" scoped>
  .wf-box {
    width: 100%;
  }
  .wf-box .tab-box {
    // color: #fff !important;
    background: rgba(6, 113, 221, 0.14);
    text-align: center;
    // width: 13%;
    padding-bottom: 10px;
    img {
      display: inline-block;
      width: 20px;
    }
    & > div {
      height: 21px;
    }
  }
  .wf-box {
    padding: 10px;
  }
  ::v-deep(.ant-tabs-nav) {
    width: 100%;
  }
  ::v-deep(.ant-tabs-nav .ant-tabs-tab) {
    margin: 0;
    padding: 0;
    width: 13.2%;
    margin-left: 1.28%;
  }
  ::v-deep(.ant-tabs-nav .ant-tabs-tab:nth-child(1)) {
    margin-left: 0%;
  }
  ::v-deep(.ant-tabs-nav .ant-tabs-tab-active) {
    color: #fff !important;
  }
  .temperature {
    background-color: #dcb640;
  }
  ::v-deep(.ant-tabs-tab-active .tab-box) {
    background: linear-gradient(0deg, #10aaf1 0%, #0671dd 100%) !important;
  }
  ::v-deep(.ant-tabs-ink-bar) {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 15px solid #10aaf1;
    width: 10px;
    background-color: transparent !important;
    position: relative;
    top: 0px;
    left: 5%;
  }
  ::v-deep(.ant-tabs-ink-bar) {
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #10aaf1;
    background-color: transparent !important;
  }
  ::v-deep(.ant-tabs-bar) {
    border-bottom: 0px solid #303030 !important;
  }
  .wf-content {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    background: rgba(6, 113, 221, 0.14);
    & > div:hover {
      background-color: rgba(23, 134, 255, 0.1);
    }
    & > div {
      width: 11%;
      text-align: center;

      & > div {
        line-height: 36px;
        // color: #333;
      }
    }
    & > div:nth-child(1) {
      width: 12%;
      background: rgba(6, 113, 221, 0.14);
      border-bottom: 1px solid #ddd;
      color: #0671dd !important;
    }

    img {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .wf-echarts-title {
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid rgba(19, 94, 176, 0.52);
    padding: 10px 0;
  }
  // #wf-echarts {
  //   background-color: red;
  // }
</style>
