<template>
  <div class="app-container">
    <el-tabs :tab-position="tabPosition" style="height:100%;">
      <el-tab-pane label="用户状态">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="username" label="账号名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="用户名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="用户邮箱" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.created_at | 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.state == 3" 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-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.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="用户名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="用户邮箱" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.created_at | 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.state == 1" 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 { paperBasketList, UpPaperBasket } from '@/api/users';
export default {
  data() {
    return {
      tabPosition: 'top',
      tableData: [], // 用户状态
      paperData: [], // 废纸篓
      value1: false,
      value2: false,
    };
  },
  created() {
    this.paperBasketList();
  },
  methods: {
    paperBasketList() {
      paperBasketList()
        .then(response => {
          this.tableData = response.data.stutus;
          this.paperData = response.data.paper;
        })
        .catch(err => {
          console.log(err);
        });
    },
    UpPaperBasket(id) {
      this.$confirm('是否将用户恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        UpPaperBasket(id)
          .then(response => {
            this.paperBasketList();
          })
          .catch(err => {
            console.log(err);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};
</script>

<style>
</style>