<template>
  <div class="app-container">
    <el-date-picker v-model="devicehtime" type="date" placeholder="选择日期" style="width: 15%;"></el-date-picker>--<el-time-picker v-model="devicetime" placeholder="选择时间" style="width: 15%;"></el-time-picker>
    <el-select v-model="data_device_type" placeholder="报警类型">
      <el-option v-for="item in device_type" :key="item.id" :label="item.status_name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="data_device_quyu" placeholder="区域">
      <el-option v-for="item in device_quyu" :key="item.deviceid" :label="item.deviceinfo" :value="item.deviceid"></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" style="margin-left: 12px;" @click="deviceonut()">搜索</el-button>
    <el-table :key="tableKey" :data="reportpolice" border fit highlight-current-rows style="margin-top: 20px;">
      <el-table-column label="设备编号" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备报警开始时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.starttime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备结束报警时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.endtime=='0-0-0 0:0' ? '' : scope.row.endtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警浓度" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.concentration,$event)">{{ scope.row.concentration }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警位置">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.location,$event)">{{ scope.row.location }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警类型" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.status_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="切断装置状态" width="150">
        <template slot-scope="scope">
          <span>{{ shutoffStatus(scope.row.shutoff_status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" width="155">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==1 ? 'danger' : 'success' " effect="dark">{{ scope.row.status==1 ? '报警' : '正常' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备是否当前报警" width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==1 ? 'danger' : 'success' " effect="dark">{{ scope.row.status==1 ? '当前正在报警' : '已结束报警' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="primary" effect="dark">生成工单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>
  </div>
</template>

<script>
import { police, history_device_type } from '@/api/device';
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
export default {
  components: { BackToTop },
  data() {
    return {
      tableKey: 0,
      reportpolice: [],
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // Please keep consistent with height to center vertically
        background: '#e7eaf1', // The background color of the button
      },
      devicetime: '', // 时间
      devicehtime: '', // 年月
      device_type: '', // 搜索数据设备报警类型
      device_quyu: '', // 设备区域
      data_device_type: '', // 设备数据
      data_device_quyu: '', // 设备区域
    };
  },
  created() {
    this.police(); // 列表
    this.historydevicetype(); // 设备搜索所需数据
  },
  methods: {
    shutoffStatus(id) {
      const shutoff = [];
      shutoff[0] = '初始化';
      shutoff[1] = '开启';
      shutoff[2] = '关闭';
      return shutoff[id];
    },
    police() {
      police()
        .then(response => {
          if (response.code === 200) {
            this.reportpolice = response.data;
          } else if (response.code === 105) {
            this.$message({
              message: response.msg,
              type: 'warning',
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    historydevicetype(){
      history_device_type()
        .then(response => {
          if (response.code === 200) {
            this.device_type = response.data.device_type;
            this.device_quyu = response.data.device_quyu;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    deviceonut() {
      console.log(this.devicetime);
      console.log(this.devicehtime);
      console.log(this.device_type);
    },
  },
};
</script>

<style>
</style>
