<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" size="mini" label-width="68px" inline>
      <el-form-item label="昵称">
        <el-input v-model="searchFrom.name" style="width: 90px"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchFrom.alias" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="老师状态" clearable>
        <el-select v-model="searchFrom.status" @change="getUser" style="width: 88px" clearable>
          <el-option label="带班" value="0"></el-option>
          <el-option label="不带班" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教师类型">
        <el-select v-model="searchFrom.type" style="width: 95px" placeholder="请选择" @change="getUser" clearable>
          <el-option
            v-for="item in teacherTypeOption"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务日期">
        <el-date-picker
          style="width: 125px;"
          v-model="searchFrom.task_date"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getUser"  >搜索</el-button>
      </el-form-item>
      <el-form-item  v-if="$store.state.orderRefund">
        <el-button type="success" plain @click="add">新增教师</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="searchFrom.squad" type="card" style="background: white;padding-top: 10px" @tab-click="getUser">
      <el-tab-pane  v-if="phoneNumObj.teacher_type!='teacher_leader'"  v-for="i in 10"  :key="i"  :label="'T'+i"  :name="i.toString()"/>
      <!-- <el-tab-pane  v-if="phoneNumObj.teacher_type=='teacher_leader'"  :key="phoneNumObj.squad"  :label="'T'+phoneNumObj.squad"  :name="phoneNumObj.squad.toString()"/> -->
    </el-tabs>
    <el-table
      size="mini"
      :data="userList"
      height="calc(100vh - 335px)"
      style="width: 100%">
      <el-table-column
        prop="name"
        width="250"
        label="老师">
        <template slot-scope="scope">
          <a :href="scope.row.qr" target="_blank">
            <img class="avatar" :src="scope.row.qr" alt="二维码">
          </a>
          <div>
            老师名：{{scope.row.name}}
            <br>
            微信号：{{scope.row.alias}}
            <br>
            类别：{{scope.row.type | teacherType}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="添加好友">
        <template slot-scope="scope">
          进班人数：{{scope.row.into_class_num}}<br>
          加老师处理数：{{scope.row.add_teacher_exec_num}}<br>
          加老师成功数：{{scope.row.add_teacher_success_num}}<br>
          成功率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          :color="Number(scope.row.add_teacher_success_rate)>70 ? '#67C23A' : '#f00'"
          :percentage="Number(scope.row.add_teacher_success_rate)?Number(scope.row.add_teacher_success_rate):0">
        </el-progress>
          <br>
          处理率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          :color="Number(scope.row.add_teacher_exec_rate)===100 ? '#67C23A' : '#f00'"
          :percentage="Number(scope.row.add_teacher_exec_rate)?Number(scope.row.add_teacher_exec_rate):0">
        </el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="召回率">
        <template slot-scope="scope">
          需召回人数：{{scope.row.need_recall_num}}<br>
          已沟通人数：{{scope.row.recall_desc_exec_num}}<br>
          用户回复数：{{scope.row.recall_desc_reply_num}}<br>
          达标率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          :color="Number(scope.row.recall_watch_rate)===100 ? '#67C23A' : '#dd001b'"
          :percentage="Number(scope.row.recall_watch_rate)?Number(scope.row.recall_watch_rate):0">
        </el-progress>
          <br>
          处理率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          :color="Number(scope.row.recall_exec_rate)===100 ? '#67C23A' : '#f00'"
          :percentage="Number(scope.row.recall_exec_rate)?Number(scope.row.recall_exec_rate):0">
        </el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="意向标记">
        <template slot-scope="scope">
          意向用户数：{{scope.row.intention_num}}<br>
          完课沟通用户数{{scope.row.over_desc_exec_num}}<br>
          往期活跃用户沟通数：{{scope.row.past_desc_exec_num}}<br>
          标记率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          color="#67C23A"
          :percentage="Number(scope.row.over_intention_rate)?Number(scope.row.over_intention_rate):0">
        </el-progress>
          <br>
          处理率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="18"
          :color="Number(scope.row.over_exec_rate)===100 ? '#67C23A' : '#f00'"
          :percentage="Number(scope.row.over_exec_rate)?Number(scope.row.over_exec_rate):0">
        </el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="intention_num"
        width="100"
        label="意向用户数">
      </el-table-column>
      <el-table-column
              prop="performance"
              width="100"
              label="当月业绩">
      </el-table-column>
      <el-table-column
        width="280"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="goToTeacherDetail(scope.row)">
            查看详情
          </el-button>
          <el-button size="mini" plain type="warning" @click="edit(scope.row)" v-if="!$store.state.readonly">
            编辑
          </el-button>
          <el-button size="mini" plain type="danger" @click="delTeacher(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="res" class="total-tab">
      <div>总计</div>
      <div>
        <div>
          成功率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="16"
          :color="Number(res.add_teacher_success_rate)>70 ? '#67C23A' : '#f00'"
          :percentage="Number(res.add_teacher_success_rate)?Number(res.add_teacher_success_rate):0">
        </el-progress>
          <br>
          处理率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
          :text-inside="true"
          :stroke-width="16"
          :color="Number(res.add_teacher_exec_rate)===100 ? '#67C23A' : '#f00'"
          :percentage="Number(res.add_teacher_exec_rate)?Number(res.add_teacher_exec_rate):0">
        </el-progress>
        </div>
      </div>
      <div>
        <div>
        达标率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
        :text-inside="true"
        :stroke-width="16"
        :color="Number(res.recall_watch_rate)===100 ? '#67C23A' : '#ff0000'"
        :percentage="Number(res.recall_watch_rate)?Number(res.recall_watch_rate):0">
      </el-progress>
        <br>
        处理率：<el-progress
        style="display: inline-block;;width: calc(90% - 50px)"
        :text-inside="true"
        :stroke-width="16"
        :color="Number(res.recall_exec_rate)===100 ? '#67C23A' : '#f00'"
        :percentage="Number(res.recall_exec_rate)?Number(res.recall_exec_rate):0">
      </el-progress>
        </div>
      </div>
      <div>
        <div>
        标记率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
        :text-inside="true"
        :stroke-width="16"
        color="#67C23A"
        :percentage="Number(res.over_intention_rate)?Number(res.over_intention_rate):0">
      </el-progress>
        <br>
        处理率：<el-progress
          style="display: inline-block;width: calc(90% - 50px)"
        :text-inside="true"
        :stroke-width="16"
        :color="Number(res.over_exec_rate)===100 ? '#67C23A' : '#f00'"
        :percentage="Number(res.over_exec_rate)?Number(res.over_exec_rate):0">
      </el-progress>
        </div>
      </div>
      <div>
        {{res.intention_num}}
      </div>
      <div>
        {{res.total_money}}
      </div>
      <div></div>
    </div>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/>
    <el-dialog width="90%" top="5vh" :visible.sync="dialogDetail.show">
      <div v-if="dialogDetail.show">
        <teacher-detail :parentDetail="dialogDetail"></teacher-detail>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getTeacherListApi,delTeacherApi} from "../../service/api";
  import {TEACHERTYPE} from "../../util/wordbook";
  import page from '../framework/page'
  import teacherDetail from '../teacherDetail/index'
  import dialogCom from './dialog'
  import Dialog from "../class/dialog";
  export default {
    name: "index",
    data(){
      let nowDate = this.formatTime(new Date());
      return {
        searchFrom:{
          name:'',
          alias:"",
          status:'0',
          task_date:nowDate,
          squad:"1",
          type:"",
        },
        dialogDetail:{
          show:false,
          id:''
        },
        userList:[],
        total:0,
        nowPage:1,
        limit: 20,
        dialogObj:{
          type:0,
          show:false,
          id:''
        },
        res:null,
        dialogDetailObj:{
          show:false,
          title:'班级列表',
          id: ''
        },
        teacherTypeOption: [
          {
            id: 0,
            label: '老师'
          },
          {
            id: 1,
            label: '新星妈妈'
          }
        ],
        phoneNumObj:{}
      }
    },
    watch:{
      'dialogDetail.show'(value){
        if(!value){
          this.getUser()
        }
      }
    },
    components:{
      Dialog,
      page,
      dialogCom,
      teacherDetail
    },
    filters:{
      teacherType(value){
        return TEACHERTYPE[value]
      }
    },
    mounted(){
      // console.log(s)
      let data = localStorage.getItem("phoneNum");
      console.log(data)
      // debugger
      if(data){
        data = JSON.parse(data)
        this.phoneNumObj=data;
      }
      if(data&&data.teacher_type!='teacher_leader'){
        this.$router.push('/teacher/'+ data.id);
      }else{
        this.getUser()
      }
    },
    methods:{
      onPageChange(val){
        this.nowPage = val;
        this.getUser()
      },
      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}`;
      },
      onSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.getUser()
      },
      getUser(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        }
        if (this.searchFrom.type || this.searchFrom.type === 0) {
          json.type = this.searchFrom.type
        }
        if (this.searchFrom.status){
          json.status = this.searchFrom.status
        }
        if (this.searchFrom.name) {
          json.name = this.searchFrom.name
        }
        if (this.searchFrom.alias) {
          json.alias = this.searchFrom.alias
        }
        if (this.searchFrom.task_date){
          json.task_date = this.searchFrom.task_date
        }
        let data = localStorage.getItem("phoneNum");
        if(data){
          data = JSON.parse(data)
        }
        if(data&&data.teacher_type=='teacher_leader'){
          json.squad = data.squad
        }else{
          json.squad = this.searchFrom.squad
        }
        getTeacherListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total;
          this.res=res;
        })
      },
      edit(data){
        this.dialogObj.id = data.id;
        this.dialogObj.type = 2;
        this.dialogObj.show = true
      },
      add(){
        this.dialogObj.type = 0;
        this.dialogObj.show = true
      },
      detail(data){
        this.dialogObj.id = data.id;
        this.dialogObj.type = 1;
        this.dialogObj.show = true
      },
      delTeacher(data){
        this.$confirm('此操作将删除该账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delTeacherApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getUser()
          });
        });
      },
      changeShow(data){
        this.dialogObj.show=data
      },
      classDetail(row){
        this.dialogDetailObj = {
          show:true,
          title:row.name + '班级详情',
          id: row.id
        }
      },
      goToTeacherDetail(row){
        // this.$router.push('/teacher/'+ row.id);
        this.dialogDetail.id = row.id;
        this.dialogDetail.show = true
      }

    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .user{
    height: 100%;
    overflow: auto;
    padding: 20px 0;
    .btn-content{
      text-align: center;
    }
  }
  /deep/.el-progress-bar__outer{
    background: #cccccc;
  }
  .total-tab{
   display: table;
    background: #dfedff;
    width: 100%;
    vertical-align: middle;
    font-size: 12px;
    &>div{
      display: table-cell;
      vertical-align: middle;
      padding: 10px;
    }
    &>div:nth-child(1){
      width: 230px;
      min-width: 230px;
      text-align: center;
    }
    &>div:nth-child(5){
      min-width: 80px;
      width: 80px;
    }
    &>div:nth-child(6){
      min-width: 280px;
      width: 280px;
    }

    &>div:nth-child(2),
    &>div:nth-child(3),
    &>div:nth-child(4){
      min-width: 60px;
    }
  }
  .avatar{
    width: 70px;
    margin-right: 5px;
    height: 70px;
    float: left;
  }
  .shortcut {
    width: 50px;
  }
</style>
