<template>
  <div class="history-line-modal">
    <div style="padding-left: 3%">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="查询步长">
          <el-select
            style="width: 100%;"
            v-model="formInline.step"
            placeholder="查询步长"
            popper-class="jg-select"
            :popper-append-to-body="false"
          >
            <el-option :label="item.name" :value="item.value" v-for="(item, index) in stepList" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择查询时间">
          <el-date-picker
            v-model="formInline.dateRange"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            popper-class="history-date-picker"
            :append-to-body="false"
            :clearable="false"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
<!--      <div>-->
<!--        &lt;!&ndash; 图表容器 &ndash;&gt;-->
<!--        <div ref="chart" style="width: 100%; height: 400px;"></div>-->
<!--        &lt;!&ndash; 打印按钮 &ndash;&gt;-->
<!--        <button @click="printChart">打印图表</button>-->
<!--      </div>-->
    </div>
    <div class="line-chart">
      <jg-chart _height="100%" :option="option" v-loading="chartLoading"/>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import JgChart from '@/components/JgChart'
import { historyChartData } from '@/api/HistoryData'

export default {
  name: 'HistoryLineModal',
  components: { JgChart },
  props: {
    collectEntity: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      stepList: [
        { name: '2s', value: 2 },
        { name: '1min', value: 60 },
        { name: '30min', value: 1800 },
        { name: '1h', value: 3600 },
      ],
      formInline: {
        dateRange: [
          moment().subtract(1, 'days').valueOf(),
          moment().valueOf()
        ],
        step: 60
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(1, 'hours'), moment()])
          }
        }, {
          text: '最近六小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(6, 'hours'), moment()])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(24, 'hours'), moment()])
          }
        }]
      },
      chartLoading: false,
      historyChartData: [],
    }
  },
  computed: {
    option() {
      const option = {
        color: ['#c71016', '#37A2FF', '#80FFA5', '#00DDFF', '#FFBF00', '#FF0087'],
        legend: {
          right: '4%',
          icon: 'roundRect',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.historyChartData.map(e => e.dateTime),
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: {
                x: 1,
                y: 0,
                colorStops: [{
                  offset: 0,
                  color: '#AAA7A7' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 0% 处的颜色
                }]
              },
            }
          },
        },
        yAxis: {
          // name: this.collectEntity,
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: {
                x: 0,
                y: 0,
                colorStops: [{
                  offset: 0,
                  color: '#AAA7A7' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 0% 处的颜色
                }]
              },
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: {
                x: 1,
                y: 1,
                colorStops: [{
                  offset: 1,
                  color: '#AAA7A7' // 100% 处的颜色
                }, {
                  offset: 0,
                  color: '#FFFFFF' // 0% 处的颜色
                }]
              },
            },
          },
        },
        series: []
      }
      for (const item of this.collectEntity.tagList) {
        const key = item.tableColumn.toLowerCase()
        const data = {
          name: item.desc,
          type: 'line',
          data: this.historyChartData.map(e => e[key])
        }
        option.series.push(data)
      }
      return option
    },
  },
  methods: {

    // 打印图表
    printChart() {
      if (!this.chart) return;

      // 获取图表图片 URL
      const dataURL = this.chart.getDataURL({
        type: "png",
        pixelRatio: 2, // 提高图片清晰度
        backgroundColor: "#fff", // 设置背景颜色
      });

      // 创建新窗口用于打印
      const printWindow = window.open("", "_blank");
      const style = `
        <style>
          body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100%; }
          img { width: 100%; max-width: 800px; }
        </style>
      `;
      printWindow.document.write(`${style}<img src="${dataURL}" />`);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },


    fetchData() {
      this.chartLoading = true
      const params = {
        entityId: this.collectEntity.id,
        start: this.formInline.dateRange[0].valueOf(),
        end: this.formInline.dateRange[1].valueOf(),
        step: this.formInline.step
      }
      historyChartData(params).then(res => {
        if (res && res.code === '200') {
          console.log('historyChartData =>', res.data)
          this.historyChartData = res.data
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.chartLoading = false
      })
    },
    initData() {
      this.formInline.dateRange = [
        moment().subtract(1, 'days').valueOf(),
        moment().valueOf()
      ]
      this.fetchData()
    }
  },
}
</script>

