<template>
  <div class="box">
    <h3>架次信息的监控数据和故障监测</h3>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="回放速度">
        <el-select
          v-model="speed"
          placeholder="请选择回放速度"
          @change="changeSpeed"
        >
          <el-option
            v-for="item in speedOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          clearable
          v-model="queryParams.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          clearable
          v-model="queryParams.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "dataPlayBack",
  data() {
    return {
      //eCharts
      myChart: "",
      //回放速度
      speed: 2000,
      //回放速度的选择器
      speedOption: [
        { label: "X0.25", value: 8000 },
        { label: "X0.5", value: 4000 },
        { label: "X1.0", value: 2000 },
        { label: "X1.5", value: 1500 },
        { label: "X2.0", value: 1000 },
      ],
      // 查询参数
      queryParams: {
        startTime: '2023-01-02 00:00:00',
        endTime: '2023-01-02 06:00:00',
      },
      // 显示搜索条件
      showSearch: true,
    };
  },
  mounted() {
    this.creatECharts();
  },
  methods: {
    creatECharts() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      var dom = document.getElementById("main");
      this.myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      let option;
      const a = [
        ["Income", "Life Expectancy", "Population", "Country", "Year"],
        [615, 34.05, 251014, "Finland", "2023-01-02 00:00:00"],
        [315, 34.05, 251014, "Finland", "2023-01-02 01:00:00"],
        [725, 34.05, 251014, "Finland", "2023-01-02 02:00:00"],
        [315, 34.05, 251014, "Finland", "2023-01-02 03:00:00"],
        [515, 34.05, 251014, "Finland", "2023-01-02 04:00:00"],
        [815, 34.05, 351014, "Finland", "2023-01-02 05:00:00"],
        [1815, 34.05, 351014, "Finland", "2023-01-02 06:00:00"],
        [814, 39, 645526, "France", "2023-01-02 00:00:00"],
        [144, 39, 645526, "France", "2023-01-02 01:00:00"],
        [454, 39, 645526, "France", "2023-01-02 02:00:00"],
        [734, 39, 645526, "France", "2023-01-02 03:00:00"],
        [144, 39, 645526, "France", "2023-01-02 04:00:00"],
        [999, 39, 645526, "France", "2023-01-02 05:00:00"],
        [814, 39, 645526, "France", "2023-01-02 06:00:00"],
      ];
      let that = this;
      run(a);

      function run(_rawData) {
        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
        const countries = ["Finland", "France"];
        const datasetWithFilters = [];
        const seriesList = [];
        echarts.util.each(countries, function (country) {
          var datasetId = "dataset_" + country;
          datasetWithFilters.push({
            id: datasetId,
            fromDatasetId: "dataset_raw",
            transform: {
              type: "filter",
              config: {
                and: [
                  {
                    dimension: "Year",
                    gte:that.queryParams.startTime,
                    parser: 'time'
                    
                  },
                  {
                    dimension: "Year",
                    lt:that.queryParams.endTime,
                    parser: 'time'
                  },
                  { dimension: "Country", "=": country },
                ],
              },
            },
          });
          seriesList.push({
            type: "line",
            datasetId: datasetId,
            showSymbol: false,
            name: country,
            endLabel: {
              show: true,
              formatter: function (params) {
                return params.value[3] + ": " + params.value[0];
              },
            },
            labelLayout: {
              moveOverlap: "shiftY",
            },
            emphasis: {
              focus: "series",
            },
            encode: {
              x: "Year",
              y: "Income",
              label: ["Country", "Income"],
              itemName: "Year",
              tooltip: ["Income"],
            },
          });
        });
        option = {
          animationDuration: that.speed,
          dataset: [
            {
              id: "dataset_raw",
              source: _rawData,
            },
            ...datasetWithFilters,
          ],
          title: {
            text: "",
          },
          tooltip: {
            order: "valueDesc",
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            nameLocation: "middle",
          },
          yAxis: {
            name: "Income",
          },
          grid: {
            right: 140,
          },
          series: seriesList,
        };
        that.myChart.setOption(option);
      }
    },
    // 表单重置
    reset() {
      this.form = {
        startTime: null,
        endTime: null,
      };
      this.resetForm("form");
    },
    //选择事件
    changeSpeed(value) {
      this.speed = value;
      this.creatECharts();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.creatECharts();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style scoped>
.box {
  width: 1200px;
  height: 600px;
  text-align: center;
}

#main {
  width: 1200px;
  height: 600px;
}
</style>
