<template>
  <div class="rewardDetailed 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"  filled stack-label option-value="SId" option-label="SName"
          v-model="msg.School_Id" ref="School_Id" :options="schoolList" emit-value map-options label="所属校区"
          :dense="false" />
        </div>
        <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-3">
          <q-select @input="getList" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.Type" :options="TypeList" emit-value map-options label="上课类型" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
               separator="none" :data="data.List" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">教师课时费明细</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" label="导出" @click="Export" />
          </div>
        </template>
        <template v-slot:body-cell-UnitPrice="props">
          <q-td :props="props" color="negative">
            <span style="color: var(--q-color-negative)">￥{{props.row.UnitPrice.toFixed(2)}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-Money="props">
          <q-td :props="props" color="negative">
            <span style="color: var(--q-color-negative)">￥{{props.row.Money.toFixed(2)}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-Type="props">
          <q-td :props="props">
            <span>{{props.row.Type==1?'带班':'代课'}}</span>
          </q-td>
        </template>
        <template v-slot:bottom>
        </template>
      </q-table>
      <div style="font-size: 20px;font-weight: 400;">教师课时费汇总</div>
      <div v-for="(x,y) in data.Statistics" :key='y'> 
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
          style="margin-top: 10px" separator="none" :data="x.TeacherList" :columns="columnsZ" row-key="name">
          <template v-slot:top="props">
            <div class="col-2 q-table__title">{{x.Key}}</div>
            <q-space />
          </template>
          <template v-slot:body-cell-UnitPrice="props">
            <q-td :props="props" color="negative">
              <span style="color: var(--q-color-negative)">￥{{props.row.UnitPrice.toFixed(2)}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-Money="props">
            <q-td :props="props" color="negative">
              <span style="color: var(--q-color-negative)">￥{{props.row.Money.toFixed(2)}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-Type="props">
            <q-td :props="props">
              <span>{{props.row.Type==1?'带班':'代课'}}</span>
            </q-td>
          </template>
          <template v-slot:bottom>
          </template>
        </q-table>
      </div>
      
    </div>
  </div>
</template>

<script>
  import {
    getTeachingBonusDetailList, //明细详情
  } from '../../api/course/class'
  import {
    getTeacherDropDownList,
    getSchoolDropdown
  } from '../../api/school/index';
  import {
    EduDownLoad,
  } from '../../api/common/common';
  export default {
    name: "rewardDetailed",
    data() {
      return {
        columns: [{
            name: 'Date',
            label: '日期',
            field: 'Date',
            align: 'left'
          },
          {
            name: 'TeacherName',
            field: 'TeacherName',
            required: true,
            label: '老师',
            align: 'left',

          },
          {
            name: 'SName',
            label: '校区',
            field: 'SName',
            align: 'left'
          },
          {
            name: 'ClassName',
            label: '班级',
            field: 'ClassName',
            align: 'left'
          },
       

          {
            name: 'Type',
            label: '类型',
            align: 'left'
          },
          {
            name:'DeductionHour',
            label:'基础课时',
            field:'DeductionHour',
            align:'left'
          },
          {
            name: 'CourseHour',
            label: '带班课时',
            field: 'CourseHour',
            align: 'left'
          },
          {
            name: 'UnitPrice',
            label: '课单价',
            align: 'left'
          },
          {
            name: 'CheckInNum',
            label: '签到人数',
            field: 'CheckInNum',
            align: 'left'
          },
          {
            name: 'Money',
            label: '小计',
            align: 'left'
          },

        ],
        columnsZ: [{
            name: 'TeacherName',
            label: '教师姓名',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'DeductionHour',
            field: 'DeductionHour',
            required: true,
            label: '基础课时',
            align: 'left',

          },
          {
            name: 'CourseHour',
            field: 'CourseHour',
            required: true,
            label: '带班课时',
            align: 'left',

          },
          {
            name: 'DCourseHour',
            label: '代课课时',
            field: 'DCourseHour',
            align: 'left'
          },

          {
            name: 'UnitPrice',
            label: '课时单价',
            align: 'left'
          },
          {
            name: 'Money',
            label: '合计',
            align: 'left'
          },
        ],
        data: [],
        loading: true,
        msg: {
          rowsPerPage: 9999,
          BonusId: 0,
          TeacherId: 0,
          Type: 0,
          TeacherIds:'',
          School_Id:-1
        },
        TeacherList: [], //关联教师下拉数据
        schoolList: [],//校区的下拉
        TypeList: [{
            Id: 0,
            Name: '不限'
          },
          {
            Id: 1,
            Name: '带班'
          },
          {
            Id: 2,
            Name: '代课'
          },
        ]
      }
    },
    created() {
      if (this.$route.query) {
        this.msg.BonusId = this.$route.query.Id;
        if(this.$route.query.TeacherId){
          this.msg.TeacherId = Number(this.$route.query.TeacherId);
        }
        if(this.$route.query.TeacherIds){
          this.msg.TeacherIds = this.$route.query.TeacherIds;
        }
      }
      this.getList();
      this.GetTeacherList()
      this.getSchool()
    },
    methods: {
      getSchool() {
        getSchoolDropdown({}).then(res => {
          this.schoolList = res.Data;
          this.schoolList.unshift({
              SId: -1,
              SName: "不限"
            })
        })
      },
      Export() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad("/TeachingRewards/GetTeachingBonusDetailToExcel", msg, "课时奖励.xls", res => {
          this.loading = false;
        });
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.TeacherList.unshift({
              TId: 0,
              TeacherName: "不限"
            })
          }
        })
      },
      getList() {
        this.loading = true;
        getTeachingBonusDetailList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data
        }).catch(() => {
          this.loading = false
        })
      },
      goreturn() {
        this.$router.go(-1)
      },
    }
  }

</script>

<style scoped>

</style>
