<template>
  <el-dialog :title="userObj.title" :visible.sync="userObj.show" :modal="false" :fullscreen="true">
    <div>
      <el-form label-width="90px" inline>
        <el-form-item style="float: right">
          <el-button type="success" @click="addShow = true">+添加用户</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="userTable"
        style="width: 100%">
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50px">
          </template>
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="用户ID">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="用户名">
        </el-table-column>

        <el-table-column
          label="看课权限">
          <template slot-scope="scope">
            {{ scope.row.is_view_course | isOrNot}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="changeUser(scope.row)">更改看课权限</el-button>
            <el-button type="danger" size="mini" @click="onDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-dialog :modal="false" :visible.sync="addShow">
      <el-form label-width="90px">
        <el-form-item label="用户id">
          <el-input v-model="addId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import {addClassUesrApi,getClassUserApi,changeUserApi,delClassUserApi} from "../../service/api";
  import {ISORNOT} from "../../util/wordbook";

  export default {
    name: "userList",
    props:[
      'userObj'
    ],
    data(){
      return {
        userTable:[],
        addId:'',
        addShow:false
      }
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      }
    },
    methods:{
      initPage(){
        getClassUserApi(this.userObj.classId).then(res=>{
          this.userTable = res.list
        })
      },
      changeUser(data){
        this.$confirm('此操作将修改成员看课权限?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changeUserApi(data.id,{is_view_course:data.is_view_course === 0 ? 1 : 0}).then(res=>{
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          });
          this.initPage()
        });
      },
      onDel(data){
        this.$confirm('此操作将删除该成员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delClassUserApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.initPage()
        });
      },
      onAdd(){
        addClassUesrApi(this.userObj.classId,this.addId).then(res=>{
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.initPage()
        })
      }
    },

    watch:{
      'userObj'(){
        this.initPage()
      }
    }
  }
</script>

<style scoped lang="less">

</style>