<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
    height: 28px !important;
  }
</style>
<template>
  <div class="page-body">
    <div class="col row wrap q-mb-lg" style="justify-content:space-between;">
      <div class="col row wrap">
        <div class="col-2 Sysuser_Date q-mr-lg">
          <q-field filled dense>
            <template v-slot:control>
              <el-date-picker v-model="myDate" style="width:100%" value-format="yyyy-MM" @change="getCheckDate()"
                size="mini" type="month" placeholder="选择年月">
              </el-date-picker>
            </template>
          </q-field>
        </div>
        <div class="col-2">
          <template v-if="deptList&&deptList.length>1">
            <q-select filled dense stack-label @input="getList()" option-value="Id" option-label="Name"
              v-model="msg.DeptId" ref="DeptId" :options="deptList" label="语种" clearable class="col-6 q-pr-lg q-pb-lg"
              emit-value map-options />
          </template>
          <template v-else>
            <q-select filled dense stack-label @input="getList()" option-value="Id" option-label="Name"
              v-model="msg.DeptId" ref="DeptId" :options="deptList" label="语种" class="col-6 q-pr-lg q-pb-lg" emit-value
              map-options />
          </template>
        </div>
      </div>
      <div style="float:right;">
        <q-btn color="accent" class="q-mr-md" size="sm" icon="download" style="margin-top:15px;"
          @click="downloadStudentStatic" label="下载" />
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" ref="table" :loading="loading" :style="{'height':tableHeight+'px'}"
        no-data-label="暂无相关数据" flat class="sticky-column-table sticky-header-column-table no-bottom-table"
        separator="none" :data="dataList" :columns="columns" row-key="">
        <q-tr slot="header" slot-scope="props" :props="props">
          <template v-for="col in props.cols" :props="props">
            <template v-if="col.label=='班主任学生互动'">
              <q-th :key="col.name" :props="props" style="max-width:75px;text-align:center;">
                班主任<br />学生互动
              </q-th>
            </template>
            <template v-else-if="col.label=='班主任学生互动得分'">
              <q-th :key="col.name" :props="props" style="max-width:90px;text-align:center;">
                班主任学生<br />互动得分
              </q-th>
            </template>
            <template v-else-if="col.label=='企业微信互动次数'">
              <q-th :key="col.name" :props="props" style="max-width:90px;text-align:center;">
                企业微信<br />互动次数
              </q-th>
            </template>
            <template v-else-if="col.label=='学生人次'">
              <q-th :key="col.name" :props="props" style="max-width:85px;text-align:center;">
                学生人次
              </q-th>
            </template>
            <template v-else-if="col.label=='学生升级'">
              <q-th :key="col.name" :props="props" style="max-width:85px;text-align:center;">
                学生升级
              </q-th>
            </template>
            <template v-else-if="col.label=='考级升级'">
              <q-th :key="col.name" :props="props" style="max-width:85px;text-align:center;">
                考级升级
              </q-th>
            </template>
            <template v-else-if="col.label=='上课时数'">
              <q-th :key="col.name" :props="props" style="max-width:85px;text-align:center;">
                上课时数
              </q-th>
            </template>
            <template v-else-if="col.label=='续约(含留学)'">
              <q-th :key="col.name" :props="props" style="max-width:80px;text-align:center;">
                续约<br />(含留学)
              </q-th>
            </template>
            <template v-else-if="col.label=='试讲成功(班课)'">
              <q-th :key="col.name" :props="props">
                试讲成功<br />(班课)
              </q-th>
            </template>
            <template v-else-if="col.label=='试讲成功(VIP)'">
              <q-th :key="col.name" :props="props">
                试讲成功<br />(VIP)
              </q-th>
            </template>
            <template v-else-if="col.label=='试讲失败'">
              <q-th :key="col.name" :props="props" style="background-color:#FF66CC;color:#000;">
                试讲失败
              </q-th>
            </template>
            <template v-else-if="col.label=='学生旷课'">
              <q-th :key="col.name" :props="props" style="background-color:#FF66CC;color:#000;">
                学生旷课
              </q-th>
            </template>
            <template v-else-if="col.label=='学生退课'">
              <q-th :key="col.name" :props="props" style="background-color:#FF66CC;color:#000;">
                学生退课
              </q-th>
            </template>
            <template v-else-if="col.label=='学生投诉'">
              <q-th :key="col.name" :props="props" style="background-color:#FF66CC;color:#000;">
                学生投诉
              </q-th>
            </template>
            <template v-else-if="col.label=='老师迟到早退'">
              <q-th :key="col.name" :props="props"
                style="max-width:90px;text-align:center;background-color:#FF66CC;color:#000;">
                老师<br />迟到早退
              </q-th>
            </template>
            <template v-else-if="col.label=='N5课程时数'">
              <q-th :key="col.name" :props="props"
                style="max-width:85px;text-align:center;background-color:#E2EFDA;color:#000;">
                N5<br />课程时数
              </q-th>
            </template>
            <template v-else-if="col.label=='N4课程时数'">
              <q-th :key="col.name" :props="props"
                style="max-width:85px;text-align:center;background-color:#E2EFDA;color:#000;">
                N4<br />课程时数
              </q-th>
            </template>
            <template v-else-if="col.label=='N3课程时数'">
              <q-th :key="col.name" :props="props"
                style="max-width:85px;text-align:center;background-color:#E2EFDA;color:#000;">
                N3<br />课程时数
              </q-th>
            </template>
            <template v-else-if="col.label=='N2课程时数'">
              <q-th :key="col.name" :props="props"
                style="max-width:85px;text-align:center;background-color:#B4C6E7;color:#000;">
                N2<br />课程时数
              </q-th>
            </template>
            <template v-else-if="col.label=='N1课程时数'">
              <q-th :key="col.name" :props="props"
                style="max-width:85px;text-align:center;background-color:#B4C6E7;color:#000;">
                N1<br />课程时数
              </q-th>
            </template>
            <template v-else-if="col.label=='学生小程序刷题次数'">
              <q-th :key="col.name" :props="props"
                style="max-width:90px;text-align:center;background-color:#B4C6E7;color:#000;">
                学生小程序<br />刷题次数
              </q-th>
            </template>
            <template v-else-if="col.label=='学生小程序刷题时间'">
              <q-th :key="col.name" :props="props"
                style="max-width:90px;text-align:center;background-color:#B4C6E7;color:#000;">
                学生小程序<br />刷题时间
              </q-th>
            </template>
            <template v-else-if="col.label=='活动次数'">
              <q-th :key="col.name" :props="props" style="background-color:#B4C6E7;color:#000;">
                活动次数
              </q-th>
            </template>
            <template v-else-if="col.label=='所有老师平均分数'">
              <q-th :key="col.name" :props="props"
                style="max-width:90px;text-align:center;background-color:#FFC000;color:#000;">
                所有老师<br />平均分数
              </q-th>
            </template>
            <template v-else-if="col.label=='总分数'">
              <q-th :key="col.name" :props="props"
                style="max-width:70px;text-align:center;background-color:#FFC000;color:#000;">
                总分数
              </q-th>
            </template>
            <template v-else-if="col.label=='分数差距'">
              <q-th :key="col.name" :props="props"
                style="max-width:90px;text-align:center;background-color:#FFC000;color:#000;">
                分数差距
              </q-th>
            </template>
            <template v-else>
              <q-th :key="col.name" :props="props" style="max-width:70px">
                {{ col.label }}
              </q-th>
            </template>
          </template>
        </q-tr>
        <template v-slot:body-cell-DateStr="props">
          <q-td :props="props">
            <span v-if="props.row.TeacherId>0" style="color:blue;cursor:pointer;"
              @click="goTotal(props.row)">{{ props.row.DateStr }}</span>
            <span v-else>{{props.row.DateStr}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-FinishTimesPlanCount2="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看跟进详细信息" @click="GoToDetails(props.row,1)">
              {{props.row.OnLineInteractiveScore}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-FinishTimesPlanCount="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看跟进详细信息" @click="GoToDetails(props.row,1)">
              {{props.row.FinishFollow}} /
              {{props.row.TotalFollow}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-AssessmentScore="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看考核信息" @click="GoToDetails(props.row,2)">
              {{props.row.AssessmentScore}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-SpeakClassScore="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看试听信息" @click="gotoShiTing(props.row)">
              {{props.row.SpeakClassScore}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-SpeakVipScore="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看试听信息" @click="gotoShiTing(props.row)">
              {{props.row.SpeakVipScore}}
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-SpeakFailScore="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer;" title="点击查看试听信息" @click="gotoShiTing(props.row)">
              {{props.row.SpeakFailScore}}
            </span>
          </q-td>
        </template>
        <template v-slot:bottom-row>
          <q-tr v-if="lastRow">
            <q-td>
              {{lastRow.DateStr}}
            </q-td>
            <q-td>
              {{lastRow.FinishFollow}} / {{lastRow.TotalFollow}}
            </q-td>
            <q-td>
              {{lastRow.OnLineInteractiveScore}}
            </q-td>
            <q-td>
              {{lastRow.OnLineInteractive}}
            </q-td>
            <q-td>
              {{lastRow.AttendClassHourScore}}
            </q-td>
            <q-td>
              {{lastRow.RenewScore}}
            </q-td>
            <q-td>
              {{lastRow.UpgradeScore}}
            </q-td>
            <q-td>
              {{lastRow.GradeTestScore}}
            </q-td>
            <q-td>
              {{lastRow.TransScore}}
            </q-td>
            <q-td>
              {{lastRow.SpeakClassScore}}
            </q-td>
            <q-td>
              {{lastRow.SpeakVipScore}}
            </q-td>
            <q-td>
              {{lastRow.SpeakFailScore}}
            </q-td>
            <q-td>
              {{lastRow.TruancyScore}}
            </q-td>
            <q-td>
              {{lastRow.WithdrawsScore}}
            </q-td>
            <q-td>
              {{lastRow.ComplaintScore}}
            </q-td>
            <q-td>
              {{lastRow.TeacherBeLateScore}}
            </q-td>
            <!-- <q-td>
              {{lastRow.N5ClassHoursScore}}
            </q-td>
            <q-td>
              {{lastRow.N4ClassHoursScore}}
            </q-td>
            <q-td>
              {{lastRow.N3ClassHoursScore}}
            </q-td> -->
            <q-td>
              {{lastRow.N2ClassHoursScore}}
            </q-td>
            <q-td>
              {{lastRow.N1ClassHoursScore}}
            </q-td>
            <q-td>
              {{lastRow.MiniAppPractiseScore}}
            </q-td>
            <q-td>
              {{lastRow.MiniAppTimeScore}}
            </q-td>
            <q-td>
              {{lastRow.ActivityNum}}
            </q-td>
            <q-td>
              {{lastRow.AssessmentScore}}
            </q-td>
            <q-td>
              {{lastRow.TotalScore}}
            </q-td>
            <q-td>
              {{lastRow.AvgScore}}
            </q-td>
            <q-td>
              {{lastRow.ScoreGap}}
            </q-td>
          </q-tr>
        </template>
        <template v-slot:bottom>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    GetTeacherMonthStatic
  } from '../../api/teacher/index';

  import {
    EduDownLoad
  } from "../../api/common/common";
  export default {
    props: {},
    meta: {
      title: "教师月度汇总"
    },
    components: {},
    data() {
      return {
        columns: [{
            name: 'DateStr',
            label: '老师',
            field: 'DateStr',
            align: 'left'
          },
          // {
          //   name: 'StudentCount',
          //   label: '学生人次',
          //   field: 'StudentCount',
          //   align: 'left',
          //   sortable: true
          // },
          {
            name: 'FinishTimesPlanCount',
            label: '班主任学生互动',
            align: 'left'
          },
          {
            name: 'FinishTimesPlanCount2',
            label: '班主任学生互动得分',
            align: 'left'
          },
          {
            name: 'OnLineInteractive',
            label: '企业微信互动次数',
            field: 'OnLineInteractive',
            align: 'left'
          },
          {
            name: 'AttendClassHourScore',
            label: '上课时数',
            field: 'AttendClassHourScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'RenewScore',
            label: '续约(含留学)',
            field: 'RenewScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'UpgradeScore',
            label: '学生升级',
            field: 'UpgradeScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'GradeTestScore',
            label: '考级升级',
            field: 'GradeTestScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'TransScore',
            label: '转介绍',
            field: 'TransScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'SpeakClassScore',
            label: '试讲成功(班课)',
            field: 'SpeakClassScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'SpeakVipScore',
            label: '试讲成功(VIP)',
            field: 'SpeakVipScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'SpeakFailScore',
            label: '试讲失败',
            field: 'SpeakFailScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'TruancyScore',
            label: '学生旷课',
            field: 'TruancyScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'WithdrawsScore',
            label: '学生退课',
            field: 'WithdrawsScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'ComplaintScore',
            label: '学生投诉',
            field: 'ComplaintScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'TeacherBeLateScore',
            label: '老师迟到早退',
            field: 'TeacherBeLateScore',
            align: 'left',
            sortable: true
          },
          // {
          //   name: 'N5ClassHoursScore',
          //   label: 'N5课程时数',
          //   field: 'N5ClassHoursScore',
          //   align: 'left',
          //   sortable: true
          // },
          // {
          //   name: 'N4ClassHoursScore',
          //   label: 'N4课程时数',
          //   field: 'N4ClassHoursScore',
          //   align: 'left',
          //   sortable: true
          // },
          // {
          //   name: 'N3ClassHoursScore',
          //   label: 'N3课程时数',
          //   field: 'N3ClassHoursScore',
          //   align: 'left',
          //   sortable: true
          // },
          {
            name: 'N2ClassHoursScore',
            label: 'N2课程时数',
            field: 'N2ClassHoursScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'N1ClassHoursScore',
            label: 'N1课程时数',
            field: 'N1ClassHoursScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'MiniAppPractiseScore',
            label: '学生小程序刷题次数',
            field: 'MiniAppPractiseScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'MiniAppTimeScore',
            label: '学生小程序刷题时间',
            field: 'MiniAppTimeScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'ActivityNum',
            label: '活动次数',
            field: 'ActivityNum',
            align: 'left',
            sortable: true
          },
          {
            name: 'AssessmentScore',
            label: '考核得分',
            field: 'AssessmentScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'TotalScore',
            label: '总分数',
            field: 'TotalScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'AvgScore',
            label: '所有老师平均分数',
            field: 'AvgScore',
            align: 'left',
            sortable: true
          },
          {
            name: 'ScoreGap',
            label: '分数差距',
            field: 'ScoreGap',
            align: 'left',
            sortable: true
          }
        ],
        dataList: [],
        loading: false,
        myDate: '',
        tableHeight: 500,
        msg: {
          YearStr: '',
          MonthStr: '',
          DeptId: '',
          rowsPerPage: 0,
        },
        deptList: [],
        lastRow: {}
      }
    },
    created() {
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
      }, 100)
      this.initDeptList();
    },
    mounted() {
      let d = new Date();
      this.msg.YearStr = d.getFullYear().toString();
      this.msg.MonthStr = (d.getMonth() + 1).toString();
      this.myDate = this.msg.YearStr + '-' + this.msg.MonthStr
      this.getList();
    },
    methods: {
      //跳转到试听
      gotoShiTing(item) {
        var lastDay = new Date(this.msg.YearStr, this.msg.MonthStr, 0).getDate();
        var qObj = {
          TeacherId: item.TeacherId,
          StartClassDate: this.msg.YearStr + "-" + this.msg.MonthStr + "-01",
          EndClassDate: this.msg.YearStr + "-" + this.msg.MonthStr + "-" + lastDay,
        };
        this.OpenNewUrl('/sale/reserveClass', qObj)
      },
      GoToDetails(item, type) {
        //跳转到跟进详情
        if (type == 1) {
          var lastDay = new Date(this.msg.YearStr, this.msg.MonthStr, 0).getDate();
          var qObj = {
            HeadTeacherId: item.AccountId,
            StartTime: this.msg.YearStr + "-" + this.msg.MonthStr + "-01",
            EndTime: this.msg.YearStr + "-" + this.msg.MonthStr + "-" + lastDay,
          };
          this.OpenNewUrl('/teacher/teacherTrack', qObj)
        }
        //跳转到考核列表
        else {
          var qObj = {
            TeacherAccountId: item.AccountId,
            YearStr: this.msg.YearStr,
            MonthStr: this.msg.MonthStr,
          };
          this.OpenNewUrl('/teacher/appraisalList', qObj)
        }
      },
      //初始化部门数据
      initDeptList() {
        var localStorageData = window.localStorage["loginUserInfo"];
        let ActionMenuList = JSON.parse(localStorageData).data.ActionMenuList;
        var obj1 = {
          Id: 8,
          Name: "日语"
        };
        var obj2 = {
          Id: 14,
          Name: "韩语"
        };
        if (ActionMenuList && ActionMenuList.length > 0) {
          ActionMenuList.forEach((x) => {
            if (x.FunctionCode == "LookJapanese") {
              this.deptList.push(obj1);
            }
            if (x.FunctionCode == "LookKorean") {
              this.deptList.push(obj2);
            }
          });
        }
        if (this.deptList && this.deptList.length > 0) {
          this.msg.DeptId = this.deptList[0].Id;
        }
      },
      //下载数据
      downloadStudentStatic() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad(
          "/TeacherStatic/DownLoadTeacherMonthStatic",
          msg,
          "教师月度数据统计.xls", res => {
            this.loading = false;
          }
        );
      },
      getCheckDate() {
        if (this.myDate) {
          this.msg.YearStr = this.myDate.split('-')[0];
          this.msg.MonthStr = this.myDate.split('-')[1];
          this.getList();
        }
      },
      //获取数据
      getList() {
        this.loading = true;
        GetTeacherMonthStatic(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data;
            this.lastRow = this.dataList.pop();
          }
        })
      },
      //跳转页面
      goTotal(obj) {
        this.OpenNewUrl('/teacher/dayStatic', {
          TeacherId: obj.TeacherId,
          Dept_Id: obj.Dept_Id,
          YearStr: this.msg.YearStr,
          MonthStr: this.msg.MonthStr
        });
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>