<style lang="less" scoped>
  .history-line-modal {
    height: calc(100% - 8px);
    display: flex;
    flex-direction: column;

    .line-chart {
      flex: 1;
    }

    .jg-btn-group {
      display: flex;
      padding: 1px;
      text-align: center;
      margin-top: 32px;
      justify-content: flex-end;

      .jg-btn {
        height: 40px;
        line-height: 40px;
        margin-left: 16px;
        padding: 0 24px;
        cursor: pointer;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
        box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
      }

      .jg-btn:active {
        color: #FFFFFF;
        background-color: #A20D13;
        box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;
      }
    }

    /deep/ .el-input__inner {
      background-color: #ebebeb;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
      border: none;
      font-size: 16px;
      color: #333333;
    }

    /deep/ .el-select-dropdown__item.selected {
      font-weight: normal;
      color: #FFFFFF;
      background-color: #A20D13;
      border-radius: 5px;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
    }

    /deep/ .history-date-picker {
      left: 10% !important;
      background-color: #EBEBEB;
      box-shadow: 0.05rem 0.05rem 0.1rem #AAA7A7, -0.05rem -0.05rem 0.1rem #FFFFFF;

      .el-picker-panel__sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 110px;
        border-right: 1px solid #e4e4e4;
        box-sizing: border-box;
        padding-top: 6px;
        background-color: transparent;
        overflow: auto;
      }

      .today {
        div {
          span {
            color: #A20D13;
            font-weight: bolder;
          }
        }
      }

      .start-date, .end-date {
        div {
          span {
            color: #A20D13;
            font-weight: bolder;
            background-color: #EBEBEB;
            box-shadow: 0.05rem 0.05rem 0.1rem #AAA7A7, -0.05rem -0.05rem 0.1rem #FFFFFF;
          }
        }
      }

      .el-picker-panel__footer {
        border-top: 1px solid #e4e4e4;
        padding: 4px;
        text-align: right;
        background-color: #ebebeb;
        position: relative;
        font-size: 0;
      }

      .el-picker-panel__shortcut {
        display: block;
        width: 90%;
        border: 0;
        border-radius: 5px;
        background-color: transparent;
        line-height: 28px;
        font-size: 14px;
        color: #606266;
        padding-left: 12px;
        text-align: left;
        outline: 0;
        cursor: pointer;
        margin: 8px 5px;
        box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #ffffff;
      }

      .el-button--text {
        color: #A20D13;
      }

      .el-button--default {
        color: #FFF;
        background-color: #A20D13;
      }

      .el-button.is-plain:focus, .el-button.is-plain:hover {
        border-color: transparent;
        color: #FFF;
      }
    }

    /deep/ .popper__arrow {
      display: none;
    }

    /deep/ .el-range-editor .el-range-input {
      line-height: 1;
      background-color: transparent;
    }

    /deep/ .el-date-editor .el-range__icon {
      color: inherit;
    }

    .el-button {
      border: none;
      background-color: #EBEBEB;
      box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
    }

    .el-button:active {
      color: #FFF;
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
    }

    .el-button:focus, .el-button:hover {
      color: #606266;
      border-color: transparent;
      /*background-color: #A20D13;*/
    }

    /deep/ .jg-select {
      padding: 10px;
      background-color: #ebebeb;
      box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;

      .el-select-dropdown__item {
        box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
        margin: 8px 3px;
        border-radius: 5px;
      }
    }

    /deep/ .el-select-dropdown__item.selected {
      font-weight: normal;
      color: #FFFFFF;
      background-color: #A20D13;
      border-radius: 5px;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
    }

    /deep/ .popper__arrow {
      display: none;
    }
  }
</style>
