<template>
  <div>
    <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" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"
              @change="searchList2()"></el-date-picker>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="searchFrom.user_id" clearable @change="searchList2()"/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchFrom.mobile" clearable @change="searchList2()"/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="searchFrom.nickname" clearable @change="searchList2()"/>
          </el-form-item>
          <el-form-item label="是否添加老师">
            <el-select v-model="searchFrom.is_add_teacher" placeholder="请选择" @change="searchList2()" clearable>
              <el-option label="老师主动添加" :value="1"></el-option>
              <el-option label="用户主动添加" :value="2"></el-option>
              <el-option label="待通过" :value="3"></el-option>
              <el-option label="手机号不是微信号" :value="4"></el-option>
              <el-option label="用户已拒绝" :value="5"></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="searchList2()">
              <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="searchList2()">搜索</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.orderRefund&&userObj.type==2&&userObj.watch_num<60&&!$store.state.classManageUnlimited">+添加用户</el-button>
            <el-button type="success" @click="onAddUser(false)" v-if="$store.state.classManage&&userObj.type==1&&userObj.watch_num<60&&!$store.state.classTakeUnlimited">+添加用户</el-button>
            <el-button type="success" @click="onAddUser(false)" v-if="$store.state.classTakeUnlimited&&userObj.type==1">+添加用户</el-button>
            <el-button type="success" @click="onAddUser(false)" v-if="$store.state.classManageUnlimited&&userObj.type==2">+添加用户</el-button>
            <el-button type="primary" @click="exportTable(userTable)" v-if="$store.state.export">导出</el-button>
            <el-button type="success" @click="onRank()">看课排行</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="[statistics]" border size="mini" style="width: 100%;margin: 20px 0">
          <el-table-column label="到课率" :render-header="rendertip">
            <template slot-scope="scope2">
              <span>{{ scope2.row.arrive_course_rate  | percent}}</span>
            </template>
          </el-table-column>
          <el-table-column label="看课率" :render-header="rendertip">
            <template slot-scope="scope2">
              <span>{{ scope2.row.watch_course_rate  | percent}}</span>
            </template>
          </el-table-column>
          <el-table-column label="完课率" :render-header="rendertip">
            <template slot-scope="scope2">
              <span>{{ scope2.row.over_course_rate  | percent}}</span>
            </template>
          </el-table-column>
          <el-table-column label="打卡率" :render-header="rendertip">
            <template slot-scope="scope2">
              <span>{{ scope2.row.clock_rate  | percent}}</span>
            </template>
          </el-table-column>
          <el-table-column label="全勤打卡率" :render-header="rendertip">
            <template slot-scope="scope2">
              <span>{{ scope2.row.over_clock_rate  | percent}}</span>
            </template>
          </el-table-column>
          <el-table-column label="转化率" :render-header="rendertip">
            <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" v-loading="loadingFlag" size="mini" border
          @selection-change="handleSelectionChange123" style="width: 100%" fixed>
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column width="120" label="沟通情况">
            <template slot-scope="scope">
              <teacher-desc :row="scope.row" :typeFlag="true" :descType="2" @onSuccess="searchList()"></teacher-desc>
            </template>
          </el-table-column>
          <el-table-column label="用户" className="f-c" min-width="180" sortable prop="user_id">
            <template slot-scope="scope">
              <img :src="scope.row.avatar" style="margin-right: 8px;width: 40px;min-width:40px;height: 40px;border-radius: 50px"> {{scope.row.nickname}}(ID:{{scope.row.user_id}})
              <br> Tel:{{scope.row.mobile}}
            </template>
          </el-table-column>
          <el-table-column label="看课权限">
            <template slot-scope="scope">
              <el-select
                v-if="$store.state.editWatch && !$store.state.readonly"
                v-model="scope.row.is_view_course" size="mini" @change="changeView(scope.row)">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
              <template v-else>{{scope.row.is_view_course==1?'是':'否'}}</template>
            </template>
          </el-table-column>

          <!--<el-table-column label="看课权限" v-if="!userObj.classPage">
            <template slot-scope="scope">
              <el-select v-model="scope.row.is_view_course" size="mini" @change="changeView(scope.row)">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </template>
            &lt;!&ndash; classPage &ndash;&gt;
          </el-table-column>
          <el-table-column label="看课权限" v-if="userObj.classPage">
            <template slot-scope="scope">
              {{scope.row.is_view_course==1?'是':'否'}}
            </template>
          </el-table-column>-->

          <el-table-column label="时间" sortable min-width="200" prop="last_login_at">
            <template slot-scope="scope">
              最后登录:{{ scope.row.last_login_at }}
              <br>
              进班时间:{{ scope.row.created_at }}
            </template>
          </el-table-column>
          <el-table-column label="看课率" sortable prop="watch_course_rate">
            <template slot-scope="scope">
              {{ scope.row.watch_course_rate | percent}}
            </template>
          </el-table-column>
          <el-table-column
            label="看课次数" sortable prop="watch_course_num" min-width="95">
            <template slot-scope="scope">
              {{ scope.row.watch_course_num }}
            </template>
          </el-table-column>
          <el-table-column
            label="学习时长(分)" sortable min-width="120" 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="clock_rate" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.clock_rate | percent}}
            </template>
          </el-table-column>
          <el-table-column label="续费情况" sortable prop="is_continue_buy" width="100">
            <template slot-scope="scope">
              {{ scope.row.is_continue_buy | isOrNot}}
            </template>
          </el-table-column>
          <el-table-column
            label="是否添加老师" min-width="155" sortable prop="is_add_teacher" v-if="!userObj.classPage">
            <template slot-scope="scope">
              <el-select v-model="scope.row.is_add_teacher" size="mini" @change="changeAddTeacher(scope.row)">
                <el-option label="老师主动添加" :value="1"></el-option>
                <el-option label="用户主动添加" :value="2"></el-option>
                <el-option label="待通过" :value="3"></el-option>
                <el-option label="手机号不是微信号" :value="4"></el-option>
                <el-option label="用户已拒绝" :value="5"></el-option>
                <el-option label="暂未处理" :value="0"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否添加老师" min-width="155" sortable prop="is_add_teacher" v-if="userObj.classPage">
            <template slot-scope="scope">
              {{ scope.row.is_add_teacher | isteacher}}
            </template>
          </el-table-column>

          <el-table-column label="意向等级" sortable min-width="95" prop="weight" v-if="userObj.classPage">
            <template slot-scope="scope">
              {{scope.row.weight | userWeightf}}
              <!-- <user-weight :row="scope.row" @onSuccess="searchList"></user-weight> -->
            </template>
          </el-table-column>
          <el-table-column label="意向等级" sortable min-width="95" prop="weight" v-if="!userObj.classPage">
            <template slot-scope="scope">
              <user-weight :row="scope.row" @onSuccess="searchList"></user-weight>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-popover placement="top" width="200">
                <div style="text-align: center">
                  <el-button type="primary" size="mini" plain @click="showSourceByDate(scope.row)">看课情况</el-button>
                  <el-button type="danger" size="mini" plain @click="onDel(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">删除</el-button>
                </div>
                <el-button slot="reference" size="mini" type="text">操作</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center; padding-top: 20px;">
          <el-pagination
            @size-change="searchList"
            :page-sizes="[20,50,100,200,500,1000]"
            :page-size="classUserLimit"
            :current-page.sync="classUserNowPage"
            layout="total , sizes, prev, pager, next, jumper"
            :total="classUserTotal">
          </el-pagination>
        </div>
      </div>

      <el-dialog :modal="false" :visible.sync="addShow" append-to-body>
        <el-form label-width="" inline>
          <!--<el-form-item label="用户id">-->
          <!--<el-input v-model="addId"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="">
            <el-input v-model="searchFrom.dialog_userid" placeholder="ID" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="searchFrom.dialog_nickname" placeholder="昵称" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="searchFrom.dialog_mobile" placeholder="电话" clearable @change="getUser"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="float: right" type="primary" plain @click="getUser">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table border :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"/>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="onAdd">确 定</el-button>
        </div>
      </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>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeClassObj.show = false">取 消</el-button>
          <el-button type="primary" @click="changeClassSub()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :modal="false" width="1100px" :visible.sync="rank.show" title="看课排行">
        <el-form label-width="100px" inline>
          <el-form-item label="看课时间">
            <el-date-picker
              type="daterange"
              v-model="timerank"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onRank()"></el-date-picker>
          </el-form-item>
          <el-form-item label="排名人数">
            <el-input style="width:100px;" v-model="rankParams.limit"/>
          </el-form-item>
          <el-form-item label="排名类型">
            <el-select style="width:100px;" v-model="rankParams.type" placeholder="请选择" @change="onRank()">
              <el-option label="按天数" value="day"></el-option>
              <el-option label="按时长" value="time"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onRank()">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="rank.list" border size="mini" style="display: block;margin: 20px auto;background: transparent">
          <el-table-column label="排名" type="index"></el-table-column>
          <el-table-column className="f-c" label="用户">
            <template slot-scope="scope">
              <img class="avatar" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column label="总天数" prop="total_day"></el-table-column>
          <el-table-column label="总时长(分)" prop="total_time">
            <template slot-scope="scope"> {{scope.row.total_time/60}}</template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="最后登录时间" prop="last_login_at"></el-table-column>
        </el-table>
      </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>-->
      <!--<page-desc :nowPage="descDialog.nowPage" :total="descDialog.total" :limit="descDialog.limit" @pageChange="onDescDialogPageChange" @sizeChange="onDescDialogSizeChange"/>-->
      <!--</el-dialog>-->
    </el-dialog>
    <sourceByDateDialog :dialogObj=sourceByDateDialogJson ref="sourceByDateDialogDom"></sourceByDateDialog>
  </div>
