<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;font-weight: bold">任务2：用户召回</span>
      </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" style="width:8%">
            <div class="header bg-h">期数名称</div>
            <div>
              <!--{{data.title}}-->
              <div v-html="periodName(data)"></div>
            </div>
          </div>
          <div class="total">
            <div class="header bg-h">班级人数</div>
            {{data.total_user}}
          </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 style="display: table-cell;max-width:calc(80vw - 800px );min-width: 0;overflow: auto">
            <div class="log-list" style="display: table-cell" v-for="item in  data.watch_log" v-if="item.is_start_course === 1">
              <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>

          <div class="recall" style="background-color: #fffbe4">
            <div class="header bg-h">今日需召回人数</div>
            <el-button size="mini"  style="font-size: 30px;text-decoration:underline "  type="text" @click="showRecallDetail(data)">{{data.need_recall_user_num}}</el-button>
          </div>
          <div class="recall_process">
            <div class="header bg-h">完成情况</div>
            <div style="text-align:left;margin-left:20px;">需达标看课率：{{ data.standards_rate }}%</div>
            <br>
            <div style="text-align:left;margin-left:20px;">老师已沟通：{{ data.total_desc_num }}人</div>
            <br>
            <div style="text-align:left;margin-left:20px;">任务完成率：
              <el-progress
                style="display: inline-block;width: 120px"
                :text-inside="true"
                :stroke-width="18"
                :color="Number(data.recall_watch_rate)===100 ? '#67C23A' : '#ff0000'"
                :percentage="Number(data.recall_watch_rate?data.recall_watch_rate:0)">
              </el-progress>
            </div>
            <br>
            <div style="text-align:left;margin-left:20px;">任务处理率：
              <el-progress
                style="display: inline-block;width: 120px"
                :text-inside="true"
                :stroke-width="18"
                :color="Number(data.desc_rate)===100 ? '#67C23A' : '#f00'"
                :percentage="Number(data.desc_rate)">
              </el-progress>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog append-to-body :visible.sync="task3Detail.show" width="80%" :title="task3Detail.title" >
      <el-button @click="allDesc3()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        :data="task3Detail.list"
        @selection-change="handleSelectionChange123"
        v-loading="task3Detail.loading"
        size="mini"
        style="width: 100%" fixed>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <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
          min-width="160"
          label="沟通情况">
          <template slot-scope="scope">
            <teacher-desc :teacherId="teacherId" :row="scope.row" :descType="2" @onSuccess="refDesc3"></teacher-desc>
          </template>
        </el-table-column>
        <el-table-column
          label="用户反馈">
          <template slot-scope="scope">
            <span v-if="scope.row.is_reply">
              <span v-if="scope.row.reply_content">{{scope.row.reply_content}}</span>
              <span v-if="!scope.row.reply_content || scope.row.reply_content === ''">已回复</span>
            </span>
            <span v-if="!scope.row.is_reply" style="color: red">尚未回复</span>
          </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" >
          <template slot-scope="scope">
            最后登录时间：{{scope.row.last_login_at}}
            <br>
            是否添加老师：{{scope.row.is_add_teacher | ADDTEACHER}}
            <br>
            用户意向等级：{{scope.row.weight}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px"  fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="info" size="mini" @click="showLook(scope.row)">看课情况</el-button> -->
            <el-button  @click="showLook(scope.row)"  type="primary " size="small">看课情况</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <sourceByDateDialog :dialogObj = sourceByDateDialogJson ref="sourceByDateDialogDom"></sourceByDateDialog>
    <el-dialog append-to-body :visible.sync="task4Detail.show" width="80%" :title="task4Detail.title" >
      <el-button @click="allDesc4()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        :data="task4Detail.list"
        v-loading="task4Detail.loading"
        @selection-change="handleSelectionChange124"
        size="mini"
        style="width: 100%" fixed>
        <el-table-column
        type="selection"
        width="55">
      </el-table-column>
        <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
          min-width="160"
          label="沟通情况">
          <template slot-scope="scope">
            <teacher-desc :teacherId="teacherId" :row="scope.row" :descType="2" @onSuccess="refDesc4"></teacher-desc>
          </template>
        </el-table-column>
        <el-table-column
          label="用户反馈">
          <template slot-scope="scope">
            <span v-if="scope.row.is_reply">
              <span v-if="scope.row.reply_content">{{scope.row.reply_content}}</span>
              <span v-if="!scope.row.reply_content || scope.row.reply_content === ''">已回复</span>
            </span>
            <span v-if="!scope.row.is_reply" style="color: red">尚未回复</span>
          </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" >
          <template slot-scope="scope">
            最后登录时间：{{scope.row.last_login_at}}
            <br>
            是否添加老师：{{scope.row.is_add_teacher | ADDTEACHER}}
            <br>
            用户意向等级：{{scope.row.weight}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="task4Detail.is_true !== 0 || task4Detail.is_watch !==1"
          label="意向等级" min-width="95" prop="weight">
          <template slot-scope="scope">
            <user-weight :row="scope.row" @onSuccess="refDesc4"></user-weight>
          </template>
        </el-table-column>
        <el-table-column
          v-if="task4Detail.is_true !== 0 || task4Detail.is_watch !==1"
          prop="last_watch_at"
          label="最后标注时间">
          <template slot-scope="scope">
            {{scope.row.last_weight_at?scope.row.last_weight_at:'-'}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="task4Detail.is_true !== 0 || task4Detail.is_watch !==1"
          prop="last_weight_desc"
          label="标注意向原因">
          <template slot-scope="scope">
            {{scope.row.last_weight_desc?scope.row.last_weight_desc:'-'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px"  fixed="right">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click="showLook(scope.row,1)">看课情况</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>
  </div>
</template>

<script>
  import teacherDesc from '../framework/teacherDesc'
  import userWeight from '../framework/userWeight'
  import sourceByDateDialog from './sourceByDateDialog'
  import {getWatchUserApi,getRecallListApi,userLookApi,allDescApi } from "../../service/api";
  export default {
    name: "task3",
    components: {teacherDesc,userWeight,sourceByDateDialog},
    props:[
      "task3List",
      "teacherId"
    ],
    data(){
      return {
        sourceByDateDialogJson:{},
        task3Detail:{
          show:false,
          list:[],
          is_true:'',
          is_watch:'',
          loading:false,
          periods_id:'',
          cur_date:'',
          title:'',
          type:0,
        },task4Detail:{
          show:false,
          list:[],
          is_true:'',
          is_watch:'',
          loading:false,
          periods_id:'',
          cur_date:'',
          title:'',
          type:0,
        },
        selectedTask3:[],
        selectedTask4:[],
        lookDetail:{
          show:false,
          loading:false,
          list:[],
          nowPage: 1,
          data:null,
          limit: 500,
          total:0
        },
      }
    },filters:{
      ADDTEACHER(value){
        let str = '';
        if(value === 0){
          str =  '暂未处理'
        }else if(value === 1){
          str =  '老师主动添加用户'
        }else if(value === 2){
          str =  '用户主动添加老师'
        }else if(value === 3){
          str =  '待通过'
        }else if(value === 4){
          str =  '手机号不是微信号'
        }else if(value === 5){
          str =  '用户已拒绝'
        }

        return str
      }
    },
    methods:{
      periodName(val) {
        let str = '';
        if (!val.title) {
          str = '-'
        } else {
          if (val.goods_id) {
            str += `【${val.goods_id}】`
          }
          if (val.title) {
            str += `${val.title}<br>`
          }
          if (val.watch_num) {
            str += `${val.watch_num}课时`
          }
          if (val.start_at) {
            str += `（${val.start_at.slice(5).replace('-', '')}）`
          }
          if (val.has_watch_num || val.has_watch_num == 0) {
            str += `-d${val.has_watch_num}`
          }
        }
        return str
      },
      showSourceByDate(row){
        this.sourceByDateDialogJson = {
          "periods_id":row.periods_id,
          "user_id":row.user_id,
          json:{
            limit: 10,
            page:0
          }
        }
        this.$refs.sourceByDateDialogDom.dialogShow = true
        // 
      },
      allDesc4(){
        if(this.selectedTask4.length < 1){
          this.$message({
            type:'error',
            message:'请先选择用户'
          })
        }else{
          this.$prompt('请输入沟通内容', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType:'textarea',
          }).then(({ value }) => {
            let ids = [];
            this.selectedTask4.forEach(i=>{
              ids.push(i.id)
            });
            let json = {
              ids:ids.join(),
              desc:value,
              type:this.this.task4Detail.is_watch === 0 ? 2: 1
            };
            allDescApi(json).then(res=>{
              this.$message({
                type:'success',
                message:'批量添加备注成功'
              });
              this.refDesc4()
            })
          })
        }
      },
      allDesc3(){
        if(this.selectedTask3.length < 1){
          this.$message({
            type:'error',
            message:'请先选择用户'
          })
        }else{
          this.$prompt('请输入沟通内容', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType:'textarea',
          }).then(({ value }) => {
            let ids = [];
            this.selectedTask3.forEach(i=>{
              ids.push(i.id)
            });
            let json = {
              ids:ids.join(),
              desc:value,
              type:2
            };
            allDescApi(json).then(res=>{
              this.$message({
                type:'success',
                message:'批量添加备注成功'
              });
              this.refDesc3()
            })
          })
        }
      },
      handleSelectionChange124(x){
        this.selectedTask4 = x
      },
      handleSelectionChange123(x){
        this.selectedTask3 = x
      },
      refDesc3(){
        getRecallListApi(this.task3Detail.periods_id,this.teacherId,{}).then(res=>{
          this.task3Detail.loading = false;
          this.task3Detail.list = res;
          this.selectedTask3 = []
        });
        this.$emit('refDesc3')
      },
      refDesc4(){
        let json={
          is_true: this.task4Detail.is_true,
          is_watch:this.task4Detail.is_watch,
          cur_date:this.task4Detail.cur_date
        };
        this.task4Detail.show = true;
        this.task4Detail.loading = true;
        this.task4Detail.type = 1;
        this.dialogType = 3;
        getWatchUserApi(this.task4Detail.periods_id,this.teacherId,json).then(res=>{
          this.selectedTask4 = []
          this.task4Detail.loading = false;
          this.task4Detail.list = res
        })
        this.$emit('refDesc3')
      },
      showLook(row,a){
        let periods_id
        if(a){
          periods_id = this.task4Detail.periods_id
        }else{
          periods_id = this.task3Detail.periods_id
        }
         this.sourceByDateDialogJson = {
          "periods_id":periods_id,
          "user_id":row.user_id,
          json:{
            limit: 10,
            page:0
          }
        }
        this.$refs.sourceByDateDialogDom.dialogShow = true
      },
      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.title} 今日需要招回学员`;
        this.dialogType = 3;
        getRecallListApi(data.periods_id,this.teacherId,json).then(res=>{
          this.task3Detail.loading = false;
          this.task3Detail.list = res;
          this.selectedTask3 = []
        })
      },
      showTask3Detail(data,is_true,is_watch,cur_date){
        let json={
          is_true:is_true,
          is_watch:is_watch,
          cur_date:cur_date
        };
        this.selectedTask4 = []
        this.task4Detail.show = true;
        this.task4Detail.loading = true;
        this.task4Detail.is_true = is_true;
        this.task4Detail.periods_id = data.periods_id;
        this.task4Detail.is_watch = is_watch;
        this.task4Detail.cur_date = cur_date;
        this.task4Detail.type = 1;
        this.dialogType = 3;
        this.task4Detail.title=`【${data.periods_id}】${data.title} ${is_true === 1 ? '已' : '未'}${is_watch === 1 ? '看课' : '打卡'}学员`
        getWatchUserApi(data.periods_id,this.teacherId,json).then(res=>{
          this.task4Detail.loading = false;
          this.task4Detail.list = res
        })
      },
    }
  }
</script>

<style scoped lang="less">

  .bg-h{
    background: rgb(228, 239, 247);
  }
  /deep/ .hightLight{
    background: rgb(255, 251, 228);
  }
  .task3-table{
    padding: 10px;
    overflow: auto;
    display: table;
    width: 1px;
    .table{
      display: table-row;
      &>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;
      }
    }
  }
</style>
