<template>
  <div class="app-container">
    <el-table :key="tableKey" v-loading="loading" :data="device" border fit highlight-current-rows>
      <el-table-column align="center" label="id" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenum,$event)">{{ scope.row.devicenum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备类型" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tname }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="介质状态" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.gas }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="浓度" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.nd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否已删除设备" width="170">
        <template slot-scope="scope">
          <span :style="{color:( scope.row.delete==1 ? '#F56C6C' : '#67C23A' )}">{{ scope.row.delete ==1 ? '设备已被丢弃废纸篓' : '设备正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备备注" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceremark }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备详情" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceinfo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceaddtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备实时状态" width="170">
        <template slot-scope="scope">
          <span>
            <el-tag :type=" scope.row.status_name=='正常' ? 'success' : 'warning' " effect="dark">{{ scope.row.status_name }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="170">
        <template slot-scope="scope">
          <span v-if="scope.row.status_name=='正常' " :style="{color:( scope.row.devicestatus==1 ? '#67C23A' : '#F56C6C' )}">{{ scope.row.devicestatus==1 ? '正常' : '设备错误' }}</span>
          <span v-if="scope.row.status_name!='正常' " :style="{color:( scope.row.status_name=='正常' ? '#67C23A' : '#F56C6C' )}">{{ scope.row.status_name=='正常' ? '正常' : '设备异常' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="devicelist" />
  </div>
</template>

<script>
import { control } from '@/api/device';
import Pagination from '@/components/Pagination'; // 分页
import clip from '@/utils/clipboard';
export default {
  name: 'Devicetype',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      loading: true,
      device: [],
      page: 1,
      limit: 10,
      type: 1,
      total: 0,
      paper: undefined,
    };
  },
  created() {
    this.devicelist(); // 设备状态
  },

  methods: {
    devicelist() {
      const limit = this.limit;
      const page = this.page;
      this.loading = true;
      control(page, limit, this.type)
        .then(response => {
          var devicetype = response.data['devicelist'];
          this.device = devicetype;
          this.device.forEach((element, index) => {
            element['index'] = (page - 1) * limit + index + 1;
          });
          this.total = response.data.count;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleClick(tab) {
      this.type = tab.$attrs.tid;
      this.devicelist();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    handleCopyphone(text, event){
      clip(text, event);
    },
  },
};
</script>

<style>
</style>
