<template>
  <div class="app-container">
    <el-tabs :tab-position="tabPosition" style="height:100%;">
      <el-tab-pane label="废纸篓">
        <el-table :data="paperData" style="width: 100%">
          <el-table-column prop="username" label="设备编号" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.devicenum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="设备名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="设备备注" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.deviceremark }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="checkPermission(['manage isadmin'])" prop="email" label="设备删除记入" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.devicedeleteinfo }}</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 prop="state" label="状态">
            <template slot-scope="scope">
              <el-switch :v-model="scope.row.delete == 2" active-color="#13ce66" inactive-color="#ff4949" @change="UpPaperBasket(scope.row.id)"></el-switch>
              <span>废纸篓设备</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { deviceBasketList, UpPaperBasket } from '@/api/device';
import checkPermission from '@/utils/permission';
export default {
  data() {
    return {
      tabPosition: 'top',
      paperData: [], // 废纸篓
      value1: false,
      value2: false,
    };
  },
  created() {
    this.deviceBasketList();
  },
  methods: {
    checkPermission,
    deviceBasketList() {
      deviceBasketList()
        .then(response => {
          this.paperData = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    UpPaperBasket(id) {
      this.$confirm('是否将设备恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        UpPaperBasket(id)
          .then(response => {
            this.deviceBasketList();
          })
          .catch(err => {
            console.log(err);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};
</script>

<style>
</style>
