<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" ref="query" size="mini">
      <el-form-item label="设备">
        <el-select
          v-model="watch_id"
          filterable
          placeholder="请输入设备名称"
          @change="onChange"
        >
          <el-option
            v-for="(item, index) in watchs"
            :key="index"
            :label="item.imei"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止时间">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :unlink-panels="true"
          :picker-options="pickerOptions"
          value-format="timestamp"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        ><el-button type="primary" @click="onSubmit"
          >查询</el-button
        ></el-form-item
      >
      <el-form-item><el-button @click="onReset('query')">重置</el-button></el-form-item>
    </el-form>
    <EvmHistoryChart :dataList="evmList"></EvmHistoryChart>
    <LvglHistoryChart :dataList="lvglList"></LvglHistoryChart>
  </div>
</template>
<script>
import { getWatchList, getMonitorData } from "@/api/index";
import EvmHistoryChart from "./components/EvmHistoryChart";
import LvglHistoryChart from "./components/LvglHistoryChart";
export default {
  name: "AppHistoryChart",
  data() {
    return {
      list: [],
      watch_id: null,
      isLoading: false,
      watchs: [],
      evmList: [],
      lvglList: [],
      imageList: [],
      form: {
        start: null,
        end: null,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
    };
  },
  components: {
    EvmHistoryChart,
    LvglHistoryChart,
  },
  methods: {
    fetchData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let params = {
        watch: this.watch_id,
      };
      if (this.value2 && this.value2.length) {
        if (this.value2.length > 1) {
          params.start = Math.ceil(this.value2[0] / 1000);
          params.end = Math.ceil(this.value2[1] / 1000);
        } else {
          params.start = Math.ceil(this.value2[0] / 1000);
        }
      }
      getMonitorData(params)
        .then((res) => {
          console.log("====>", res.type);
          if (res.type == "object") {
            this.evmList = res.data.evm;
            this.lvglList = res.data.lvgl;
            this.imageList = res.data.image;
          } else {
            if (params.category == "evm") this.evmList = res.data;
            else if (params.category == "lvgl") this.lvglList = res.data;
            else if (params.category == "image") this.imageList = res.data;
          }
        })
        .catch((err) => {
          this.$message.warning(err.msg);
        })
        .finally(() => {
          loading.close();
        });
    },
    fetchSelectData() {
      this.isLoading = true;
      getWatchList()
        .then((res) => {
          if (res.code == 200) this.watchs = res.data;
        })
        .catch((err) => {
          this.$message.warning(err.msg);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    onChange() {
      this.fetchData();
    },
    onAdd() {},
    onSubmit() {
      this.fetchData();
    },
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.fetchData();
    },
  },
  mounted() {},
  created() {
    this.fetchData();
    this.fetchSelectData();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>