<template>
  <div class="wf-box">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div class="temperature">20℃</div>
            <div class="temperature">40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        <div class="wf-content">
          <div>
            <div>7/28</div>
            <div>星期五</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>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
          <div>
            <div>11:00</div>
            <div><img src="../../../assets/images/weatherIcon/qw-icon.png" /></div>
            <div>0.3mm</div>
            <div class="temperature">20℃</div>
            <div>2m/s</div>
            <div>南风</div>
            <div>50%</div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
      <a-tab-pane key="3">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
      <a-tab-pane key="4">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
      <a-tab-pane key="5">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
      <a-tab-pane key="6">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
      <a-tab-pane key="7">
        <template #tab>
          <div class="tab-box">
            <div>7/27</div>
            <div>星期四</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>多云</div>
            <div>无持续风向</div>
            <div>微风</div>
            <div>20℃</div>
            <div>40℃</div>
            <div> <img src="../../../assets/images/weatherIcon/大雨.png" /> </div>
            <div>雷阵雨</div>
            <div>无持续风向</div>
            <div>微风</div>
          </div>
        </template>
        Content of Tab Pane 1</a-tab-pane
      >
    </a-tabs>
    <div class="wf-echarts-box">
      <div class="wf-echarts-title"> 预报曲线 </div>
      <div id="wf-echarts" :style="{ width: '100%', height: '280px' }"> </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from 'vue';

let activeKey = ref<String>('1');

// echarts模块
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
// 获取传参
const props = defineProps({
  weatherData: {
    type: Array,
    default: () => {
      return {};
    },
  },
});
function echarts1() {
  const chart = echarts.init(document.getElementById('wf-echarts'));
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%', //默认10%
      right: '4%', //默认10%
      bottom: '4%', //默认60
      containLabel: true,
      //grid区域是否包含坐标轴的刻度标签
    },
    legend: {
      data: ['高温', '低温'],
      textStyle: {
        fontSize: 14, //字体大小
        color: '#ffffff', //字体颜色
      },
      left: 'right',
    },
    xAxis: {
      type: 'category',
      data: ['07/20\n周一', '07/20\n周一', '07/20\n周一', '07/20\n周一', '07/20\n周一', '07/20\n周一', '07/20\n周一'],
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
    },
    yAxis: [
      {
        name: '温度：℃',
        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: 'rgba(255, 255, 255, 0.8)', //颜色
        },
      },
      {
        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: 'rgba(255, 255, 255, 0.8)', //颜色
          padding: [0, 0, 0, 30],
        },
      },
    ],
    series: [
      {
        name: '高温',
        type: 'line',
        data: [40, 32, 36, '-', '-', '-', '-'],
        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: ['-', '-', 36, 35, 22, 20, 26],
      },
      {
        name: '低温',
        type: 'line',
        data: [22, 16, 20, '-', '-', '-', '-'],
        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: ['-', '-', 20, 19, 18, 10, 8],
      },
    ],
  };
  option && chart.setOption(option);
}

// 图表方法结束
onMounted(() => {
  echarts1();
});
</script>
<style lang="less" scoped>
.wf-box {
  width: 100%;
}
.wf-box .tab-box {
  color: #fff !important;
  background-color: #06305e;
  text-align: center;
  // width: 13%;
  padding-bottom: 10px;
  img {
    display: inline-block;
    width: 20px;
  }
}
.wf-box {
  padding: 10px;
}
::v-deep(.ant-tabs-nav .ant-tabs-tab) {
  margin: 0;
  padding: 0;
  width: 13%;
  margin-left: 1.28%;
}
::v-deep(.ant-tabs-nav .ant-tabs-tab:nth-child(1)) {
  margin-left: 0%;
}
.temperature {
  background-color: #dcb640;
}
::v-deep(.ant-tabs-tab-active .tab-box) {
  background-color: rgba(0, 234, 255, 0.3) !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 rgba(0, 234, 255, 0.3);
  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 rgba(0, 234, 255, 0.3);
  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-color: #06305e;
  & > div:hover {
    background-color: rgba(23, 134, 255, 0.1);
  }
  & > div {
    width: 11%;
    text-align: center;

    & > div {
      line-height: 36px;
      color: #fff;
    }
  }
  & > div:nth-child(1) {
    width: 12%;
    background-color: rgba(8, 97, 122, 0.63);
    border-bottom: 1px solid #ddd;
  }

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