<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="onAddUser" v-if="!$store.state.readonly">+添加用户</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="userTable"
        style="width: 100%">
        <el-table-column label="用户" className="f-c">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px"> {{scope.row.nickname}}(ID:{{scope.row.user_id}})
          </template>
        </el-table-column>
        <el-table-column
          label="是否购买">
          <template slot-scope="scope">
            {{ scope.row.is_buy === 0 ? '否' : '是'}}
          </template>
        </el-table-column>
        <el-table-column
          label="看课权限">
          <template slot-scope="scope">
            {{ scope.row.is_view_course | isOrNot}}
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="备注">
        </el-table-column>
        <el-table-column
          label="最后登录时间">
          <template slot-scope="scope">
            {{ scope.row.last_login_at }}
          </template>
        </el-table-column>
        <el-table-column
          label="看课率">
          <template slot-scope="scope">
            {{ scope.row.watch_course_rate }}
          </template>
        </el-table-column>
        <el-table-column
          label="课包查看次数">
          <template slot-scope="scope">
            {{ scope.row.watch_course_num }}
          </template>
        </el-table-column>
        <el-table-column
          label="学习时长（分）">
          <template slot-scope="scope">
            {{ Math.round(scope.row.watch_course_time / 60 * 100) / 100}}
          </template>
        </el-table-column>
        <el-table-column
          label="作业率">
          <template slot-scope="scope">
            {{ scope.row.work_rate | percent}}
          </template>
        </el-table-column>
        <el-table-column
          label="打卡率">
          <template slot-scope="scope">
            {{ scope.row.clock_rate | percent}}
          </template>
        </el-table-column>
        <el-table-column
          label="续费情况">
          <template slot-scope="scope">
            {{ scope.row.is_continue_buy  | isOrNot}}
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="!$store.state.readonly" width="300">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editComment(scope.row.id, scope.row.desc)" v-if="!$store.state.readonly">编辑备注</el-button>
            <el-button type="warning" size="mini" @click="changeUser(scope.row)" v-if="!$store.state.readonly">更改看课权限</el-button>
            <el-button type="danger" size="mini" @click="onDel(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">删除</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-row>
          <el-col :span="8">
            <el-form-item label="ID">
              <el-input v-model="searchFrom.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="昵称">
              <el-input v-model="searchFrom.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model="searchFrom.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="16">
            <el-form-item>
              <el-button style="float: right" type="primary" plain @click="getUser">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="userList"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          className="f-c"
          label="用户">
          <template slot-scope="scope">
            <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号">
        </el-table-column>
      </el-table>
      <page :total="total" :limit="limit" @pageChange="onPageChange"/>
      <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,getUserListApi,addPeriodsClassUserDescApi} from "../../service/api";
  import page from '../framework/page'
  import {ISORNOT} from "../../util/wordbook";

  export default {
    name: "userList",
    props:[
      'userObj'
    ],
    data(){
      return {
        userTable:[],
        addId:'',
        addShow:false,
        searchFrom: {},
        userList: [],
        nowPage: 1,
        limit: 5,
        total:0,
        searchFrom: {
          userId:'',
          nickName: '',
          mobile: ''
        },
        multipleSelection: []
      }
    },
    components:{
      page
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      },
      percent(val){
        return (val * 100).toFixed(2)+'%'
      }
    },
    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(){
        let json = {
          is_buy: 0
        }
        if(this.multipleSelection.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择用户!'
          });
          return
        } else if (this.multipleSelection.length !== 1){
          this.$message({
            type: 'error',
            message: '只能选择一个用户!'
          });
          return
        }
        this.addId = this.multipleSelection[0].user_id;
        if (!this.addId) {
            return
        }
        addClassUesrApi(this.userObj.classId,this.addId,json).then(res=>{
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.addShow = false;
          this.initPage()
        })
      },
      onAddUser(){
        this.addShow = true;
        this.getUser();
      },
      getUser(){
        let json = {
          page: this.nowPage,
          limit: this.limit
        }
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total;
        })
      },
      onPageChange(val){
        this.nowPage = val
        this.getUser()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      editComment(id, desc) {
        this.$prompt('', '编辑备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: desc
        }).then(({ value }) => {
          addPeriodsClassUserDescApi(id,{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            })
            this.initPage();
          });
        })
      },
    },

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

<style>
 .f-c > div{
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
 }
</style>
