<template>
  <div class="liquid-container">
    <div class="top-div">
      <div class="left">
        <h1>当前实时预报</h1>
        <div class="flex1 ">
          <div class="mr20">
            <img src="../assets/cloud.png" width="66px" alt="">
          </div>
          <div class="cur-temp mr20">
            14℃
          </div>
          <div class="ti">
            <p>多云</p>
            <p>体感温度：13℃</p>
          </div>
        </div>
        <div class="today">
          今天大部分地区天气晴朗。 最低气温9°
        </div>
        <ul>
          <li>
            <p>空气质量</p>
            <p>56</p>
          </li>
          <li>
            <p>风速</p>
            <p>北风 1级</p>
          </li>
          <li>
            <p>湿度</p>
            <p>67%</p>
          </li>
          <li>
            <p>能见度</p>
            <p>4.4 公里</p>
          </li>
          <li>
            <p>气压</p>
            <p>962 hPa</p>
          </li>
          <li>
            <p>露点</p>
            <p>8°</p>
          </li>
        </ul>
      </div>
      <div class="right">

      </div>
    </div>
    <div class="middle-div">
      <h2>
        未来7天预报
      </h2>
      <div class="flex">
        <div class="one-day" v-for="item in weekDay" :key="item">
          <p>
            {{ item.day }}{{ item.date }}
          </p>
          <div class="flex ">
            <span class="weather-icon">
              <img src="../assets/cloud.png" alt="">
            </span>
            <span class="high-low">
              <p>{{ item.high }}</p>
              <p>{{ item.low }}</p>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-div">
      <div id="echartDiv" class="echartDiv100"></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue";
import Process from "./Process.vue";
import Date from "@/components/Date.vue";
export default {
  name: "Flow",
  components: {
    BarEchart,
    Process,
    Date
  },
  setup() {
    const state = reactive({
      weekDay: [
        {
          day: '今晚',
          date: '27日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周六',
          date: '28日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周天',
          date: '29日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周一',
          date: '30日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周二',
          date: '31日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周三',
          date: '1日',
          icon: '',
          high: '23°',
          low: '9°'
        }, {
          day: '周四',
          date: '2日',
          icon: '',
          high: '23°',
          low: '9°'
        }
      ]
    });
    onMounted(async () => { getWeatherCharts() });
    const getWeatherCharts = () => {
      var dom = document.getElementById("echartDiv");
      var op = {
        title: {
          text: '未来一周天气图'
        },
        grid: {
          left: "3%", //画布左移位置
          right: '3%',
          top: "20%",
          width: "90%", //画布宽度
          height: "65%", //画布高度
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '最高点',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '最低点',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      };
      getEchart(dom, op)
    }
    const getEchart = (dom, op) => {
      if (dom) {
        var myChart = echarts.init(dom);
        var option = op;

        option && myChart.setOption(option);
      }
    };
    return {
      ...toRefs(state),
      getWeatherCharts,
      getEchart
    };
  },
};
</script>

<style lang="scss" scoped>
.liquid-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  // border-color: #5C8AB3;
  .top-div {
    width: 100%;
    height: 35%;
    // border: 1px solid rgb(58, 152, 230);
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      width: 49.8%;
      border: 1px solid rgb(58, 152, 230);
      padding: 20px;
    }

    h1 {
      width: 100%;
      text-align: center;
      font-size: 30px;
    }

    .flex1 {
      display: flex;
      align-items: center;
      padding: 10px;

      .cur-temp {
        font-size: 56px;
      }

      .ti {
        font-size: 18px;
      }
    }

    .today {
      font-size: 18px;
      padding: 10px;
    }

    ul {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;

      li {
        padding: 10px;
        font-size: 22px;
        width: 16%;
        text-align: center;
      }
    }
  }

  .middle-div {
    width: 100%;
    height: 25%;
    // border: 1px solid rgb(58, 152, 230);
    font-size: 26px;
    padding: 20px;

    h2 {
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
      font-size: 30px;
    }

    .one-day {
      width: 13%;
      height: 120px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgb(58, 152, 230);
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      line-height: 40px;

      .weather-icon {
        display: inline-block;
        height: 46px;

        img {
          margin-right: 20px;
          height: 100%;
        }
      }

      .high-low {
        font-size: 20px;
      }
    }
  }

  .bottom-div {
    width: 100%;
    height: 40%;
    // border: 1px solid red;

    .echartDiv100 {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
  }
}</style>
