<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
          <el-form-item label="用户ID">
            <el-input v-model="searchFrom.old_user_id"></el-input>
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="searchFrom.course_title"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchFrom.mobile"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" plain @click="getUser">搜索</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        className="f-c"
        label="用户">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.headimgurl">{{scope.row.nickname}}(ID:{{scope.row.old_user_id}})
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="course_title"
        label="课程名字">
      </el-table-column>
      <el-table-column
        prop="start_time"
        label="开课时间">
      </el-table-column>
      <el-table-column
        label="操作"  v-if="!$store.state.readonly">
        <template slot-scope="scope">
          <el-button size="mini" plain v-if="$store.state.deletePermission"  type="danger" @click="deleteOption(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </div>
</template>

<script>
  import {getOldListApi,delOldUseApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "index",
    data(){
      return {
        searchFrom:{
          mobile:'',
          old_user_id:"",
          course_title:""
        },
        userList:[],
        total:0,
        nowPage:1,
        limit: 10,
        showDetail:false
      }
    },
    components:{
      page,
    },
    mounted(){
      this.getUser()
    },
    methods:{
      onPageChange(val){
        this.nowPage = val
        this.getUser()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getUser()
      },
      getUser(){
        let json = {
            page: this.nowPage,
            limit: this.limit
        }
        if (this.searchFrom.old_user_id) {
          json.old_user_id = this.searchFrom.old_user_id
        }
        if (this.searchFrom.course_title) {
            json.course_title = this.searchFrom.course_title
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getOldListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      },
      deleteOption(id){
         this.$confirm('确定删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              delOldUseApi(id).then(res=>{
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.getUser();
              });
            });
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .avatar {
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
    height: 50px;
  }
  .user{
    /*height: 100%;*/
    overflow: auto;
    padding: 20px 0;
    .btn-content{
      text-align: center;
    }
  }

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