<template>
  <el-row class="row-bg" justify="center">
    <el-col :span="20">

      <el-dialog v-model="editUserVisible" title="编辑用户">
        <el-form :model="formData" ref="vForm"  label-position="left" label-width="80px"
                 size="default" >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" placeholder="用户名" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码(md5)" prop="password">
            <el-input v-model="formData.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" >
            <el-input v-model="formData.email" placeholder="邮箱" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否被ban" prop="banned">
            <el-input v-model="formData.banned" placeholder="用户状态"></el-input>
          </el-form-item>
          <el-form-item label="是否隐藏" prop="hidden">
            <el-input v-model="formData.hidden" placeholder="用户状态"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="role">
            <el-input v-model="formData.role" placeholder="0是普通，1是admin"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="affiliation" >
            <el-input v-model="formData.affiliation" placeholder="" disabled></el-input>
          </el-form-item>
          <el-form-item label="网站" prop="website" >
            <el-input v-model="formData.website" placeholder="" disabled></el-input>
          </el-form-item>
          <el-form-item label="country" prop="country">
            <el-input v-model="formData.country" placeholder="" disabled></el-input>
          </el-form-item>
          <el-button type="primary" @click="edit()">提交</el-button>
        </el-form>
      </el-dialog>

      <el-table :data="data" row-key="id" style="width: 100%">
        <el-table-column label="id" prop="id" column-key="id"/>
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="密码(md5值)" prop="password"/>
        <el-table-column label="是否被ban" prop="banned"/>
        <el-table-column label="权限" prop="role"/>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editClick(scope.row)"
            >编辑</el-button>
            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';

export default {
  data(){
   return{
     formData:{
       id:0,
       username:"",
       password:"",
       email:"",
       affiliation:"",
       country:"",
       website:"",
       banned:0,
       hidden:0,
       role:0,
       team_id:0,
     },
     data:[],
     editUserVisible:false,
   }
  },
  mounted() {
    axios.get('/api/v1/admin/users').then(res => {
      if (res.data.code === 200) {
        this.data = res.data.data;
        console.log(this.data);
      }
    })

  },
  methods:{
    // 修改用户
    editClick(row){
      this.editUserVisible=true
      this.formData.id=row.id
      this.formData.username=row.username
      this.formData.password=row.password
      this.formData.email=row.email
      this.formData.affiliation=row.affiliation
      this.formData.country=row.country
      this.formData.website=row.website
      this.formData.banned=row.banned
      this.formData.hidden=row.hidden
      this.formData.role=row.role
    },
    //删除用户
    handleClick(row){
      axios.delete('/api/v1/admin/user/'+row.id).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.data.splice(this.data.indexOf(row),1);
        }
      })
    },
    edit(){
      console.log(this.formData)
      axios.put('/api/v1/admin/user/'+this.formData.id,this.formData).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editUserVisible=false
        }
      })
    }
  }
}

</script>
