<template>
  <el-dialog
    :visible="visible"
    title="烧制温度"
    class="temperature-dialog"
    width="90%"
    @close="handleClose"
    :destroy-on-close="false"
    :close-on-click-modal="false">
    <div class="data-list">
      <BaseListTable
        v-loading="tableLoading"
        style="height: 90%"
        :table-config="{ height: '100%' }"
        :column-config="tableConfig"
        :table-data="dataList"
        @operate-event="handleOperate"
        :current-page="page"
        :current-size="size"
        :refresh-layout-key="refreshLayoutKey" />
      <el-pagination
        class=""
        style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <div class="temp-chart" style="height: 100%; overflow: hidden">
      <div id="temp-chart" class="temp-chart__inner" style="height: 100%" />
      <!-- <div id="lambda-chart" class="lambda-chart__inner" style="height: 50%; background: #f001;" /> -->
    </div>
  </el-dialog>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";
import loadChartConfig from "./configs/chart";
import tableConfig from "./configs/tableProps";
import * as echarts from "echarts";

export default {
  name: "TemperatureDialog",
  components: { BaseListTable },
  props: {},
  data() {
    return {
      visible: false,
      hisId: null,
      tableConfig,
      chart: null,
      dataList: [],
      page: 1,
      size: 100,
      tableLoading: false,
      refreshLayoutKey: 0,
      totalPage: 0,
    };
  },
  activated() {
    this.refreshLayoutKey = Math.random();
  },
  mounted() {},
  watch: {
    dataList: {
      handler: function (val) {
        this.drawChart(val);
      },
    },
  },
  methods: {
    init(id) {
      this.hisId = id;
      this.visible = true;
      this.$nextTick(() => {
        this.getList();
      });
    },
    getList() {
      this.dataList = [
        {
          code: "1",
          temp1: 39,
          press1: 12,
          press2: 10,
          remark: 9.9,
          createTime: "2021-09-09 12:00:00",
        },
        {
          code: "2",
          temp1: 49,
          press1: 11,
          press2: 32,
          remark: 9.9,
          createTime: "2021-09-09 12:00:00",
        },
        {
          code: "3",
          temp1: 59,
          press1: 32,
          press2: 43,
          remark: 39,
          createTime: "2021-09-09 12:00:00",
        },
        {
          code: "1",
          temp1: 39,
          press1: 21,
          press2: 94,
          remark: 19,
          createTime: "2021-09-09 12:00:00",
        },
        {
          code: "1",
          temp1: 22,
          press1: 55,
          press2: 42,
          remark: 98,
          createTime: "2021-09-09 12:00:00",
        },
      ];
      return;

      this.tableLoading = true;
      this.$http
        .post("/pms/kilnPosHistory/pageView", {
          page: this.page,
          limit: this.size,
          hisId: this.hisId,
        })
        .then(({ data: res }) => {
          //console.log("temp dialog res", res);

          this.tableLoading = false;
          if (res.code === 0) {
            if ("list" in res.data) {
              this.dataList = res.data.list;
              this.totalPage = res.data.total;
            } else if (Array.isArray(res.data)) {
              this.dataList = res.data;
              this.totalPage = res.data.length;
            } // else ...
          } else {
            this.dataList.splice(0);
            this.totalPage = 0;
          }
          // this.dataList = [
          //   { id: 1, code: 1, press1: 1, press2: 1, createTime: "2023-4-21 01:00:00", temp1: 1000 },
          //   { id: 2, code: 2, press1: 2, press2: 2, createTime: "2023-4-21 02:00:00", temp1: 2000 },
          //   { id: 3, code: 3, press1: 3, press2: 3, createTime: "2023-4-21 03:00:00", temp1: 3000 },
          //   { id: 4, code: 4, press1: 4, press2: 4, createTime: "2023-4-21 04:00:00", temp1: 4000 },
          //   { id: 5, code: 5, press1: 5, press2: 5, createTime: "2023-4-21 05:00:00", temp1: 5000 },
          //   { id: 6, code: 6, press1: 6, press2: 6, createTime: "2023-4-21 06:00:00", temp1: 6000 },
          //   { id: 7, code: 7, press1: 7, press2: 7, createTime: "2023-4-21 07:00:00", temp1: 7000 },
          //   { id: 8, code: 8, press1: 8, press2: 8, createTime: "2023-4-21 08:00:00", temp1: 8000 },
          //   { id: 9, code: 9, press1: 9, press2: 9, createTime: "2023-4-21 09:00:00", temp1: 9000 },
          //   { id: 10, code: 10, press1: 10, press2: 10, createTime: "2023-4-21 10:00:00", temp1: 10000 },
          //   { id: 11, code: 11, press1: 11, press2: 11, createTime: "2023-4-21 11:00:00", temp1: 11000 },
          //   { id: 12, code: 12, press1: 12, press2: 12, createTime: "2023-4-21 12:00:00", temp1: 12000 },
          // ];
        });
    },
    drawChart() {
      // 根据 dataList 绘制折线图
      if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
      // const y_data = Array(65).fill(0)
      // debugger;
      this.chart.setOption(
        loadChartConfig({
          x_data: null,
          y_data: this.dataList.map((i) => i.temp1),
        })
      );
    },
    handleOperate() {},
    handlePageChange(page) {
      this.page = page;
      this.getList();
    },
    handleSizeChange(size) {
      this.size = size;
      this.getList();
    },
    handleClose() {
      setTimeout(() => {
        this.$emit("destroy-dialog");
      }, 300);
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.temperature-dialog >>> .el-dialog__body {
  height: 70vh;
  display: flex;
}

.data-list,
.temp-chart {
  /* border: 1px solid #ccc; */
  width: 45%;
  overflow-y: auto;
  position: relative;
}

.temp-chart {
  flex: 1;
  /* margin-left: 18px; */
  padding-left: 10px;

  /* border-left: 1px solid #ccc; */
  /* background-color: lightblue; */
}
</style>
