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

  .TotalredClass {
    color: red;
  }
</style>
<template>
  <div>
    <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="msg.YearStr" @change="getList" style="width:100%" value-format="yyyy" size="mini"
                type="year" placeholder="选择年">
              </el-date-picker>
            </template>
          </q-field>
        </div>
        <div class="col-2" style="display:none;">
          <q-select filled dense stack-label @input="getList" option-value="TId" @filter="filterTeacherFn" use-input option-label="TeacherName" v-model="msg.TeacherId"
            ref="Teacher_Id" :options="TeacherList" label="教师团队" clearable class="col-6 q-pr-lg q-pb-lg" emit-value
            map-options />
        </div>
      </div>
      <div>
        <q-btn color="accent" class="q-mr-md" size="sm" icon="download" style="margin-top:15px;" label="下载"
          @click="downloadStudentStaticMonthRate" />
      </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="">
        <template v-slot:body-cell-JanuaryRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.JanuaryRate<0}">{{props.row.JanuaryRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-FebruaryRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.FebruaryRate<0}">{{props.row.FebruaryRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-MarchRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.MarchRate<0}">{{props.row.MarchRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-AprilRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.AprilRate<0}">{{props.row.AprilRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-MayRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.MayRate<0}">{{props.row.MayRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-JuneRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.JuneRate<0}">{{props.row.JuneRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-JulyRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.JulyRate<0}">{{props.row.JulyRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-AugustRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.AugustRate<0}">{{props.row.AugustRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-SeptemberRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.SeptemberRate<0}">{{props.row.SeptemberRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-OctoberRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.OctoberRate<0}">{{props.row.OctoberRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-NovemberRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.NovemberRate<0}">{{props.row.NovemberRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-DecemberRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.DecemberRate<0}">{{props.row.DecemberRate}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-AvgRate="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.AvgRate<0}">{{props.row.AvgRate}}%</span>
          </q-td>
        </template>
        <template v-slot:bottom>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    GetTeacherStaticMonthRate
  } from '../../api/teacher/index';
  import {
    EduDownLoad
  } from "../../api/common/common";
  import {
    getTeacherDropDownList
  } from "../../api/school/index";
  export default {
    props: {},
    meta: {
      title: "教师月度数据统计"
    },
    components: {},
    data() {
      return {
        tabCheck: 1,
        dataList: [],
        loading: false,
        tableHeight: 500,
        msg: {
          YearStr: '',
          TeacherId:'',
          rowsPerPage: 0
        },
        columns: [{
            name: 'ItemName',
            label: '名称',
            field: 'ItemName',
            align: 'left'
          },
          {
            name: 'JanuaryRate',
            label: '1月',
            field: 'JanuaryRate',
            align: 'left'
          },
          {
            name: 'FebruaryRate',
            label: '2月',
            field: 'FebruaryRate',
            align: 'left',
          },
          {
            name: 'MarchRate',
            label: '3月',
            field: 'MarchRate',
            align: 'left',
          },
          {
            name: 'AprilRate',
            label: '4月',
            field: 'AprilRate',
            align: 'left'
          },
          {
            name: 'MayRate',
            label: '5月',
            field: 'MayRate',
            align: 'left'
          },
          {
            name: 'JuneRate',
            label: '6月',
            field: 'JuneRate',
            align: 'left'
          },
          {
            name: 'JulyRate',
            label: '7月',
            field: 'JulyRate',
            align: 'left'
          },
          {
            name: 'AugustRate',
            label: '8月',
            field: 'AugustRate',
            align: 'left'
          },
          {
            name: 'SeptemberRate',
            label: '9月',
            field: 'SeptemberRate',
            align: 'left'
          },
          {
            name: 'OctoberRate',
            label: '10月',
            field: 'OctoberRate',
            align: 'left'
          },
          {
            name: 'NovemberRate',
            label: '11月',
            field: 'NovemberRate',
            align: 'left'
          },
          {
            name: 'DecemberRate',
            label: '12月',
            field: 'DecemberRate',
            align: 'left'
          },
          {
            name: 'AvgRate',
            label: '平均',
            field: 'AvgRate',
            align: 'left'
          }
        ],
        TeacherList:[],
        AllTeacherList:[]
      }
    },
    created() {
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
      }, 100)
    },
    mounted() {
      let d = new Date();
      this.msg.YearStr = d.getFullYear().toString();
      this.GetTeacherList();
      this.getList();
    },
    methods: {
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.AllTeacherList = res.Data;
          }
        });
      },
      //课程教师
      filterTeacherFn(val, update, abort) {
        update(() => {
          this.TeacherList = this.AllTeacherList.filter(
            v => v.TeacherName.indexOf(val) > -1
          );
        });
      },

      //下载文件
      downloadStudentStaticMonthRate() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad(
          "/TeacherStatic/DownLoadTeacherStaticMonthRate",
          msg,
          "教师月成长率统计.xls", res => {
            this.loading = false;
          }
        );
      },
      getList() {
        this.loading = true;
        GetTeacherStaticMonthRate(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        })
      }
    }
  }
</script>