<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="changzhan"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in changzhanArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">时间：</div>
          <div class="search-input">
            <el-date-picker
              v-model="date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
              value-format="YYYY-MM-DD hh:mm:ss"
            />
          </div>
        </div>
        <div class="query-actions" style="margin-left: 50px">
          <button class="btn green" @click="getTableData">搜索</button>
          <button class="btn green" @click="showDetails">风速曲线</button>
        </div>
      </div>
    </div>
    <div class="df-table">
      <el-table class="custom-table" :data="tableData" height="85vh">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          width="200px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="speed"
          label="风速(m/s)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="temperature"
          label="温度(℃)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="direction"
          label="风向(°)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="humidity"
          label="湿度(%)"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pressure"
          label="气压(Pa)"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <el-dialog
      top="100px"
      title="详情"
      custom-class="modal"
      v-model="showDialog"
      width="80%"
      @closed="
        (res) => {
          showDialog = false;
          chartData = [{ title: '', yAxisIndex: 0, value: [] }];
        }
      "
    >
      <LineChart
        width="100%"
        height="600px"
        :showLegend="true"
        :units="['风速(m/s)', '时间']"
        :list="chartData"
        v-if="showDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import LineChart from "@com/chart/line/normal-line-chart.vue";
export default {
  components: {
    LineChart,
  },
  data() {
    return {
      changzhan: "",
      changzhanArray: [],
      date: [
        new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
        new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 15).formatDate(
          "yyyy-MM-dd hh:mm:ss"
        ),
      ],
      tableData: [],
      showDialog: false,
      chartData: [
        {
          title: "",
          yAxisIndex: 0,
          value: [],
        },
      ],
    };
  },
  created() {
    this.getChangeZhan();
  },
  methods: {
    // 获取场站列表
    getChangeZhan() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/station/all",
        success(res) {
          that.changzhanArray = res.data;
          that.changzhan = res.data[0].id;
          that.getTableData();
        },
      });
    },
    // 获取表格数据
    getTableData() {
      const that = this;
      if (that.date?.length) {
        that.API.requestData({
          subUrl: "weather/forecast/list",
          data: {
            station: that.changzhan,
            st: that.date[0],
            et: that.date[1],
          },
          success(res) {
            res.data.forEach((ele) => {
              ele.speed = ele.speed.toFixed(2);
              ele.temperature = ele.temperature.toFixed(2);
              ele.direction = ele.direction.toFixed(2);
              ele.humidity = ele.humidity.toFixed(2);
              ele.pressure = ele.pressure.toFixed(2);
            });
            that.tableData = res.data;
          },
        });
      } else {
        that.BASE.showMsg({
          msg: "日期不可为空",
        });
      }
    },
    showDetails() {
      let fsArray = [];
      this.tableData.forEach((ele) => {
        fsArray.push({
          text: ele.time,
          value: ele.speed,
        });
      });

      this.chartData = [
        {
          title: "风速(m/s)",
          yAxisIndex: 0,
          value: fsArray,
        },
      ];

      this.showDialog = true;
    },
  },
};
</script>
<style lang="less" scoped>
</style>