<template>
  <el-dialog
    top="50px"
    width="80%"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <div class="showTitles">
        <div class="titles">{{ partsName }}详情</div>
        <div class="model">
          <div class="selects" v-show="!switchFlag">
            <el-select
              @change="search()"
              class="inputs"
              v-model="selectValue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="choose">
            <div
              :class="switchFlag ? 'interval' : 'interval_on'"
              @click="switchChange"
            >
              等间隔
            </div>
            <div
              :class="switchFlag ? 'original_on' : 'original'"
              @click="switchChange"
            >
              原始数据
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="bodys">
      <div class="dataTitle">
        <div class="operate">
          <el-date-picker
            class="picker"
            @change="changes"
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <div class="buttons" @click="search()">查询</div>
        </div>
        <div class="buttons" @click="search('flag')">导出</div>
      </div>
      <div :id="echartsId" class="showEcharts"></div>
    </div>
  </el-dialog>
</template>
<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import XLSX from "xlsx";
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      },
    },
    partsName: Object,
    echartsId: Object,
    calc: {
      type: Number,
      default: 1,
    },
  },
  updated() {
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = date.getTime() - 28800000;
      this.timeValue[1] = date.getTime();
    }
    this.chooseTime = this.timeValue;
    this.xdata = [];
    this.values = [];
    if (this.timeValue[1] - this.timeValue[0] <= 86400000) {
      this.datas.map((item) => {
        this.xdata.push(dayjs(item.ts).format("HH:mm"));
        this.values.push(
          item.doubleValue
            ? (item.doubleValue * this.calc).toFixed(2)
            : item.doubleValue === 0
            ? item.doubleValue
            : item.longValue * this.calc
        );
      });
    } else {
      this.datas.map((item) => {
        this.xdata.push(dayjs(item.ts).format("MM-DD HH:mm"));
        this.values.push(
          item.doubleValue
            ? (item.doubleValue * this.calc).toFixed(2)
            : item.doubleValue === 0
            ? item.doubleValue
            : item.longValue * this.calc
        );
      });
    }
    this.$nextTick(() => {
      this.getEcharts();
    });
  },
  mounted() {},
  data() {
    return {
      xdata: [],
      values: [],
      timeValue: [],
      chooseTime: [],
      switchFlag: false,
      selectValue: "60",
      options: [
        {
          value: "60",
          label: "一分钟",
        },
        {
          value: "300",
          label: "五分钟",
        },
        {
          value: "600",
          label: "十分钟",
        },
        {
          value: "1800",
          label: "三十分钟",
        },
        {
          value: "3600",
          label: "一小时",
        },
        {
          value: "86400",
          label: "一天",
        },
      ],
    };
  },
  methods: {
    changes() {
      let timeValue = [];
      this.timeValue?.forEach((item) => {
        timeValue.push(dayjs(item).valueOf());
      });
      this.chooseTime = timeValue;
    },
    switchChange() {
      this.switchFlag = !this.switchFlag;
      this.selectValue = "60";
      this.search();
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    search(values) {
      let times = [];
      this.chooseTime.forEach((item) => {
        times.push(dayjs(item).valueOf());
      });
      times.length > 0
        ? this.switchFlag
          ? this.$emit("original-data", times)
          : this.$emit("search-data", times, Number(this.selectValue))
        : this.$message({
            showClose: true,
            message: "请选择查询日期",
            center: true,
            type: "error",
          });
      if (values) {
        this.$message({
          showClose: true,
          center: true,
          message: "下载中",
        });
        setTimeout(() => {
          this.export();
        }, 2000);
      }
    },
    export() {
      // 数据源
      let data = [];
      this.datas.forEach((item) => {
        let values = {
          时间: dayjs(item.ts).format("MM-DD HH:mm:ss"),
          数值: item.doubleValue,
        };
        data.push(values);
      });
      // 下载的路径
      let fileName = `${this.partsName}.xlsx`;
      let filePath = "/root/" + fileName;
      // 新建workbook
      const wb = XLSX.utils.book_new();
      // 新建worksheet，并载入数据
      const ws = XLSX.utils.json_to_sheet(data);
      // 设置每列的列宽，10代表10个字符，注意中文占2个字符
      ws["!cols"] = [{ wch: 30 }, { wch: 30 }];
      // 生成xlsx文件(workbook，worksheet数据，sheet命名)
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      // 写文件(workbook，xlsx文件路径+文件名)
      XLSX.writeFile(wb, filePath);
      this.$message({
        showClose: true,
        message: "下载成功",
        center: true,
        type: "success",
      });
    },
    getEcharts() {
      let chartDom = document.getElementById(this.echartsId);
      let myChart = echarts.init(chartDom, "#ffffff");
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          data: [this.partsName],
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: "#606769",
          textStyle: {
            color: "#B3BDC0",
            fontSize: 12,
          },
        },
        grid: {
          top: 60,
          left: 50,
          right: 50,
          bottom: 60,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              interval:
                Number((this.xdata.length / 8).toFixed(0)) > 2
                  ? Number((this.xdata.length / 8).toFixed(0))
                  : 0,
              showMinLabel: true,
              showMaxLabel: true,
              formatter: "{value}",
              fontSize: 14,
              textStyle: {
                color: "#606769",
              },
            },
            axisLine: {
              show: false,
            },
            data: this.xdata,
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
            fontSize: 14,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#606769",
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        series: [
          {
            // name: this.partsName,
            smooth: true,
            showSymbol: false,
            data: this.values,
            type: "line",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    closed() {
      this.chooseTime = [];
      this.timeValue = [];
      this.switchFlag = false;
      this.selectValue = "60";
      this.$emit("closed");
    },
  },
};
</script>

<style>
.showTitles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: -10px;
  font-size: 18px;
  color: #ffffff;
  height: 40px;
}

.titles {
  font-size: 16px;
  color: #ffffff;
}

.el-dialog__body {
  padding: 30px 10px 10px 10px;
}

.bodys {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  width: 100%;
  margin-top: -30px;
}

.showEcharts {
  width: 100%;
  height: 480px;
  /* padding-top: 20px; */
}

.dataTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.picker {
  margin-left: 20px;
  margin-right: 16px;
}

.el-date-editor .el-range-input {
  background-color: rgba(26, 26, 26, 1) !important;
  border: none;
  color: #ffffff !important;
}

.el-input__inner {
  background-color: rgba(26, 26, 26, 1) !important;
}

.el-date-editor .el-range-separator {
  color: #ffffff !important;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #ceceff !important;
}

.operate {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* margin-right: 65px; */
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  background-color: rgba(26, 26, 26, 1);
  border: 1px solid rgba(77, 77, 77, 1);
  color: #ffffff;
  margin-right: 28px;
  font-size: 12px;
}

.model {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: rgba(240, 240, 240, 1);
  font-size: 12px;
}

.el-switch {
  width: 453px;
}

.el-switch__label {
  color: #999999 !important;
}

.el-switch__label.is-active {
  color: rgba(37, 116, 219, 1) !important;
}

.selects {
  margin-right: 16px;
}

.choose {
  width: 160px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
}

.interval {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(77, 77, 77, 1);
  border-top-left-radius: 12.5px;
  border-bottom-left-radius: 12.5px;
}

.interval_on {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(29, 106, 235, 1);
  border: 1px solid rgba(29, 106, 235, 1);
  border-top-left-radius: 12.5px;
  border-bottom-left-radius: 12.5px;
}

.original {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(77, 77, 77, 1);
  border-top-right-radius: 12.5px;
  border-bottom-right-radius: 12.5px;
}

.original_on {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(29, 106, 235, 1);
  border: 1px solid rgba(29, 106, 235, 1);
  border-top-right-radius: 12.5px;
  border-bottom-right-radius: 12.5px;
}

.inputs {
  border: none;
  width: 110px !important;
}
</style>