<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" 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>
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        style="margin-top: 30px" separator="none" :data="data.Statistics" :columns="columnsZ" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">教师课时费汇总</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>
</template>

<script>
  import {
    getTeachingBonusDetailList, //明细详情
  } from '../../api/course/class'
  import {
    getTeacherDropDownList,
  } 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: 'ClassName',
            label: '班级',
            field: 'ClassName',
            align: 'left'
          },

          {
            name: 'Type',
            label: '类型',
            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: '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: 999,
          BonusId: 0,
          TeacherId: 0,
          Type: 0
        },
        TeacherList: [], //关联教师下拉数据
        TypeList: [{
            Id: 0,
            Name: '不限'
          },
          {
            Id: 1,
            Name: '带班'
          },
          {
            Id: 2,
            Name: '代课'
          },
        ]
      }
    },
    created() {
      if (this.$route.query) {
        this.msg.BonusId = this.$route.query.Id;
        this.msg.TeacherId = Number(this.$route.query.TeacherId);
      }
      this.getList();
      this.GetTeacherList()
    },
    methods: {
      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>
