<template>
  <div class="public-custom-dialog show-chart" id="showChart">
    <div class="show-data-header">
      <div class="header-time">
        <div class="time-select">
          <el-select v-model="timeValue" placeholder="请选择" size="small" @change="selectChange">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="time-picker">
          <el-date-picker
            @change="pickerChange"
            v-if="timeValue === '4'"
            size="small"
            v-model="pickerValue1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </div>
      <div class="eader-radio">
        <el-radio-group v-model="showType" size="small">
          <el-radio-button label="表格" :disabled="showlistDisable"></el-radio-button>
          <el-radio-button label="图表" :disabled="showchartDisable"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="show-data-body">
      <div id="chart" style="width:100%;height:400px;" v-show="showType === '图表'"></div>
      <div class="list-container" v-show="showType === '表格'">
        <el-table :data="tableData" class="device-topic-list" style="width: 100%">
          <el-table-column prop="time" label="时间" width="250"></el-table-column>
          <el-table-column prop="value" label="原始值">
            <template slot-scope="scope">
              <div class style="text-align: center;" v-if="dialogData.funDataType === 'IMAGE'">
                <el-image
                  :title="dialogData.fileName"
                  style="width: 40px; height: 30px; margin: 5px;cursor: default;"
                  :src="getIotFileUrl(scope.row.value)"
                  :preview-src-list="[getIotFileUrl(scope.row.value)]"
                ></el-image>
              </div>
              <div v-else>
                <span>{{returnStr(scope.row.value)}}</span>
                <span
                  style=" cursor: default; position: relative; right: -10px; color: #3a8ee6;"
                  @click="copyOnClick(scope.row.value)"
                >复制</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          @click="loadMoreData"
          v-show="tableData.length > 0"
          style="margin-top: 10px; margin-left: 44%;"
          class="load-more"
          size="small"
          v-text="loadMoreText"
          :disabled="loadMoredisable"
        ></el-button>
      </div>
    </div>
    <div class="show-data-footer">
      <el-pagination
        :small="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// import { listDeviceTimeData } from "@/api/device/device";
