<template>
  <div class="app-container">
    <el-table :key="tableKey" :data="reportpolice" border fit highlight-current-rows>
      <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="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>
    <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 } 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
      },
    };
  },
  created() {
    this.police(); // 列表
  },
  methods: {
    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);
        });
    },
    handleCopy(text, event) {
      clip(text, event);
    },
  },
};
</script>

<style>
</style>
