<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><h3><i class="el-icon-tickets" />实时数据综合查询</h3></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div class="handle-box">
        <el-select v-model="ef" placeholder="请选择场站" class="handle-select mr10" @change="changeEf">
          <el-option
            v-for="item in this.electricFieldData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="dt" placeholder="请选择查询对象" class="handle-select mr10" @change="changeDt">
          <el-option
            v-for="item in this.dataObjectType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="dateTime"
          :clearable="false"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-select v-model="intervalTime" :filterable="true" placeholder="请选择导出数据间隔" prop="intervalTime">
          <el-option
            v-for="item in intervalTimeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" size="small" icon="el-icon-search" @click="doSearch">查询</el-button>
        <el-button type="primary" size="small" icon="el-icon-download" @click="dataDownload">导出</el-button>
        <el-button type="primary" size="small" icon="el-icon-edit" @click="jumpSetOrder">设置排序</el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        height="460px"
        @filter-change="filterChange"
      >
        <el-table-column
          type="index"
          fixed
        />
        <el-table-column
          :formatter="dataObjectFormatter"
          :filters="dataObject"
          :filter-method="filterHandler"
          label="设备名称"
          fixed
          sortable
          column-key="diiId"
          prop="diiId"
          min-width="150"
          header-align="center"
        />
        <el-table-column
          :formatter="dateTimeFormatter"
          label="接入时间"
          fixed
          sortable
          prop="time"
          min-width="140"
          header-align="center"
        />
        <template v-for="(col) in items">
          <el-table-column
            :prop="col.id"
            :label="col.name"
            min-width="150"
            header-align="center"
          />
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10,25,50,100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!--:model 为绑定到该表单的数据； ref为表单名称，在保存时传入表单名称-->
      <el-dialog
        id="sortid"
        :visible.sync="addVisible"
        :before-close="closeDialogAdd"
        title="设置排序"
        width="1200px"
      >
        <el-form ref="form" label-width="60px" />
        <div class="drag-box-item">
          <div class="item-title">全部数据类型</div>
          <draggable v-model="todo" :options="dragOptions">
            <transition-group id="todo" tag="div" class="item-ul">
              <div v-for="(item,index) in todo" :key="index" class="drag-list">
                {{ item.name }}
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="drag-box-item">
          <div class="item-title">列表显示顺序设置</div>
          <draggable v-model="done" :options="dragOptions" @remove="removeHandle">
            <transition-group id="done" tag="div" class="item-ul">
              <div v-for="(item,index) in done" :key="index" class="drag-list">
                {{ item.name }}
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFrom()">取 消</el-button>
          <el-button type="primary" @click="saveSetOrder()">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import draggable from 'vuedraggable'

