<template>
  <el-dialog
    title="历史数据"
    :visible.sync="visible"
    :append-to-body="true"
    @close="cancelhandle"
    width="1200px"
  >
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="设备名称：" prop="name" style="margin-bottom: 0">
        <el-input
          v-model="dataForm.name"
          size="mini"
          autocomplete="off"
          readOnly
        ></el-input>
      </el-form-item>
      <el-form-item label="设备编号：" prop="code" style="margin-bottom: 0">
        <el-input
          v-model="dataForm.code"
          size="mini"
          autocomplete="off"
          readOnly
        ></el-input>
      </el-form-item>
      <el-form-item label="时间范围：">
        <el-date-picker
          v-model="startTime"
          style="width: 172px"
          size="mini"
          type="date"
          @change="startChangeHandle"
          :picker-options="startPickerOptions"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
        <span style="padding: 0 10px">至</span>
        <el-date-picker
          v-model="endTime"
          style="width: 172px"
          size="mini"
          type="date"
          @change="endChangeHandle"
          :picker-options="endPickerOptions"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
        <el-button
          type="primary"
          style="margin-left: 10px"
          size="mini"
          icon="el-icon-search"
          @click="getDataList()"
          >查询</el-button
        >
        <!-- <el-button
          size="mini"
          type="primary"
          @click="handleDate(item.id)"
          v-for="(item, index) in typeList"
          :key="index"
          :class="[item.id == currentActive ? 'isActive' : '']"
          >{{ item.name }}
        </el-button> -->
      </el-form-item>
    </el-form>
    <enTable :tableData="historyData" :tableColums="tableColums"></enTable>
    <tablePagination
      :pageSize="pageSize"
      :totalSize="totalPage"
      @parentMethod="getDataList"
    ></tablePagination>
  </el-dialog>
</template>
<script>
import enTable from '../../../components/enTable'
import tablePagination from '@/pages/components/tablePagination'
const tableColums = [
  {
    label: '用电量',
    prop: 'electric_energy',
    width: 200,
    align: 'center'
  },
  // {
  //   label: '设备状态',
  //   prop: 'status',
  //   width: 200,
  //   align: 'center'
  // },
  {
    label: '采集时间',
    prop: 'create_time',
    // width:200,
    align: 'center'
  }
]
export default {
  components: {
    tablePagination,
    enTable
  },
  data() {
    return {
      startPickerOptions: {},
      endPickerOptions: {},
      startTime: '',
      endTime: '',
      visible: false,
      formLabelWidth: '0px',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {},
      historyData: [],
      tableColums,
      typeList: [
        { name: '当日', id: 1 },
        { name: '本周', id: 2 },
        { name: '当月', id: 3 },
        { name: '今年', id: 4 }
      ],
      currentActive: 1
    }
  },
  methods: {
    init(data) {
      this.visible = true
      this.dataForm = data
      this.currentActive = 1
      this.getDataList() //获取历史数据列表
    },
    getDataList(page, size) {
      this.$http({
        url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
        method: 'get',
        params: this.$http.adornParams({
          resourceId: this.dataForm.id, //资源点id
          resourceType: this.dataForm.type, //资源点类型
          startTime: this.startTime,
          endTime: this.endTime,
          page: page || this.pageIndex,
          rows: size || this.pageSize
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.historyData = data.page.records
          this.totalPage = data.page.total
        } else {
          this.historyData = []
          this.totalPage = 0
        }
      })
    },
    cancelhandle() {
      this.visible = false
    },
    // 开始时间change事件
    startChangeHandle(val) {
      if (val) {
        this.endPickerOptions = {
          disabledDate(time) {
            return time.getTime() <= new Date(val) - 8.64e7
          }
        }
      } else {
        this.endPickerOptions = {}
      }
    },
    // 结束时间change事件
    endChangeHandle(val) {
      if (val) {
        this.startPickerOptions = {
          disabledDate(time) {
            return new Date(val) <= time.getTime()
          }
        }
      } else {
        this.startPickerOptions = {}
      }
    },
    // 当日 ，本周
    handleDate(i) {
      this.currentActive = i
      this.getDataList()
    }
  }
}
</script>