import { getIotFileUrl } from "@/utils/hciot";
export default {
  name: "RunStateTable",
  props: ["deviceKey", "dialogShow", "pro_type", "prodId"],
  data() {
    return {
      timeValue: "1",
      pickerValue1: "",
      tableData: [],
      loadMoreText: "已经全部加载",
      loadMoredisable: true,
      showType: "图表",
      showchartDisable: false,
      showlistDisable: false,
      showDialog: true,
      chart: null,
      row: {},
      page: {
        page: 1,
        pageSize: 100,
        total: 0
      },
      timeOptions: [
        {
          label: "1小时",
          value: "1"
        },
        {
          label: "24小时",
          value: "2"
        },
        {
          label: "7天",
          value: "3"
        },
        {
          label: "自定义",
          value: "4"
        }
      ]
    };
  },
  created() {
    this.timeValue = "1";
  },
  mounted() {
    /*this.$nextTick(function() {
      this.initDialog()
    })*/
  },
  watch: {
    /*dialogData(obj) {
      this.initDialog()
    }*/
  },
  methods: {
    getIotFileUrl,
    copyOnClick(val) {
      let self = this;
      this.$copyText(val).then(
        function() {
          self.$message({
            message: "复制成功",
            type: "success"
          });
        },
        function() {
          self.$message.error("复制失败");
        }
      );
    },
    returnStr(val) {
      if (val.length > 47) {
        return val.substring(0, 47) + "... ";
      } else {
        return val;
      }
    },
    drawLine() {
      let param = {};
      let time = {};
      switch (this.timeValue) {
        case "1":
          time.startTime = Date.parse(
            new Date(new Date().getTime() - 1 * 60 * 60 * 1000)
          );
          time.endTime = Date.parse(new Date());
          break;
        case "2":
          time.startTime = Date.parse(
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          );
          time.endTime = Date.parse(new Date());
          break;
        case "3":
          time.startTime = Date.parse(
            new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
          );
          time.endTime = Date.parse(new Date());
          break;
        default:
          time.startTime = Date.parse(this.pickerValue1[0]);
          time.endTime = Date.parse(this.pickerValue1[1]);
      }
      let listWhere = [];
      listWhere.push(
        {
          field: "time",
          operator: "gt",
          val: time.startTime,
          valType: "time"
        },
        {
          field: "time",
          operator: "lt",
          val: time.endTime,
          valType: "time"
        }
      );
      param.deviceKey = this.deviceKey;
      param.prodId = this.prodId;
      param.field = this.dialogData.funKey;
      param.orderType = 1;
      param.page = this.page.page;
      param.pageSize = this.page.pageSize;
      param.listWhere = listWhere;
      listDeviceTimeData(param).then(res => {
        let timeData = res.data.records;
        this.page.total = res.data.total;
        this.setShowChart(timeData);
        /*if(this.page.total > this.page.pageSize){
          this.getMoreTimeData(param)
        }*/
      });
    },
    setShowChart(timeData) {
      for (let item of timeData) {
        let dataItem = {
          time: this.parseTime(new Date(item.time)),
          value: item.value
        };
        this.tableData.push(dataItem);
      }
      let chartData = [...this.tableData];
      // chartData.reverse()
      let valueData = [];
      let xData = [];
      for (let point of chartData) {
        xData.push(point.time);
        valueData.push(point.value);
      }
      if (!this.chart) {
        var o = document.getElementById("showChart");
        var w = o.clientWidth || o.offsetWidth;
        document.getElementById("chart").style.width = w + "px";
        this.chart = echarts.init(document.getElementById("chart"));
      }
      this.chart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: xData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: valueData,
            type: "line"
          }
        ]
      });
    },
    loadMoreData() {},
    getMoreTimeData(param) {
      if (!this.showDialog) {
        return;
      }
      this.page.page += 1;
      param.page = this.page.page;
      listDeviceTimeData(param).then(res => {
        let timeData = res.data.data.records;
        this.page.total = res.data.data.total;
        this.setShowChart(timeData);
        if (this.page.total > this.page.pageSize * this.page.page) {
          this.getMoreTimeData(param);
        }
      });
    },
    initDialog(dialogData) {
      if (dialogData) {
        this.dialogData = dialogData;
      } else {
        return;
      }
      if (!this.dialogData.funDataType || !document.querySelector("#chart")) {
        return;
      }
      this.timeValue = "1";
      this.showDialog = true;
      this.tableData = [];
      this.page = {
        page: 1,
        pageSize: 100,
        total: 0
      };
      if (
        this.dialogData.funDataType === "TEXT" ||
        this.dialogData.funDataType === "DATE" ||
        this.dialogData.funDataType === "IMAGE"
      ) {
        this.showchartDisable = true;
        this.showType = "表格";
      } else {
        this.showchartDisable = false;
        this.showType = "图表";
      }
      this.drawLine();
    },
    handleShowDialog() {},
    close() {
      this.timeValue = "1";
      this.showDialog = false;
    },
    selectChange(val) {
      if (val !== "4") {
        this.showDialog = true;
        this.tableData = [];
        this.page = {
          page: 1,
          pageSize: 100,
          total: 0
        };
        this.drawLine();
      }
    },
    pickerChange() {
      this.showDialog = true;
      this.tableData = [];
      this.page = {
        page: 1,
        pageSize: 100,
        total: 0
      };
      this.drawLine();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.tableData = [];
      this.drawLine();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.tableData = [];
      this.drawLine();
    }
  }
};
</script>

<style scoped lang="scss">
.list-container {
  overflow: auto;
  height: 50vh;
  padding-bottom: 10px;
}
.show-data-footer {
  text-align: center;
  padding-top: 10px;
}
.show-data-header {
  margin-bottom: 15px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 32px;
  .header-time {
    display: flex;
    align-items: center;
    .time-select {
      width: 100px;
      margin-right: 8px;
    }
    .time-picker {
      width: 350px;
    }
  }
}
</style>
<style lang="scss">
.public-custom-dialog.show-chart {
  .el-dialog__body {
    padding: 15px 20px;
  }
  .el-dialog__footer {
    padding-top: 0;
  }
}
</style>
