<style>
  .classHourReward .el-input__inner {
    border: none !important;
    background: transparent !important;
  }

</style>
<template>
  <div class="classHourReward page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="getList" standout="bg-primary text-white" option-value="TId" option-label="TeacherName"
            v-model="msg.TeacherId" :options="TeacherList" emit-value map-options label="带班老师" />
        </div>
        <div class="col-4 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.StartTime" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
                size="small" style="width:47%;" @change="getList" clear-icon="iconfont icon-guanbi">
              </el-date-picker>至
              <el-date-picker v-model="msg.EndTime" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"
                size="small" style="width:47%;" @change="getList" clear-icon="iconfont icon-guanbi">
              </el-date-picker>
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table no-bottom-table" separator="none" title="" :data="dataList" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">课时统计</div>
          <q-space />
        </template>
        <template v-slot:body-cell-TeacherId="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goStatic(props.row)"
              style="font-weight:400" label="查看" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <div>&nbsp;</div>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
  import {
    GetTeacherClassHours //课时统计
  } from '../../api/course/class'
  import {
    getTeacherDropDownList,
  } from '../../api/school/index';
  export default {
    meta: {
      title: "课时统计"
    },
    name: "classHourStatistic",
    data() {
      return {
        dataList: [],
        loading: false,
        msg: {
          StartTime: "",
          EndTime: '',
          TeacherId: 0,
        },
        //公告column
        columns: [{
            name: 'TeacherName',
            field: 'TeacherName',
            label: '教师',
            align: 'left'
          },
          {
            name: 'ClassHours',
            field: 'ClassHours',
            label: '课时',
            align: 'left',
          },
          {
            name: 'TeacherId',
            label: '操作',
            field: 'TeacherId'
          }
        ],
        TeacherList: [], //关联教师下拉数据
      }
    },
    created() {
      var now = new Date(); //当前日期 
      var nowMonth = now.getMonth()+1; //当前月 
      var nowYear = now.getFullYear(); //当前年 
      var StartTime = nowYear + '-' + nowMonth + '-01';  
      var day = new Date(nowYear,nowMonth,0);   
      var EndTime = nowYear + '-' + nowMonth + '-' + day.getDate();//获取当月最后一天日期  
      this.msg.StartTime = StartTime;
      this.msg.EndTime = EndTime;

      this.getList();
      this.GetTeacherList()
    },
    methods: {
      getList() {
        this.loading = true;
        GetTeacherClassHours(this.msg).then(res => {
          this.loading = false
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        }).catch(() => {
          this.loading = false
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.TeacherList.unshift({
              TId: 0,
              TeacherName: "不限"
            })
            this.AllTeacherList = this.TeacherList
          }
        })
      },
      //去查看哈
      goStatic(item) {
        // let obj = {
        //   StartTime: this.msg.StartTime,
        //   EndTime: this.msg.EndTime,
        //   TeacherId: item.TeacherId
        // }
        let routeUrl = this.$router.resolve({
          path: "/course/classPlan",
          query: {
            StartTime: this.msg.StartTime,
            EndTime: this.msg.EndTime,
            TeacherId: item.TeacherId
          }
        });
        window.open(routeUrl.href, '_blank');
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
