<script>
import {Delete, Edit, User} from "@element-plus/icons-vue";


export default {
  name: "ZooUser",
  computed: {
    User() {
      return User
    },
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    usersFilter() {
      let newusers = JSON.stringify(this.users)
      newusers = JSON.parse(newusers)//深拷贝数组
      // 计算格式化后的数组
      newusers.forEach(e => {
        if (e.auth === 0) {
          e.auth = '管理员'
        }
        else if (e.auth === 1) {
          e.auth = '饲养员'
        }
        else if (e.auth === 2) {
          e.auth = '兽医'
        }
      })
      return newusers
    }
  },
  data() {
    return {
      users: []
    }
  },
  methods: {
    editUser(user) {
      console.log('编辑用户', user)
    },
    deleteUser(user) {
      console.log('删除用户', user)
    },
    addUser() {
      console.log('添加用户')
    }
  },
  mounted() {
    //数据生成器
    for (let i = 0; i < 100; i++) {
      let user = {
        userKey: i,
        username: 'user' + (i + 3),
        password: '123456',
        auth: Math.floor(Math.random() * 3),
      }
      this.users.push(user)
    }
  }
}
</script>

<template>
  <div id="root">
    <div class="select">
      <el-button type="primary" :icon="User" @click="addUser()">添加用户</el-button>
    </div>
    <hr/>
    <div class="table">
      <el-table :data="usersFilter" style="width: 100%;height: 90%">
        <el-table-column fixed prop="username" label="用户名" width="150"/>
        <el-table-column prop="password" label="密码" width="120"/>
        <el-table-column prop="auth" label="身份" width="120"/>
        <el-table-column prop="" label="占位置" width="700"/>
        <el-table-column fixed="right" label="Operations" width="130">
          <template #default="scope">
            <el-button link type="primary" size="small" :icon="Edit" @click="editUser(scope.row)">
              编辑
            </el-button>
            <el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.table {
  /*width: 1300px;*/
  height: 500px;
}

.select {
  width: 100%;
  height: 100px;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table .info-row {
  --el-table-tr-bg-color: var(--el-color-info-light-9);
}

.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
</style>