Vue.prototype.globalClick = function(callback) {
  document.getElementById('sortid').onclick = function() {
    callback()
  }
}
export default {
  name: 'IndexVue',
  components: {
    draggable
  }, data() {
    return {
      ef: '',
      dt: '',
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime()],
      items: [],
      tableData: [],
      loading: false,
      dataObjectType: [
        { value: 'WeatherStation', label: '气象站' },
        { value: 'AnemometerTower', label: '测风塔' },
        { value: 'DtaInverter', label: '逆变器' }
      ],
      dataObject: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableAllData: [],
      tableFilterData: [],
      electricFieldData: [],
      addVisible: false,
      dragOptions: {
        animation: 120,
        scroll: true,
        group: 'sortlist',
        ghostClass: 'ghost-style'
      },
      todo: [],
      done: [],
      doneIndex: '',
      intervalTime: 1,
      intervalTimeData: [
        { value: 1, label: '一分钟' },
        { value: 5, label: '五分钟' },
        { value: 15, label: '十五分钟' }
      ]
    }
  },
  computed: {},
  created() {
    this.getElectricFieldInfo()
  },
  mounted: function() {
    // 禁止拖拽后在浏览器新开标签窗口
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
    getTableData() {
      this.tableData = this.tableFilterData.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    dataObjectFormatter(row, column) {
      let belongTo = '未知设备'
      for (let i = 0; i < this.dataObject.length; i++) {
        if (row.diiId == this.dataObject[i].value) {
          belongTo = this.dataObject[i].text
        }
      }
      return belongTo
    },
    // 表格时间戳转日期
    dateTimeFormatter(row, column, cellValue, index) {
      return this.$moment(new Date(parseInt(cellValue))).format('YYYY-MM-DD HH:mm:ss')
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    filterChange(value) {
      //                console.log(value)
      if (value.diiId.length == 0) {
        this.tableFilterData = this.tableAllData
      } else {
        // 过滤，挑选出满足条件的元素项
        this.tableFilterData = this.tableAllData.filter(function(item, index, array) { // 返回数组，filter函数获取满足条件的项
          let result = false
          for (var i in value.diiId) {
            if (value.diiId[i] == item.diiId) {
              result = true
              break
            }
          }
          return result
        })
      }
      this.total = this.tableFilterData.length
      this.getTableData()
    },
    changeEf() {
      for (var i = 0; i < this.electricFieldData.length; i++) {
        if (this.electricFieldData[i].id == this.ef) {
          if (this.electricFieldData[i].type == 'Photovoltaic') {
            this.dataObjectType = [
              { value: 'WeatherStation', label: '气象站' },
              { value: 'DtaInverter', label: '逆变器' }
            ]
            this.dt = 'WeatherStation'
          } else {
            this.dataObjectType = [
              { value: 'AnemometerTower', label: '测风塔' },
              { value: 'DtaInverter', label: '逆变器' }
            ]
            this.dt = 'AnemometerTower'
          }
          this.changeDt()
        }
      }
    },
    changeDt() {
      this.$axios.all([this.getDataObject(), this.getItems()])
        .then(this.$axios.spread((p1, p2) => {
          this.dataObject = p1.data
          this.items = p2.data
        })).catch((error) => {
          console.log(error)
        })
      this.tableData = []
      this.todo = []
      this.done = []
      this.doSearch()
    },
    doSearch() {
      if (this.ef == '' || this.ef == null) {
        this.$message.info('请选择查询场站')
        return
      }
      if (this.dt == '' || this.dt == null) {
        this.$message.info('请选择查询对象')
        return
      }
      if (this.dateTime == '' || this.dateTime == null) {
        this.$message.info('请选择查询时间')
        return
      }
      if (this.intervalTime == '' || this.intervalTime == null) {
        this.$message.info('请选择查询间隔时间')
        return
      }
      const formData = new FormData()
      formData.append('intervalTime', this.intervalTime)
      formData.append('efiId', this.ef)
      formData.append('dataObjectType', this.dt)
      formData.append('startTime', this.dateTime[0].getTime())
      formData.append('endTime', this.dateTime[1].getTime() + 60 * 60 * 24 * 1000 - 1000)

      this.loading = true
    },
    efFormatter(row, column, cellValue, index) {
      for (var i = 0; i < this.electricFieldData.length; i++) {
        if (this.electricFieldData[i].id == cellValue) {
          return this.electricFieldData[i].name
        }
      }
      return cellValue
    },
    getDataObject() {
      const formData = new FormData()
      formData.append('efiId', this.ef)
      formData.append('dataObjectType', this.dt)
    },
    getItems() {
      const formData = new FormData()
      formData.append('efiId', this.ef)
      formData.append('dataObjectType', this.dt)
    },
    dataDownload() {
      if (this.ef == '' || this.ef == null) {
        this.$message.info('请选择查询场站')
        return
      }
      if (this.dt == '' || this.dt == null) {
        this.$message.info('请选择查询对象')
        return
      }
      if (this.dateTime == '' || this.dateTime == null) {
        this.$message.info('请选择查询时间')
        return
      }
      if (this.intervalTime == '' || this.intervalTime == null) {
        this.$message.info('请选择查询间隔时间')
        return
      }
      this.loading = true
    },
    // 查询场站信息
    getElectricFieldInfo() {

    },
    removeHandle(event) {
      this.todo[event.newIndex].totalType = ''
      var tempName = this.todo[event.newIndex].name
      const tempNameArgs = tempName.indexOf('(')
      if (tempNameArgs > -1) {
        tempName = tempName.substring(0, tempNameArgs)
      }
      this.todo[event.newIndex].name = tempName
      // this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `)
    },
    // 设置顺序
    jumpSetOrder() {
      // 查询所有气象站类型
      this.getDataTypeSortUp()
      this.addVisible = true
    },
    saveSetOrder() {

    },
    closeDialogAdd() {
      this.getDataTypeSortUp()
      this.addVisible = false
    },
    closeFrom() {
      this.addVisible = false
    }
  }
}
</script>

<style scoped>

</style>
