<template>
  <div class="meteorological_top commom">
    <div class="title">
      <span>降雨量限期的定义</span>
    </div>
    <p>
      强度公式 i=0.006’2058P’0.341(1+11.9)^0.723 <span>（单位：mm/min)</span>
    </p>
    <div class="table_box">
      <div class="head">
        <span>小时</span>
        <span>分钟</span>
        <span>一年一遇</span>
        <span>两年一遇</span>
        <span>三年一遇</span>
      </div>
      <ul class="body">
        <li v-for="(item, i) in tableData" :key="i">
          <span>{{ item.hour }}</span>
          <span>{{ item.minute }}</span>
          <span>{{ item.once }}</span>
          <span>{{ item.twice }}</span>
          <span>{{ item.three }}</span>
        </li>
      </ul>
    </div>
    <div class="chart">
      <ul class="btn_list">
        <li
          v-for="(b, i) in btnList"
          :key="i"
          :class="btn2Index == i ? 'active' : ''"
          @click="changeBtn(i)"
        >
          {{ b }}
        </li>
      </ul>
      <div class="chart_box">
        <LineChart :data="chartData1"></LineChart>
      </div>
    </div>
  </div>
  <div class="meteorological_bot commom">
    <div class="title">
      <span>未来七天温湿度、风力预报</span>
    </div>
    <ul class="btn_list">
      <li
        v-for="(b, i) in btnList2"
        :key="i"
        :class="btn2Index == i ? 'active' : ''"
        @click="changeBtn2(i)"
      >
        {{ b }}
      </li>
    </ul>
    <div class="chart_box">
      <LineChart :data="chartData2"></LineChart>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted} from "vue";
import LineChart from "./LineChart.vue";
export default {
  name: "meteorological",
  components: {
    LineChart,
  },
  setup() {
    const state = reactive({
      tableData: [
        {
          hour: "1H",
          minute: "60分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
        {
          hour: "2H",
          minute: "120分钟",
          once: 33.6,
          twice: 42.06,
          three: 48.06,
        },
      ],
      btnIndex: 0,
      btnList: ["未来2小时", "未来6小时", "未来12小时", "未来一天"],
      chartData1: {
        xData: ["13:00", "13:20", "13.40", "14:00", "14:20", "14:40", "15:00"],
        info: [
          {
            y: [3.0, 4.0, 3.7, 1.2, 3.5, 2.6, 6],
            color: "rgba(70, 163, 244, 1)",
            bgColor: [
              { offset: 0.1, color: "rgba(58, 167, 255,0.8)" },
              { offset: 1, color: "rgba(58, 167, 255,0.1)" },
            ],
          },
        ],
        legendShow:false,
        yAxisShow: false,
        yLineShow: true,
        yAxisColor: ["rgba(13, 72, 146, .3)"],
        yName: "",
        smooth: false,
      },
      chartData2: {
        xData: [
          "11月11日",
          "11月12日",
          "11月13日",
          "11月14日",
          "11月15日",
          "11月16日",
          "11月17日",
        ],
        info: [
          {
            y: [15, 30, 24, 28, 35, 14, 26],
            color: "rgba(255, 69, 69, 1)",
            bgColor: [
              { offset: 0.1, color: "rgba(255, 69, 69, .8)" },
              { offset: 1, color: "rgba(255, 69, 69, .1)" },
            ],
          },
        ],
         legendShow:false,
        yAxisShow: true,
        yLineShow: true,
        yAxisColor: ["rgba(97, 96, 96, .1)"],
        yName: "%",
        smooth: true,
      },
      btn2Index: 0,
      btnList2: ["气温", "湿度", "风级"],
    });
    const changeBtn = (i) => {
      state.btnIndex = i;
    };
    const changeBtn2 = (i) => {
      state.btn2Index = i;
    };

    return {
      ...toRefs(state),
      changeBtn,
      changeBtn2,
    };
  },
};
</script>

<style lang='less' scoped>
.commom {
  .title {
    margin: 5px 0 10px 0;
    height: 30px;
    background: url("../../../../assets/Imgs/weixiufenxi_title.png") no-repeat;
    span {
      padding-left: 10px;
      line-height: 14px;
      color: var(--color-title);
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
    }
  }
}
.meteorological_top {
  padding: 10px 15px;

  p {
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #d1a716;
    span {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #516ad4;
    }
  }
  .table_box {
    margin: 10px 0;
    .head {
      display: flex;
      height: 40px;
      align-items: center;
      span {
        display: flex;
        flex: 1;
        justify-content: center;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 600;
      }
    }
    .body {
      height: 190px;
      overflow: auto;
      li {
        display: flex;
        height: 34px;
        align-items: center;
        span {
          display: flex;
          flex: 1;
          justify-content: center;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
        }
        &:nth-child(2n) {
          background: var(--color-odd);
          border-radius: 17px;
        }
      }
    }
  }
  .chart {
    .btn_list {
      display: flex;
      li {
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 30px;
        background: #aab6ce;
        border-radius: 2px;
        &.active {
          background: #1b6aef;
          color: #fff;
        }
      }
    }
    .chart_box {
      width: 100%;
      height: 150px;
    }
  }
}
.meteorological_bot {
  position: relative;
  .btn_list {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    li {
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 44px;
      height: 22px;
      background: #aab6ce;
      border-radius: 2px;
      cursor: pointer;
      &.active {
        background: #ff4545;
        color: #fff;
      }
    }
  }
  .chart_box {
    width: 100%;
    height: 190px;
  }
}
</style>