<template>
  <el-dialog :title="userObj.title" :visible.sync="userObj.show" :modal="false" :fullscreen="true">
    <div>
      <el-form label-width="120px" inline>
        <el-form-item label="创建时间">
          <el-date-picker
            type="daterange"
            v-model="timeLang"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="searchList">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="searchFrom.user_id"/>
        </el-form-item>
        <el-form-item label="是否添加老师">
          <el-select v-model="searchFrom.is_add_teacher" placeholder="请选择" @change="searchList">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              label="是"
              value="1">
            </el-option>
            <el-option
              label="否"
              value="0">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可看课">
          <el-select v-model="searchFrom.is_view_course" placeholder="请选择" @change="searchList">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              label="是"
              value="1">
            </el-option>
            <el-option
              label="否"
              value="0">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">搜索</el-button>
          <el-button type="success" @click="changeClass" v-if="!$store.state.readonly">切换班级</el-button>
          <el-button type="success" @click="onAddUser(false)" v-if="!$store.state.readonly">+添加用户</el-button>
           <el-button type="primary"  @click="exportTable(userTable)">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="[statistics]"
        border
        style="width: 100%;margin: 20px 0">
        <el-table-column
          label="到课率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.arrive_course_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="看课率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.watch_course_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="完课率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.over_course_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.work_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="全勤作业率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.over_work_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打卡率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.clock_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="全勤打卡率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.over_clock_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="转化率">
          <template slot-scope="scope2">
            <span>{{ scope2.row.transform_rate  | percent}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="老师主动添加用户数"
          prop="teacher_add_user_num">
        </el-table-column>
        <el-table-column
          label="用户主动添加老师数"
          prop="user_add_teacher_num">
        </el-table-column>
      </el-table>
      <el-table
        :data="userTable"
        @selection-change="handleSelectionChange123"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
         <el-table-column
          label="备注">
          <template slot-scope="scope">
            {{ scope.row.desc}}
          </template>
        </el-table-column>
        <el-table-column label="用户" className="f-c" width="150" sortable   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 40px;height: 40px;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.mobile}}
          </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
          label="最后登录时间" sortable  width="140"   prop="last_login_at" >
          <template slot-scope="scope">
            {{ scope.row.last_login_at }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
        <el-table-column
          label="看课率">
          <template slot-scope="scope">
            {{ scope.row.watch_course_rate  | percent}}
          </template>
        </el-table-column>
        <el-table-column
          label="课包查看次数" sortable  width="140" prop="watch_course_num">
          <template slot-scope="scope">
            {{ scope.row.watch_course_num }}
          </template>
        </el-table-column>
        <el-table-column
          label="学习时长（分）" sortable width="150"  prop="watch_course_time">
          <template slot-scope="scope">
            {{ Math.round(scope.row.watch_course_time / 60 * 100) / 100}}
          </template>
        </el-table-column>
        <el-table-column
          label="作业率" sortable  prop="work_rate">
          <template slot-scope="scope">
            {{ scope.row.work_rate | percent}}
          </template>
        </el-table-column>
        <el-table-column
          label="打卡率" sortable   prop="clock_rate">
          <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="是否添加老师"  width="120">
          <template slot-scope="scope">
            {{ scope.row.is_add_teacher === 0 ? '否' : '是'}}
          </template>
        </el-table-column>
        <el-table-column
          label="意向等级">
          <template slot-scope="scope">
            {{ scope.row.weight}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editPrivilege(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini" @click="onGetUserDescList(scope.row)">备注</el-button>
            <el-button type="primary" size="mini" @click="userLook(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" @sizeChange="onSizeChange"/>
      <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 :modal="false" :visible.sync="lookDetail.show">
      <el-table
        v-loading="lookDetail.loading"
        :data="lookDetail.list"
        style="width: 100%">
        <el-table-column
          prop="start_at"
          label="日期">
        </el-table-column>
        <el-table-column
          label="爸妈看一看">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 1})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 1}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 1})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="宝贝玩一玩">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 2})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 2}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 2})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="爸妈秀宝贝">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 3})">
              <div v-html="scope.row.watch_list.find(i=>{return i.page_id === 3}).learn_report"></div>
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 3})">
              暂未秀宝贝
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="多元趣味课">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 5})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 5}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 5})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="分享">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 4})">
              已分享
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 4})">
              暂未分享
            </span>
          </template>
        </el-table-column>
      </el-table>
      <page2 :nowPage="lookDetail.nowPage" :total="lookDetail.total" :limit="lookDetail.limit" @pageChange="onLookDetailPageChange" @sizeChange="onLookDetailSizeChange"/>
    </el-dialog>
    <el-dialog :modal="false" :visible.sync="changeClassObj.show" title="切换班级">
      <el-form>
        <el-form-item>
          <el-cascader
            :options="changeClassObj.periods_list"
            :props="{value:'id',label:'title'}"
            @active-item-change="handleItemChange"
            @change="changePeriods"
            v-model="changeClassObj.selectedGoods"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeClassObj.show = false">取 消</el-button>
        <el-button type="primary" @click="changeClassSub()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :modal="false" :visible.sync="privilegeDialog.show" title="编辑权限">
      <el-form label-width="120px">
        <el-form-item label="是否添加老师">
          <el-select v-model="privilegeDialog.is_add_teacher" placeholder="请选择">
            <el-option
              v-for="(data,index) in isAddTeacherList"
              :key="index"
              :label="data.label"
              :value="data.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="看课权限">
          <el-switch
            v-model="privilegeDialog.isAllowView"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="意向等级">
          <el-input-number v-model="privilegeDialog.weight" :min="0" :step="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="privilegeDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="changePrivilegeSub()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :modal="false" :visible.sync="descDialog.show" title="备注列表">
      <el-form label-width="90px">
        <el-form-item>
          <el-button style="float: right" type="primary" plain @click="editComment(descDialog.id)">添加备注</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="descDialog.descList"
        style="width: 100%">
        <el-table-column
          label="用户" className="f-c" min-width="150">
          <template slot-scope="scope" v-if="descDialog.userInfo">
            <img :src="descDialog.userInfo.avatar" style="width: 40px;height: 40px;border-radius: 50px"> {{descDialog.userInfo.nickname}}(ID:{{descDialog.userInfo.user_id}})
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="operator"
          label="备注人">
        </el-table-column>
        <el-table-column
        prop="created_at"
        label="创建时间">
        </el-table-column>
        <el-table-column
        prop="updated_at"
        label="更新时间">
        </el-table-column>
      </el-table>
      <page-desc :nowPage="descDialog.nowPage" :total="descDialog.total" :limit="descDialog.limit" @pageChange="onDescDialogPageChange" @sizeChange="onDescDialogSizeChange"/>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import {addClassUesrApi,getClassUserApi,changeUserApi,delClassUserApi,getUserListApi,addPeriodsClassUserDescApi,getClassStatisticsApi,userLookApi,getPeriodsApi,changeClassApi,getClassListApi,addUserTeacherApi,getUserDescListApi,updateUserPrivilegeApi,teacherBindUserApi,getJoinNumApi,exportExcelApi} from "../../service/api";
  import page from '../framework/page'
  import page2 from '../framework/page'
  import pageDesc from '../framework/page'
  import {ISORNOT} from "../../util/wordbook";
  import CommonJs from '../../util/common';


  export default {
    name: "userList",
    props:[
      'userObj'
    ],
    data(){
      return {
        userTable:[],
        addId:'',
        statistics:{
          arrive_course_rate:0,
          clock_rate:0,
          over_clock_rate:0,
          over_course_rate:0,
          over_work_rate:0,
          transform_rate:0,
          watch_course_rate:0,
          work_rate:0,
          teacher_add_user_num:0,
          user_add_teacher_num:0
        },
        lookDetail:{
          show:false,
          loading:false,
          list:[],
          nowPage: 1,
          limit: 5,
          total:0
        },
        changeClassObj:{
          show:false,
          new_periods_id:'',
          new_class_id:'',
          periods_user_class_id:'',
          periods_list:[],
          selectedGoods:[]
        },
        selectUserList:[],
        addShow:false,
        userList: [],
        nowPage: 1,
        limit: 500,
        total:0,
        timeLang:[],
        searchFrom: {
          user_id:'',
          is_add_teacher: '',
          is_view_course: '',
          start_at:'',
          end_at:''
        },
        multipleSelection: [],
        descDialog: {
          show: false,
          descList: [],
          nowPage: 1,
          limit: 10,
          total:0,
          userInfo: null
        },
        privilegeDialog: {
          show: false,
          isAllowView: false,
          is_add_teacher: 0,
          weight: 0,
          id: ''
        },
        isAddTeacherList: [
          {
            label: '未加好友',
            value: 0
          },
          {
            label: '老师主动添加用户',
            value: 1
          },
          {
            label: '用户主动添加老师',
            value: 2
          }
        ],
        isBindUser: false
      }
    },
    components:{
      page,
      page2,
      pageDesc
    },
    filters:{
      isOrNot(value){
        return ISORNOT[value]
      },
      percent(val){
        return (val * 100).toFixed(2)+'%'
      }
    },
    methods:{
      handleItemChange(value){
        getClassListApi(value[0],{limit:99999}).then(res=>{
          console.log(res.list)
          res.list.forEach(i=>{
            i.title = i.class_name
          });
          this.changeClassObj.periods_list.find(i=>{return i.id === value[0]}).children = res.list
        })
      },
      changeClassSub(){
        this.changeClassObj.periods_user_class_id=[]
        this.selectUserList.forEach(i=>{
          this.changeClassObj.periods_user_class_id.push(i.id)
        });
        let json = {
          new_periods_id:this.changeClassObj.new_periods_id,
          new_class_id:this.changeClassObj.new_class_id,
          periods_user_class_id:this.changeClassObj.periods_user_class_id.toString()
        };
        changeClassApi(json).then(res=>{
          this.$message({
            type:'success',
            message:res
          });
          this.userObj.show = false;
          this.$emit('reflash')
        })
      },
      changePeriods(data){
        if(data.length>1){
          this.changeClassObj.new_periods_id = data[0];
          this.changeClassObj.new_class_id = data[1];
        }
      },
      changeClass(){
        if(this.selectUserList.length < 1){
          this.$message({
            type:'error',
            message:'请先选择用户'
          })
        }else{
          getPeriodsApi({goods_id:this.userObj.goods_id,limit:99999}).then(res=>{
            res.list.forEach(i=>{
              i.children = []
            });
            this.changeClassObj.periods_list = res.list
          });
          this.changeClassObj.show = true;
        }
      },
      handleSelectionChange123(a){
        this.selectUserList = a
      },
      userLook(data){
        this.lookDetail.show = true;
        this.lookDetail.loading = true;
        let json = {
          limit: this.lookDetail.limit,
          page: this.lookDetail.nowPage
        }
        this.lookDetail.data = {
          periods_id:data.periods_id,
          user_id: data.user_id
        }
        userLookApi(data.periods_id,data.user_id, json).then(res=>{
          this.lookDetail.list = res.list;
          this.lookDetail.loading = false;
          this.lookDetail.total = res.total;
        })
      },
      getUserLook(){
        if(!this.lookDetail.data) return;
        this.lookDetail.show = true;
        this.lookDetail.loading = true;
        let json = {
          limit: this.lookDetail.limit,
          page: this.lookDetail.nowPage
        }
        let data = this.lookDetail.data;
        userLookApi(data.periods_id,data.user_id, json).then(res=>{
          this.lookDetail.list = res.list;
          this.lookDetail.loading = false;
          this.lookDetail.total = res.total;
        })
      },
      onLookDetailPageChange(val){
        this.lookDetail.nowPage = val
        this.getUserLook();
      },
      onLookDetailSizeChange(val){
        this.lookDetail.limit = val
        this.lookDetail.nowPage = 1;
        this.getUserLook();
      },
      searchList(){
        let json = {
          limit:500
        };
        let json2 = {};
        if(this.timeLang && this.timeLang.length > 1){
          json.start_at = this.timeLang[0];
          json.end_at = this.timeLang[1];
          json2.start_at = this.timeLang[0];
          json2.end_at = this.timeLang[1];
        }
        if(this.searchFrom.user_id){
          json.user_id = this.searchFrom.user_id
        }
        if(this.searchFrom.is_add_teacher){
          json.is_add_teacher = this.searchFrom.is_add_teacher
        }
        if(this.searchFrom.is_view_course){
          json.is_view_course = this.searchFrom.is_view_course
        }
        getClassStatisticsApi(this.userObj.periods_id,this.userObj.classId,json2).then(res=>{
          this.statistics.arrive_course_rate = res.arrive_course_rate;
          this.statistics.clock_rate = res.clock_rate;
          this.statistics.over_clock_rate = res.over_clock_rate;
          this.statistics.over_course_rate = res.over_course_rate;
          this.statistics.over_work_rate = res.over_work_rate;
          this.statistics.transform_rate = res.transform_rate;
          this.statistics.watch_course_rate = res.watch_course_rate;
          this.statistics.work_rate = res.work_rate;
        });
        getJoinNumApi(this.userObj.classId).then(res=>{
            let _list = res || [];
            _list.forEach((_data)=>{
                if(_data.is_add_teacher === 1){
                  this.statistics.teacher_add_user_num = _data.num
                } else if (_data.is_add_teacher === 2) {
                  this.statistics.user_add_teacher_num = _data.num
                }
            })
        });
        getClassUserApi(this.userObj.classId,json).then(res=>{
          this.userTable = res.list
        });
        this.changeClassObj={
          show:false,
          new_periods_id:'',
          new_class_id:'',
          periods_user_class_id:'',
          periods_list:[],
          selectedGoods:[]
        }
      },
      initPage(){
        this.searchFrom = {
          user_id:'',
            is_add_teacher: '',
            is_view_course: '',
            start_at:'',
            end_at:''
        };

        this.statistics={
          arrive_course_rate:0,
            clock_rate:0,
            over_clock_rate:0,
            over_course_rate:0,
            over_work_rate:0,
            transform_rate:0,
            watch_course_rate:0,
            work_rate:0,
            teacher_add_user_num:0,
            user_add_teacher_num:0
        };
        this.searchList()
      },
      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()
          });
        });
      },
      addTeacher(data){
        this.$confirm('此操作将修改是否添加老师权限?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addUserTeacherApi(data.id,{is_add_teacher:data.is_add_teacher === 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
        }
        if (!this.isBindUser) {
          addClassUesrApi(this.userObj.classId,this.addId,json).then(res=>{
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.addShow = false;
            this.initPage()
          })
        } else {
          teacherBindUserApi(this.userObj.teacherId, {user_id: this.addId}).then(res=>{
            this.$message({
              type: 'success',
              message: '绑定成功!'
            });
            this.addShow = false;
          })
        }

      },
      onAddUser(flag){
        this.isBindUser = flag;
        this.addShow = true;
        this.getUser();
      },
      getUser(){
        let json = {
          page: this.nowPage,
          limit: 5
        };
        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()
      },
      onSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.getUser()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      editComment(id) {
        this.$prompt('', '添加备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: ''
        }).then(({ value }) => {
          addPeriodsClassUserDescApi(id,{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            })
            this.getUserDescList();
            this.searchList();
          });
        })
      },
      onGetUserDescList(val){
        this.descDialog.show = true;
        this.descDialog.userInfo = {
          user_id: val.user_id,
          avatar: val.avatar,
          nickname: val.nickname
        };
        this.descDialog.id = val.id;
        this.getUserDescList();
      },
      getUserDescList(){
        let json = {
          page: this.descDialog.nowPage,
          limit: this.descDialog.limit
        };
        getUserDescListApi(this.descDialog.id,json).then(res=>{
          this.descDialog.descList = res.list;
          this.descDialog.total = res.total;
        })
      },
      onDescDialogPageChange(val){
        this.descDialog.nowPage = val
        this.getUserDescList()
      },
      onDescDialogSizeChange(val){
        this.descDialog.limit = val
        this.descDialog.nowPage = 1;
        this.getUserDescList()
      },
      editPrivilege(val){
        this.privilegeDialog = {
          id: val.id,
          isAllowView: val.is_view_course === 1,
          is_add_teacher: val.is_add_teacher ? val.is_add_teacher : 0,
          weight: val.weight ? val.weight : 0,
          show: true
        }
      },
      changePrivilegeSub(){
        this.$confirm('此操作将修改用户权限?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _json = {
            is_view_course: this.privilegeDialog.isAllowView ? 1 : 0,
            is_add_teacher: this.privilegeDialog.is_add_teacher,
            weight: this.privilegeDialog.weight
          }
          updateUserPrivilegeApi(this.privilegeDialog.id,_json).then(res=>{
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.privilegeDialog.show = false;
            this.initPage()
          });
        });
      },
      exportTable(data){
        if(data.length>0){
            let json = {};
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id
        }
         if (this.searchFrom.is_add_teacher) {
          json.is_add_teacher = this.searchFrom.is_add_teacher
        }
        if (this.searchFrom.is_view_course) {
          json.is_view_course = this.searchFrom.is_view_course
        }
        if(this.timeLang && this.timeLang.length > 0){
          json.pay_start_at =this.timeLang[0];
          json.pay_end_at =this.timeLang[1]
        }
            exportExcelApi(`api/admin/class/user/export/${this.userObj.classId}`,json);
        }
         
      },
    },

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

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