<template>
  <div  style="font-size: 14px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>任务1：好友添加</span>
          </div>
          <el-table border :data="task1List" align="center" :header-cell-style="{background:'#e4eff7'}">
            <el-table-column prop="cur_date" label="时间" align="center"/>
            <el-table-column prop="total_add_teacher_num" label="当天进班人数" align="center"/>
            <el-table-column prop="need_add_teacher_num" label="需加好友人数" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="showTask1Detail(scope.row)">{{scope.row.need_add_teacher_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="add_rate" label="加好友率" align="center">
              <template slot-scope="scope">
                <el-progress :text-inside="true" :stroke-width="18" color="#67C23A" :percentage="Number(scope.row.add_rate.split('%')[0])"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>任务2：意向等级跟踪</span>
          </div>
          <el-table border :data="task2List" align="center" :header-cell-style="{background:'#e4eff7'}">
            <el-table-column prop="weight" label="意向等级" align="center"/>
            <el-table-column prop="total_num" label="总人数" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini"  @click="showTask2Detail(scope.row)">{{scope.row.total_num}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>任务3：用户召回</span>
            <el-button type="text" style="float: right;padding: 0" @click="task5Detail.show=true">往期活跃用户数（近三天）：{{task5Detail.total}}</el-button>
          </div>
          <div v-if="!task3List || task3List.length < 1" style="color: #DDDDDD;text-align: center">
            ——暂无数据——
          </div>
         <div v-for="data in task3List" class="task3-table">
           <div class="table">
             <div class="title">
               <div class="header bg-h">期数</div>
               <div>
                 【{{data.periods_id}}】{{data.title}}
               </div>
             </div>
             <div class="recall" style="background-color: #fffbe4">
               <div class="header bg-h">今日需召回人数</div>
               <el-button style="font-size: 30px;text-decoration:underline " type="text" @click="showRecallDetail(data)">{{data.need_recall_user_num}}</el-button>
             </div>
             <!--<div class="start">-->
               <!--<div class="header bg-h">开课日期</div>-->
               <!--{{data.start_at}}-->
             <!--</div>-->
             <div class="total">
               <div class="header bg-h">班级人数</div>
               {{data.total_user}}
             </div>
             <!--<div class="watch">-->
               <!--<div class="header bg-h">已推课程数</div>-->
               <!--{{data.has_watch_num}}-->
             <!--</div>-->
             <div class="log-list header-title bg-h">
               <div style="height: 19px;line-height: 19px">日期</div>
               <div style="height: 28px;line-height: 28px">未看课人数</div>
               <div style="height: 28px;line-height: 28px">总看课人数</div>
               <div style="height: 28px;line-height: 28px">总打卡人数</div>
               <div style="height: 19px;line-height: 19px">看课率</div>
               <div style="height: 19px;line-height: 19px">打卡率</div>
             </div>
             <div class="log-list" v-for="item in  data.watch_log">
               <div class=" bg-h" style="height: 19px;line-height: 19px">{{item.cur_date}}</div>
               <div style="height: 28px;line-height: 28px">
                 <span v-if="item.is_start_course !== 1">-</span>
                 <el-button size="mini" type="text" v-if="item.is_start_course === 1" @click="showTask3Detail(data,0,1,item.cur_date)">{{item.total_no_watch_num}}</el-button>
               </div>
               <div style="height: 28px;line-height: 28px">
                 <span v-if="item.is_start_course !== 1">-</span>
                 <el-button size="mini" type="text" v-if="item.is_start_course === 1" @click="showTask3Detail(data,1,1,item.cur_date)">{{item.total_watch_num}}</el-button>
               </div>
               <div style="height: 28px;line-height: 28px">
                 <span v-if="item.is_start_course !== 1">-</span>
                 <el-button size="mini" type="text" v-if="item.is_start_course === 1" @click="showTask3Detail(data,1,0,item.cur_date)">{{item.total_work_num}}</el-button>
               </div>
               <div style="height: 19px;line-height: 19px">
                 <span v-if="item.is_start_course !== 1">-</span>
                 <span v-if="item.is_start_course === 1">{{item.watch_rate}}</span></div>
               <div style="height: 19px;line-height: 19px">
                 <span v-if="item.is_start_course !== 1">-</span>
                 <span  v-if="item.is_start_course === 1">{{item.work_rate}}</span>
               </div>
             </div>
             <div class="over_work">
               <div class="header bg-h">截止今日全勤人数</div>
                <el-button size="mini" type="text"  @click="showOverWorkDetail(data)">{{data.total_watch_user_num}}</el-button>
             </div>
             <!--<div class="recall">-->
               <!--<div class="header bg-h">今日需召回人数</div>-->
               <!--<el-button size="mini" type="text" @click="showRecallDetail(data)">{{data.need_recall_user_num}}</el-button>-->
             <!--</div>-->
           </div>
         </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog append-to-body :visible.sync="task1Detail.show" width="80%" >
      <el-table :data="task1Detail.list" size="mini" fixed>
        <el-table-column label="用户" className="f-c" min-width="180"   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="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="期数" align="center">
          <template slot-scope="scope">
            【{{scope.row.periods_id}}】{{scope.row.periods_title}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否添加老师"  width="155" prop="is_add_teacher">
          <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 prop="desc" label="备注" align="center"></el-table-column>
        <el-table-column prop="created_at" label="入课时间" align="center" sortable></el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editDesc(scope.row)">备注</el-button>
            <el-button type="info" size="mini" @click="showLook(scope.row)">看课情况</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task2Detail.show" width="80%">

      <el-table
        :data="task2Detail.list"
        size="mini"
        style="width: 100%" fixed>
        <el-table-column label="用户" className="f-c" min-width="180"   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="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-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>
        </el-table-column>
        <el-table-column
          label="进班时间"  min-width="200" sortable  prop="created_at" >
        </el-table-column>
        <el-table-column
          label="备注">
          <template slot-scope="scope">
            {{ scope.row.desc}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否添加老师"  min-width="155" prop="is_add_teacher">
          <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="95" prop="weight">
          <template slot-scope="scope">
            <el-select v-model="scope.row.weight" size="mini" @change="changeWeight(scope.row)">
              <el-option label="0" :value="0">
              </el-option>
              <el-option label="1" :value="1">
              </el-option>
              <el-option label="2" :value="2">
              </el-option>
              <el-option label="3" :value="3">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px"  fixed="right">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editDesc(scope.row)">备注</el-button>
            <el-button type="info" size="mini" @click="showLook(scope.row)">看课情况</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task3Detail.show" width="80%" :title="task3Detail.title" >
      <el-table
        :data="task3Detail.list"
        v-loading="task3Detail.loading"
        size="mini"
        style="width: 100%" fixed>
        <el-table-column label="用户" className="f-c" min-width="180"   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="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="进班时间"  min-width="200" sortable  prop="created_at" >
        </el-table-column>
        <el-table-column
          label="最后登录时间"  min-width="200" sortable  prop="last_login_at" >
        </el-table-column>
        <el-table-column
          label="备注">
          <template slot-scope="scope">
            {{ scope.row.desc}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否添加老师"  min-width="155" prop="is_add_teacher">
          <template slot-scope="scope">
            <el-select v-model="scope.row.is_add_teacher" size="mini" @change="changeAddTeacher3(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="95" prop="weight">
          <template slot-scope="scope">
            <el-select v-model="scope.row.weight" size="mini" @change="changeWeight3(scope.row)">
              <el-option label="0" :value="0">
              </el-option>
              <el-option label="1" :value="1">
              </el-option>
              <el-option label="2" :value="2">
              </el-option>
              <el-option label="3" :value="3">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px"  fixed="right">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editDesc(scope.row)">备注</el-button>
            <el-button type="info" size="mini" @click="showLook(scope.row)">看课情况</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task5Detail.show" width="80%">
      <el-table
        :data="task5Detail.list"
        size="mini"
        style="width: 100%" fixed>
        <el-table-column label="用户" className="f-c" min-width="180"   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="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">
            {{ scope.row.desc}}
          </template>
        </el-table-column>
        <el-table-column
          label="期数信息" min-width="120" prop="weight">
          <template slot-scope="scope">
            【{{scope.row.periods_id}}】{{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否添加老师"  width="155" prop="is_add_teacher">
          <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="180" prop="weight">
          <template slot-scope="scope">
            学习总时长：{{scope.row.total_stay_time}}秒
            <br>
            学习课包模块数：{{scope.row.total_times}}次
            <br>
            最后看课时间：{{scope.row.created_at}}
          </template>
        </el-table-column>
        <el-table-column
          label="意向等级" min-width="95" prop="weight">
          <template slot-scope="scope">
            <el-select v-model="scope.row.weight" size="mini" @change="changeWeight(scope.row,5)">
              <el-option label="0" :value="0">
              </el-option>
              <el-option label="1" :value="1">
              </el-option>
              <el-option label="2" :value="2">
              </el-option>
              <el-option label="3" :value="3">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px"  fixed="right">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editDesc(scope.row,5)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :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>
    </el-dialog>
    <el-dialog append-to-body :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.user_info">
            <img :src="descDialog.user_info.avatar" style="width: 40px;height: 40px;border-radius: 50px"> {{descDialog.user_info.nickname}}(ID:{{descDialog.user_info.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>
    </el-dialog>
  </div>
</template>
<script>
  import {task1Api,userLookApi,task5Api,getWatchUserApi,task2Api,task3Api,getOverWatchListApi,getRecallListApi,addPeriodsClassUserDescApi,getUserDescListApi,changeAddTeacherApi,editUserWeightApi,editUserViewCourseApi} from "../../service/api";
  export default {
    name: "task",
    props:[
      'parentDetail'
    ],
    data(){
      return {
        id:this.parentDetail ? this.parentDetail.id : this.$route.params.id,
        task1List:[],
        task2List:[],
        task3List:[],
        lookDetail:{
          show:false,
          loading:false,
          list:[],
          nowPage: 1,
          data:null,
          limit: 500,
          total:0
        },
        task1Detail:{
          show:false,
          list:[],
          cur_date:''
        },
        task5Detail:{
          show:false,
          list:[],
          total:0
        },
        task2Detail:{
          show:false,
          list:[],
          weight:''
        },
        recallDetail:{
          show:false,
          list:[],
          weight:''
        },
        overWorkDetail:{
          show:false,
          list:[],
          weight:''
        },
        descDialog:{
          show:false,
          id:'',
          descList:[],
          user_info:null,
          type:null
        },
        task3Detail:{
          show:false,
          list:[],
          is_true:'',
          is_watch:'',
          loading:false,
          periods_id:'',
          cur_date:'',
          title:'',
          type:0,
        }
      }
    },
    methods:{
      showLook(data){
        if(data){
          this.lookDetail.data = data
        }
        this.lookDetail.show = true;
        this.lookDetail.loading = true;
        let json = {
          limit: this.lookDetail.limit,
          page: this.lookDetail.nowPage
        };
        userLookApi(this.lookDetail.data.periods_id,this.lookDetail.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.showLook();
      },
      onLookDetailSizeChange(val){
        this.lookDetail.limit = val
        this.lookDetail.nowPage = 1;
        this.showLook();
      },
      showTask3Detail(data,is_true,is_watch,cur_date){
        let json={
          is_true:is_true,
          is_watch:is_watch,
          cur_date:cur_date
        };
        this.task3Detail.show = true;
        this.task3Detail.loading = true;
        this.task3Detail.is_true = is_true;
        this.task3Detail.periods_id = data.periods_id;
        this.task3Detail.is_watch = is_watch;
        this.task3Detail.cur_date = cur_date;
        this.task3Detail.type = 1;
        this.task3Detail.title=`【${data.periods_id}】${data.title} ${is_true === 1 ? '已' : '未'}${is_watch === 1 ? '看课' : '打卡'}学员`
        getWatchUserApi(data.periods_id,this.id,json).then(res=>{
          this.task3Detail.loading = false;
          this.task3Detail.list = res
        })
      },
        showOverWorkDetail(data){
          let json={};
          this.task3Detail.show = true;
          this.task3Detail.loading = true;

          this.task3Detail.periods_id = data.periods_id;
            this.task3Detail.type = 2;
          this.task3Detail.title=`【${data.periods_id}】${data.title} 截止今日全勤学员`
            getOverWatchListApi(data.periods_id,this.id,json).then(res=>{
                this.task3Detail.loading = false;
                this.task3Detail.list = res
            })
        },
        showRecallDetail(data)
        {
            let json={};
            this.task3Detail.show = true;
            this.task3Detail.loading = true;
            this.task3Detail.periods_id = data.periods_id;
            this.task3Detail.type = 3;
            this.task3Detail.title=`【${data.periods_id}】${data.title} 今日需要招回学员`
            getRecallListApi(data.periods_id,this.id,json).then(res=>{
                this.task3Detail.loading = false;
                this.task3Detail.list = res
            })
        },
      editComment(id) {
        this.$prompt('', '添加备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: ''
        }).then(({ value }) => {
          addPeriodsClassUserDescApi(id,{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.getUserDescList();
            this.refDesc1();
            this.refDesc2();
            if(this.task3Detail.list && this.task3Detail.list.length > 0){
              this.refDesc3();
            }
            if(this.descDialog.type && this.descDialog.type === 5){
              this.getTask5()
            }
          });
        })
      },
      refDesc3(){
          if(this.task3Detail.type === 1){
              let json={
                is_true:this.task3Detail.is_true,
                is_watch:this.task3Detail.is_watch,
                cur_date:this.task3Detail.cur_date
              };
              this.task3Detail.loading = true;
              getWatchUserApi(this.task3Detail.periods_id,this.id,json).then(res=>{
                this.task3Detail.loading = false;
                this.task3Detail.show = true;
                this.task3Detail.list = res
              })
          }else if (this.task3Detail.type === 2){
              getOverWatchListApi(this.task3Detail.periods_id,this.id,{}).then(res=>{
                  this.task3Detail.loading = false;
                  this.task3Detail.show = true;
                  this.task3Detail.list = res
              })
          }else if(this.task3Detail.type === 3)
          {
              showRecallDetail(this.task3Detail.periods_id,this.id,{}).then(res=>{
                  this.task3Detail.loading = false;
                  this.task3Detail.show = true;
                  this.task3Detail.list = res
              })
          }

      },
      showTask2Detail(data){
        this.task2Detail={
          show:true,
            list:data.detail,
            weight:data.weight
        }
      },
      showTask1Detail(data){
        this.task1Detail={
          show:true,
          list:data.detail,
          cur_date:data.cur_date
        }
      },
      refDesc1(){
        task1Api(this.id).then(res=>{
          this.task1List = res;
          res.forEach(i=>{
            if(i.cur_date === this.task1Detail.cur_date){
              this.task1Detail.list = i.detail
            }
          })
        });
      },
      refDesc2(){
        task2Api(this.id).then(res=>{
          this.task2List = res;
          res.forEach(i=>{
            if(i.weight === this.task2Detail.weight){
              this.task2Detail.list = i.detail
            }
          })
        });
      },
      changeAddTeacher(data){
        changeAddTeacherApi(data.id,data.is_add_teacher).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          this.refDesc1();
          this.refDesc2()
        })
      },
      changeAddTeacher3(data){
        changeAddTeacherApi(data.id,data.is_add_teacher).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          this.refDesc3();
        })
      },
      changeWeight3(data){
        editUserWeightApi(data.id,data.weight).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          this.refDesc3()
        })
      },
      changeWeight(data,type){
        editUserWeightApi(data.id,data.weight).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          if(type === 5){
            this.getTask5()
          }else{
            this.refDesc2()
          }
        })
      },
      changeView(data){
        editUserViewCourseApi(data.id,data.is_view_course).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          this.refDesc2()
        })
      },
      editDesc3(data){
        this.$prompt('', '请输入备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          addPeriodsClassUserDescApi(data.id,{desc:value}).then(res=>{
            this.$message({
              type:'success',
              message:'更新成功'
            });
            this.refDesc3();
          })
        }).catch(() => {
        });
      },
      editDesc(data,type){
        this.descDialog.show = true;
        this.descDialog.id = data.id;
        this.descDialog.type = type ? type : null;
        this.descDialog.user_info = {
          avatar:data.avatar,
          nickname:data.nickname,
          user_id:data.user_id,
        };
        this.getUserDescList()
      },
      getUserDescList(){
        getUserDescListApi(this.descDialog.id,{limit:1000}).then(res=>{
          this.descDialog.descList = res.list
        })
      },
      getTask5(){
        task5Api(this.id).then(res=>{
          this.task5Detail.list = res.list;
          this.task5Detail.total = res.total
        });
      },
      initPage(){
        task1Api(this.id).then(res=>{
          this.task1List = res
        });
        task2Api(this.id).then(res=>{
          this.task2List = res
        });
        task3Api(this.id).then(res=>{
          this.task3List = res
        });
        this.getTask5()
      }
    },
    mounted(){
      this.initPage()
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .task3-table{
    padding: 10px;
    overflow: auto;
    .table{
      &:after{
        content:'';
        display: block;
        clear: both;
      }
      &>div{
        display: table-cell;
        white-space:nowrap;
        vertical-align: middle;
        height: 192px;
        width: auto;
        text-align: center;
        position: relative;
        border: 1px solid #f0f0f0;
        &.title{
          min-width: 200px;
        }
        &.start{
          min-width: 100px;
        }
        &.total{
          min-width: 90px;
        }
        &.watch{
          min-width: 90px;
        }
        &.over_work{
          min-width: 120px;
        }
        &.recall{
          min-width: 110px;
        }
        .header{
          position: absolute;
          width: 100%;
          left: 0;
          top: 0;
          height: 21px;
          border-bottom: 1px solid #f0f0f0;
          padding: 5px 0;
          text-align: center;
        }
      }
      .log-list>div{
        text-align: center;
        padding: 5px 15px;
        border-bottom: 1px solid #f0f0f0;
        line-height: normal;
      }
    }
  }
  .bg-h{
    background: rgb(228, 239, 247);
  }
</style>
