<template>
  <div class="common-page device-manage">

    <div class="option page-row">
      <!--工具栏-->
      <div class="head-container">
        <!-- 搜索 -->
        <label class="el-form-item-label" style="font-weight: 500;">设备号</label>
        <el-input v-model="query.sensorId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
        <label class="el-form-item-label" style="font-weight: 500;">报警状态</label>
        <el-select v-model="query.alarmStatus" placeholder="请选择">
          <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
        <el-date-picker
          v-model="query.timeList"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar" style="text-align:right">
              <el-button size="mini" type="primary" icon="el-icon-refresh" @click="loadData">刷新</el-button>
              <el-button size="mini" type="success" icon="el-icon-s-data" @click="charstView">图表</el-button>
              <el-button size="mini" type="warning" icon="el-icon-document" @click="downloadFile">导出</el-button>
            </div>
            <div class="content">
              <el-table id="dataTable" :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
                <el-table-column prop="sensorname" label="设备名称" align="center"></el-table-column>
                <el-table-column prop="sensorid" label="设备编号" align="center"></el-table-column>
                <el-table-column prop="rainfall" label="检测值" align="center"></el-table-column>
                <el-table-column prop="zongliang" label="总计量" align="center"></el-table-column>
                <el-table-column label="单位" align="center">
                  <template slot-scope="scope">
                    mm
                  </template>
                </el-table-column>
                <el-table-column prop="state" label="是否报警" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.state?'报警':'正常'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="监测时间" align="center"></el-table-column>
              </el-table>
              <!--分页组件-->
              <el-pagination :total="total" :current-page="page" style="margin-top: 8px;"
                             layout="total, prev, pager, next, sizes" @size-change="sizeChange"
                             @current-change="pageChange"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="visible" :title="title" width="1200px">
      <div class="head-container">
        <!-- 搜索 -->
        <label class="el-form-item-label" style="font-weight: 500;">当前设备：</label>
        <el-select v-model="search.sensorId" placeholder="请选择">
          <el-option v-for="item in devList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
        <el-date-picker
          v-model="search.timeList"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="success" icon="el-icon-search" @click="toSearchDev">搜索</el-button>
      </div>
      <div id="chartPanel" style="width:100%;height: 600px;"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import { exportToExcel } from '@/utils/excelUtils';

export default {
  name: 'surfaceDisplacementLog',
  data() {
    const basePathUrl = window.basePathUrl || ''
    return {
      configUrl: basePathUrl + 'config/config.json',
      title: '图表',
      visible: false,
      loading: false,
      stuOpts: [
        {label: '全部', value: undefined},
        {label: '报警', value: 1},
        {label: '正常', value: 0},
      ],
      page: 1,
      size: 10,
      total: 0,
      query: {},
      tableData: [],
      search: {
        sensorId: '',
        timeList: '',
      },
      devList: [],
      myChart: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData();
    })
  },
  methods: {
    loadData() {
      var param = this.query;
      param.page = this.page - 1;
      param.pageSize = this.size;
      param.startTime = undefined;
      param.endTime = undefined;
      if(param.timeList && param.timeList.length){
        param.startTime = param.timeList[0];
        param.endTime = param.timeList[1];
      }
      this.$nextTick(() => {
        HttpReq.truckDispatching.slopeGetRG(param).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      })
    },
    charstView() {
      this.devList=[];
      this.title = '图表';
      this.visible = true;
      HttpReq.truckDispatching.slopeGetRGdevList().then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item)=>{
            this.devList.push({
              lable: item.equipno,
              value: item.equipno,
            });
          });
          this.search.sensorId = this.devList[0].value;
          this.toSearchDev();
        }
      })
    },
    toSearchDev(){
      var param = this.search;
      param.startTime = undefined;
      param.endTime = undefined;
      if(param.timeList && param.timeList.length){
        param.startTime = param.timeList[0];
        param.endTime = param.timeList[1];
      }
      this.$nextTick(() => {
        HttpReq.truckDispatching.slopeGetRGdevData(param).then((res) => {
          if (res.code == 200 && res.data) {
            let option = {
              color: [
                '#ff3c3c',
                '#ffd700',
                '#00bfff',
              ],
              tooltip: {
                trigger: 'axis',
                position: function (pt) {
                  return [pt[0], '10%'];
                }
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: { show: false },
                  magicType: { type: ['line', 'bar'] },
                  restore: { show: false },
                  saveAsImage: { show: false },
                  dataZoom: { show: false },
                }
              },
              legend: {
                data: ['X', 'Y', 'Z']
              },
              xAxis: {
                type: 'time',
                boundaryGap: false,
                splitLine:{
                  show:false,
                }
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                axisLine:{
                  show:false,
                }
              },
              dataZoom: [
                {
                  show: true,
                  realtime: true,
                  start: 0,
                  end: 100,
                  moveOnMouseMove: false,
                },
                {
                  type: 'inside',
                  realtime: true,
                  start: 0,
                  end: 100,
                  moveOnMouseMove: false,
                }
              ],
              series: [
                {
                  name: '检测值',
                  type: 'line',
                  data:  res.data.x
                }
              ]
            };
            let myChart = echarts.init(document.getElementById('chartPanel'));
            myChart.setOption(option);
          }
        })
      })
    },
    downloadFile() {
      exportToExcel("历史降雨量监测", document.querySelector('#dataTable'), this);
    },
    cancelForm() {
      this.visible = false;
    },
    tableRowClassName({row, rowIndex}) {
    },
    // 点击搜索
    toSearch() {
      this.page = 1;
      this.loadData();
    },
    // 重置搜索
    clearLimit() {
      this.query = {};
      this.loadData()
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.loadData()
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.cell-input {
  //min-width: 220px;
}

.form-cell {
  margin: 0 !important;
  width: 100%;
}

.grid-content {
  //border: 1px solid rgba(100, 100, 100, 0.1);
  padding: 5px 30px;
}

.cell-box .el-input__inner {
  border: 1px solid rgba(100, 100, 100, 0.1);
}

.cell-box .el-input.is-disabled .el-input__inner {
  border: 1px solid rgba(100, 100, 100, 0.1);
  background: white;
  cursor: text;
}

.cell-box .el-input.is-disabled .el-input__icon {
  cursor: text;
}

.cell-box .el-icon-arrow-up:before {
  content: '';
}

.mapcontainer {
  height: 30vh;
  width: 680px;
  overflow: hidden;
}
</style>
