<template>
  <div class="parameter">
    <div class="parameter-btn">
      <el-button
        class="ml10"
        type="primary"
        icon="el-icon-refresh-right"
        @click="handleInit"
        >刷新</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="isQuery = !isQuery"
        >查询</el-button
      >
    </div>
    <el-form
      v-show="isQuery"
      class="search-form"
      ref="form"
      :model="form"
      :inline="true"
      size="mini"
    >
      <el-form-item label="类型">
        <el-select v-model="type" placeholder="请选择类型">
          <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采集时间">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
          <!-- hh:mm:ss -->
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="toSearch">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="card">
      <div class="nav-title">漏缆链路及天馈接口驻波比数据趋势分析</div>
      <div id="chart1" style="width: 100%; height: 500px"></div>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column
          prop="upWave"
          label="上行漏缆故障点驻波比"
          align="center"
        />
        <el-table-column
          prop="downWave"
          label="下行漏缆故障点驻波比"
          align="center"
        />
        <el-table-column
          prop="upDistance"
          label="上行漏缆故障点距离"
          align="center"
        />
        <el-table-column
          prop="downDistance"
          label="下行漏缆故障点距离"
          align="center"
        />
        <el-table-column
          prop="reportTime"
          label="上报时间"
          width="180"
          align="center"
        />
        <!-- <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleView(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <Pagination
        :limit="params.size"
        :page="params.current"
        :total="total"
        class="pagination"
        @pagination="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { waveStatistics, distanceStatistics, samplingList } from "../api.js";
export default {
  data() {
    return {
      typeList: ["驻波比", "距离"],
      type: "驻波比",
      form: {},
      dateRange: [],
      value: "",
      options: [],
      tableData: [],
      isQuery: false,
      myChart: {
        chart1: null,
      },
      params: {
        current: 1,
        size: 10,
      },
      total: 10,
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    handleInit() {
      if (this.type == "驻波比") {
        this.handleWaveStatistics();
      } else {
        this.handleDistanceStatistics();
      }
      this.handleSamplingList();
    },
    handleLoadEchars(data) {
      if (this.myChart.chart1 != null) {
        this.myChart.chart1.dispose();
      }
      let chartDom = document.getElementById("chart1");
      this.myChart.chart1 = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.t1,
            name: data.t1Name,
            type: "line",
          },
          {
            data: data.t2,
            name: data.t2Name,
            type: "line",
          },
        ],
      };
      option && this.myChart.chart1.setOption(option);
    },
    handleView() {},
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      //  ${hours}:${minutes}:${seconds}
      return `${year}-${month}-${day}`;
    },
    async handleWaveStatistics() {
      let data = {
        startDate: "",
        endDate: "",
      };
      if (this.dateRange && this.dateRange.length <= 0) {
        data.startDate = this.formatDate(
          new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
        );
        data.endDate = this.formatDate(new Date());
      } else {
        data.startDate = this.dateRange[0];
        data.endDate = this.dateRange[1];
      }
      console.log(data);
      let res = await waveStatistics(data);
      let xData = res.map((item) => {
        return item.alarmDate;
      });
      let t1 = res.map((item) => {
        return item.upWave;
      });
      let t2 = res.map((item) => {
        return item.downWave;
      });
      this.handleLoadEchars({
        xData,
        t1Name: "上行漏缆故障点驻波比值",
        t2Name: "下行漏缆故障点驻波比值",
        t1,
        t2,
      });
    },
    async handleDistanceStatistics() {
      let data = {
        startDate: "",
        endDate: "",
      };
      if (this.dateRange && this.dateRange.length <= 0) {
        data.startDate = this.formatDate(
          new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
        );
        data.endDate = this.formatDate(new Date());
      } else {
        data.startDate = this.dateRange[0];
        data.endDate = this.dateRange[1];
      }
      let res = await distanceStatistics(data);
      let xData = res.map((item) => {
        return item.alarmDate;
      });
      let t1 = res.map((item) => {
        return item.upDistance;
      });
      let t2 = res.map((item) => {
        return item.downDistance;
      });
      this.handleLoadEchars({
        xData,
        t1Name: "上行漏缆故障点距离",
        t2Name: "下行漏缆故障点距离",
        t1,
        t2,
      });
    },
    async handleSamplingList() {
      let data = {
        startDate: "",
        endDate: "",
        ...this.params,
      };
      if (this.dateRange && this.dateRange.length <= 0) {
        data.startDate = this.formatDate(
          new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
        );
        data.endDate = this.formatDate(new Date());
      } else {
        data.startDate = this.dateRange[0];
        data.endDate = this.dateRange[1];
      }
      let res = await samplingList(this.params);
      this.tableData = res.records;
      this.total = res.total;
    },
    handlePageChange(pageData) {
      this.params.size = pageData.size;
      this.params.current = pageData.page;
      this.handleSamplingList();
    },
    getInit() {},
    reset() {},
    toSearch() {
      this.handleInit();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-title {
  color: #02a7f0;
  font-size: 20px;
  position: relative;
  padding-left: 16px;
  font-weight: bold;
  line-height: 28px;
}
.nav-title::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 1px;
  width: 5px;
  height: 100%;
  background-color: #02a7f0;
  border-radius: 4px;
}
.parameter {
  .parameter-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  .search-form {
    padding: 10px;
    background-color: #eaf1fe;
    margin-bottom: 20px;
    border-radius: 8px;
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
  }
  .card {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #d7d7d7;
  }
}
</style>