</template>

<script>
  import {
    getLookRankApi,
    addClassUesrApi,
    editUserViewCourseApi,
    editUserWeightApi,
    changeAddTeacherApi,
    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 teacherDesc from '../framework/teacherDesc'
  import userWeight from '../framework/userWeight'
  import sourceByDateDialog from '../teacherDetail/sourceByDateDialog'
  import {tipArr} from "../../util/tipArr";

  export default {
    name: "userList",
    props: [
      'userObj'
    ],
    data() {
      let nowDate = this.formatTime(new Date());
      return {
        nowDate: nowDate,
        rank: {
          show: false,
          list: []
        },
        rankParams: {
          type: 'time',
          start_date: '',
          end_date: '',
          limit: 10
        },
        sourceByDateDialogJson: {},
        userTable: [],
        addId: '',
        loadingFlag: false,
        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
        },
        classUserLimit: 20,
        classUserTotal: 0,
        classUserNowPage: 1,
        changeClassObj: {
          show: false,
          new_periods_id: '',
          new_class_id: '',
          periods_user_class_id: '',
          periods_list: [],
          selectedGoods: []
        },
        selectUserList: [],
        addShow: false,
        userList: [],
        nowPage: 1,
        limit: 1000,
        total: 0,
        timeLang: [],
        timerank: [],
        searchFrom: {
          user_id: '',
          is_add_teacher: '',
          is_view_course: '',
          start_at: '',
          end_at: '',
          mobile: '',
          nickname: '',
          dialog_userid: '',
          dialog_nickname: '',
          dialog_mobile: '',
        },
        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
        }, {
          label: '待通过',
          value: 3
        }, {
          label: '手机号不是微信号',
          value: 4
        }, {
          label: '用户已拒绝',
          value: 5
        }],
        isBindUser: false
      }
    },
    components: {
      page, page2, teacherDesc, userWeight, pageDesc, sourceByDateDialog
    },
    filters: {
      isOrNot(value) {
        return ISORNOT[value]
      },
      percent(val) {
        return (val * 100).toFixed(2) + '%'
      },
      isteacher(val) {
        // console.log(val)
        // debugger
        if (val == 1) {
          return '老师主动添加'
        } else if (val == 2) {
          return '用户主动添加'
        } else if (val == 3) {
          return '待通过'
        } else if (val == 4) {
          return '手机号不是微信号'
        } else if (val == 5) {
          return '用户已拒绝'
        } else if (val == 0) {
          return '暂未处理'
        }
      },
      userWeightf(val) {
        console.log(val)
        if (val == 1) {
          return '1'
        } else if (val == 2) {
          return '2'
        } else if (val == 3) {
          return '3'
        } else if (val == 100) {
          return '无法成为意向'
        } else {
          return '默认'
        }
      }
    },
    methods: {
      rendertip(h, {column}) {
        // common.tipFilter(h,column,tipArr2)
        return h("span", [
          h("span", column.label),
          h(
            "el-tooltip",
            {
              props: {
                effect: "dark",
                content: tipArr[column.label],
                placement: "top"
              }
            },
            [
              h("i", {
                class: "el-icon-question",
                style: "color:#409eff;display:block;"
              })
            ]
          )
        ]);
      },
      onRank() {
        console.log(this.timerank)
        let json = {}
        if (this.timerank && this.timerank.length > 1) {
          json.start_at = this.timerank[0];
          json.end_at = this.timerank[1];
        }
        if (this.rankParams.type) {
          json.type = this.rankParams.type
        }
        if (this.rankParams.start_date) {
          json.start_date = this.rankParams.start_date
        }
        if (this.rankParams.end_date) {
          json.end_date = this.rankParams.end_date
        }
        if (this.rankParams.limit) {
          json.limit = this.rankParams.limit
        }
        getLookRankApi(this.userObj.classId, json).then(res => {
          this.rank.show = true
          this.rank.list = res
          // console.log(res)
        })
      },
      showSourceByDate(row) {
        this.sourceByDateDialogJson = {
          "periods_id": row.periods_id,
          "user_id": row.user_id,
          json: {
            limit: 10,
            page: 0
          }
        }
        this.$refs.sourceByDateDialogDom.dialogShow = true
        // 
      },
      changeView(data) {
        editUserViewCourseApi(data.id, data.is_view_course).then(() => {
          this.$message({
            type: 'success',
            message: '数据更改成功'
          });
          this.searchList()
        })
      },
      changeWeight(data) {
        editUserWeightApi(data.id, data.weight).then(() => {
          this.$message({
            type: 'success',
            message: '数据更改成功'
          });
          this.searchList()
        })
      },
      changeAddTeacher(data) {
        changeAddTeacherApi(data.id, data.is_add_teacher).then(() => {
          this.$message({
            type: 'success',
            message: '数据更改成功'
          });
          this.searchList()
        })
      },
      handleItemChange(value) {
        console.log(this.userObj)
        // debugger
        getClassListApi(value[0], {limit: 999, type: this.userObj.type}).then(res => {
          res.list.forEach(i => {
            i.title = i.class_name
          });
          this.changeClassObj.periods_list.find(i => {
            return i.id === value[0]
          }).children = res.list
        })
        // debugger
      },
      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 {
          let goods_id = this.selectUserList[0].goods_id;
          getPeriodsApi({goods_id: goods_id, limit: 999}).then(res => {
            res.list.forEach(i => {
              i.children = []
            });
            this.changeClassObj.periods_list = res.list;
            this.changeClassObj.show = true;
          });
        }
      },
      defaultClass() {

        this.changeClassObj.selectedGoods = [parseInt(this.userObj.periods_id), parseInt(this.userObj.classId)];
        getClassListApi(this.changeClassObj.selectedGoods[0], {
          limit: 999,
          type: this.userObj.type
        }, this.userObj.type).then(res => {
          res.list.forEach(i => {
            i.title = i.class_name;
          });
          this.changeClassObj.periods_list.find(i => {
            return i.id === this.changeClassObj.selectedGoods[0]
          }).children = res.list
          let nowGoods = this.changeClassObj.periods_list.find(i => {
            return i.id === this.changeClassObj.selectedGoods[0]
          });
          this.periods = nowGoods.children.find(i => {
            return i.id === this.changeClassObj.selectedGoods[1]
          });
          this.changeClassObj.new_class_id = this.userObj.classId;
          this.changeClassObj.new_periods_id = this.userObj.periods_id;
        })
      },
      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();
      },
      searchList2() {
        this.classUserNowPage = 1
        this.searchList()
      },
      searchList(value) {
        console.log(value)
        if (value) {
          this.classUserLimit = value;
          this.classUserNowPage = 1
        }
        this.loadingFlag = true;
        let json = {
          page: this.classUserNowPage,
          limit: this.classUserLimit
        };
        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.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        if (this.searchFrom.nickname) {
          json.nickname = this.searchFrom.nickname
        }
        if (this.searchFrom.is_add_teacher || this.searchFrom.is_add_teacher === 0) {
          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;
        });
        getClassListApi(this.userObj.periods_id, {page: 1, limit: 100}).then(res => {
          // console.log(res)
          this.userObj.watch_num = res.periods.watch_num
          console.log(this.$store.state.orderRefund)
          console.log(this.userObj)
        })
        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.classUserTotal = res.total;
          this.userTable = res.list;
          this.loadingFlag = false;
        });
        this.changeClassObj = {
          show: false,
          new_periods_id: '',
          new_class_id: '',
          periods_user_class_id: '',
          periods_list: [],
          selectedGoods: []
        }
      },
      initPage() {
        console.log(this.userObj)

        this.timerank[0] = this.nowDate
        this.timerank[1] = this.nowDate
        // this.timeLang[0]='2019-04-17'
        console.log(this.timerank)
        // debugger
        this.searchFrom = {
          user_id: '',
          is_add_teacher: '',
          is_view_course: '',
          start_at: '',
          end_at: '',
          nickname: '',
          mobile: '',
          dialog_userid: '',
          dialog_nickname: '',
          dialog_mobile: '',
        };

        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.classUserLimit = 20;
        this.classUserTotal = 0;
        this.classUserNowPage = 1;
        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.searchList()
          });
        });
      },
      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.searchList()
          });
        });
      },
      onDel(data) {
        this.$confirm('此操作将删除该成员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delClassUserApi(data.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.searchList()
          });
        });
      },
      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.searchList()
          })
        } 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.dialog_userid) {
          json.user_id = this.searchFrom.dialog_userid
        }
        /*if (this.searchFrom.nickName) { // 不动旧的代码
          json.nickname = this.searchFrom.nickName
        }*/
        if (this.searchFrom.dialog_nickname) {
          json.nickname = this.searchFrom.dialog_nickname
        }
        if (this.searchFrom.dialog_mobile) {
          json.mobile = this.searchFrom.dialog_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.searchList()
          });
        });
      },
      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.searchFrom.nickname) {
            json.nickname = this.searchFrom.nickname
          }
          if (this.searchFrom.mobile) {
            json.mobile = this.searchFrom.mobile
          }
          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, '用户列表');
        }
      },
      formatTime(date) {
        let year = date.getFullYear();
        let Month = date.getMonth() + 1;
        if (Month < 10) {
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if (Day < 10) Day = `0${Day}`;
        return `${year}-${Month}-${Day}`;
      },
    },
    watch: {
      'userObj.show'(value) {
        if (value) {
          this.initPage()
        }
      },
      'classUserNowPage'(value) {
        this.searchList()
      },
      "changeClassObj.show"(val) {
        if (val) {
          this.defaultClass()
        }
      }
    }
  }
</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;
    }
  }

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

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