<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">任务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="done_num" label="未通过人数" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="showTask1Detail(scope.row,1)">{{scope.row.done_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column class-name="hightLight" prop="need_add_teacher_num" label="需加好友人数" align="center">
              <template slot-scope="scope" >
                <el-button type="text" size="mini" style="font-size: 20px" @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" width="250">
              <template slot-scope="scope">
                <div><label style="width: 90px;display: inline-block;text-align: right">好友通过率：</label>
                  <el-progress style="display: inline-block;width: 120px" :text-inside="true" :stroke-width="18" :color="Number(scope.row.add_rate)<70?'#f00':'#67C23A'" :percentage="Number(scope.row.add_rate)"></el-progress>
                </div>
                <div><label style="width: 90px;display: inline-block;text-align: right">任务处理率：</label>
                  <el-progress style="display: inline-block;width: 120px" :text-inside="true" :stroke-width="18" :color="Number(scope.row.done_rate) === 100?'#67C23A':'#f00'" :percentage="Number(scope.row.done_rate)"></el-progress>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">附加任务:外部订单激活</span>
          </div>
          <el-table border :data="task6Obj && task6Obj.list ? [task6Obj] : []" align="center" :header-cell-style="{background:'#e4eff7'}">
            <el-table-column class-name="hightLight" prop="total" label="当日需激活人数" align="center">
              <template slot-scope="scope" >
                <el-button type="text" size="mini" style="font-size: 20px" @click="showTask6Detail()">{{scope.row.total}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="into_periods_num" label="当日已激活人数" align="center">
            </el-table-column>
            <el-table-column prop="total" label="激活率" align="center">
              <template slot-scope="scope">
                <el-progress style="display: inline-block;width: 120px" :text-inside="true" :stroke-width="18" :color="Number(scope.row.exec_rate)<70?'#f00':'#67C23A'" :percentage="Number(scope.row.exec_rate)"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog append-to-body :visible.sync="task6Show" title="外部订单待激活列表" width="1000px">
      <el-button @click="allDesc6()" size="mini" type="success">批量添加备注</el-button>
      <el-table size="mini" :data="task6Obj && task6Obj.list ? task6Obj.list : []"
                @selection-change="handleSelectionChange123">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="order_id" label="订单号">
        </el-table-column>

        <el-table-column prop="receiver_mobile" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="all_num" label="支付金额">
          <template slot-scope="scope">
            {{scope.row.money / 100}}元
          </template>
        </el-table-column>
        <el-table-column prop="goods_id" label="商品编号">
        </el-table-column>
        <el-table-column prop="periods_id" label="期数">
        </el-table-column>
        <el-table-column prop="invite_type" label="来源">
        </el-table-column>
        <el-table-column prop="all_num" label="收货信息" width="150px">
          <template slot-scope="scope">
            姓名：{{scope.row.receiver_name}}
            <br>
            地址：{{scope.row.receiver_province}}{{scope.row.receiver_city}}{{scope.row.receiver_area}}{{scope.row.receiver_address}}
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" align="center">
        </el-table-column>

        <el-table-column prop="desc" label="备注" align="center">
          <template slot-scope="scope">
            <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task1Detail.show" :title="task1Detail.title" 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="是否添加老师"  min-width="160" 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">
          <template slot-scope="scope">
            <teacher-desc :row="scope.row" :descType="2" @onSuccess="refDesc1"></teacher-desc>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="入课时间" min-width="140px" align="center" sortable></el-table-column>
      </el-table>
    </el-dialog>
  </div>

</template>

<script>
  import teacherDesc from '../framework/teacherDesc'
  import {task1Api,task6Api,changeAddTeacherApi,multiApi,orderDescApi} from "../../service/api";
  import page from '../framework/page'

  export default {
    name: "task1",
    components: {teacherDesc,page},
    props:['teacherId'],
    data(){
      return {
        task1List:[],
        task1Detail:{
          show:false,
          list:[],
          title:'',
          cur_date:''
        },
        task6Show:false,
        limit:10,
        total:0,
        nowPage:1,
        task6Obj:null,
        selectedTask6:[]
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      handleSelectionChange123(x){
        this.selectedTask6 = x
      },
      editNote(id, desc) {
        this.$prompt("", "编辑备注", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputType: "textarea",
          inputValue: desc || ""
        }).then(({ value }) => {
          this.$confirm("确定保存?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            orderDescApi({ desc: value }, id).then(res => {
              this.$message({
                type: "success",
                message: "编辑备注成功"
              });
              this.selectedTask6 = [];
              this.getTask6()
            });
          });
        });
      },
      allDesc6(){
        if(this.selectedTask6.length < 1){
          this.$message({
            type:'error',
            message:'请先选择用户'
          })
        }else{
          this.$prompt('请输入沟通内容', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType:'textarea',
          }).then(({ value }) => {
            let ids = [];
            this.selectedTask6.forEach(i=>{
              ids.push(i.id)
            });
            let json = {
              ids:ids.join(),
              desc:value,
            };
            multiApi(json).then(res=>{
              this.$message({
                type:'success',
                message:'批量添加备注成功'
              });
              this.selectedTask6 = [];
              this.getTask6()
            })
          })
        }
      },
      onPageChange(val){
        this.nowPage = val;
        this.getTask6();
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getTask6();
      },
      getTask6(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        task6Api(this.teacherId,json).then(res=>{
          this.task6Obj = res;
          this.total = res.total
        });
      },
      initPage(){
        this.nowPage = 1;
        task1Api(this.teacherId).then(res=>{
          this.task1List = res
        });
        this.getTask6()

      },
      objectSpanMethod( data ){
        if(data.columnIndex === 5){
          return {
            rowspan: this.task1List.length,
            colspan: 1
          };
        }else{
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      },
      showTask6Detail(){
        this.nowPage = 1;
        this.task6Show = true
      },
      refDesc1(){
        task1Api(this.teacherId).then(res=>{
          this.task1List = res;
          res.forEach(i=>{
            if(i.cur_date === this.task1Detail.cur_date){
              console.log(this.task1Detail)
              this.task1Detail.list =this.task1Detail.indexOf('未通过用户列表') < -1 ? i.done_detail:i.need_add_detail
            }
          })
        });
      },
      changeAddTeacher(data){
        changeAddTeacherApi(data.id,data.is_add_teacher).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
          this.refDesc1();
        })
      },
      showTask1Detail(data,type){
        this.task1Detail={
          show:true,
          list:type ? data.done_detail :data.need_add_detail,
          title:type ? data.cur_date + ' 未通过用户列表':data.cur_date + ' 待加好友用户列表',
          cur_date:data.cur_date
        }
        this.dialogType = 1
      },
    }
  }
</script>

<style scoped>

</style>
