<style>
  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .studentsClassfee .border-bottom {
    /* border-bottom: 1px dashed #EEE; */
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .studentsClassfee .text-bottom {
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
  }

  .studentsClassfee ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }

  .studentsClassfee ._icon_btn .icon-add {
    background-color: #47BF8C;
  }

  .studentsClassfee ._icon_btn i {
    width: 26px;
    height: 26px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }

  .studentsClassfee .el-table td,
  .el-table th {
    padding: 5px 0;
  }

  .studentsClassfee .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .studentsClassfee .items-center .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

</style>
<template>
  <div class="page-body studentsClassfee">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3" v-if="isshowquery">
          <q-select filled stack-label @input="handleCurrentChanges(1)" option-value="SId" option-label="SName"
            v-model="msg.SchoolId" ref="SId" :options="CompanyList" label="校区" :dense="false" emit-value map-options />
        </div>
        <!-- <div class="col-3">
                    <q-select filled stack-label @input="handleCurrentChanges(1)" option-value="TId"
                        option-label="TeacherName" v-model="msg.TeacherId" ref="TId" :options="TeacherList" label="老师"
                        :dense="false" emit-value map-options />
                </div> -->
        <div class="col-3" v-if="isshowquery">
          <q-select filled stack-label use-input input-debounce="0" option-value="ClassId" clearable @input="getList"
            option-label="ClassName" v-model="msg.ClassId" :options="ClassList" label="班级" :dense="false" emit-value
            map-options @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
        <div class="col-3">
          <q-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.OrderId"
            label="订单号" @clear="handleCurrentChanges(1)" maxlength="20" />
        </div>
        <div class="col-3" v-if="isshowquery">
          <q-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.StudentName"
            label="学生名称" @clear="handleCurrentChanges(1)" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @input="handleCurrentChanges(1)" clearable standout="bg-primary text-white" v-model="msg.ContractNo"
            label="合同编号" @clear="handleCurrentChanges(1)" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select filled stack-label @input="handleCurrentChanges(1)" option-value="Id" option-label="Name"
            v-model="datetype" ref="Id" :options="datetypelist" label="日期类型" :dense="false" emit-value map-options />
        </div>
        <div class="col-3" v-if='datetype==1'>
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="valueyear" type="year" placeholder="选择年份" value-format="yyyy" :clearable='false'
                @change="handleCurrentChanges(1)">
              </el-date-picker>    
            </template>
          </q-field>
        </div>
        <div class="col-3" v-if='datetype==2'>
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.StartMonth" type="month" placeholder="开始月份" size="small" style="width:47%;"
                value-format="yyyy-MM" :clearable='false' @change="choicemonth(1)" clear-icon="iconfont icon-guanbi">
              </el-date-picker>至
              <el-date-picker v-model="msg.EndMonth" type="month" placeholder="结束月份" size="small" style="width:47%;"
                value-format="yyyy-MM" :clearable='false' @change="choicemonth(2)" clear-icon="iconfont icon-guanbi">
              </el-date-picker> 
            </template>
          </q-field>
        </div>

      </div>
    </div>
    <div class="page-search row items-center" style="justify-content: space-between;">
      <span style="font-size: 20px;font-weight: 400;">学生课耗明细列表</span>
      <!-- <q-btn  color="primary" size="11px" label="导出" @click="txexport" style="margin-left:10px"/> -->
    </div>
    <template>
      <el-table ref="filterTable" :data="tableData" v-loading='loading'
        :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}" border style="width: 100%">
        <el-table-column prop="OrderId" label="订单号" width='90'>
          <template slot-scope="scope">
            <div style="text-decoration: underline;cursor: pointer;" @click='gobaoming(scope.row.OrderId)'>
              {{scope.row.OrderId}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ContractNo" width='150' label="合同号"></el-table-column>
        <el-table-column prop="ClassDate" label="上课日期"></el-table-column>
        <el-table-column prop="TimeBucket" label="上课时间段"> </el-table-column>
        <el-table-column prop="GuestName" label="学生名称"> </el-table-column>
        <el-table-column prop="ClassNo" width='120' label="班号"></el-table-column>
        <el-table-column prop="ClassName" label="上课班级" width='200'> </el-table-column>
        <el-table-column prop="CourseName" label="课程" width='200'></el-table-column>
        <el-table-column prop="TeacherName" label="老师名称"></el-table-column>

        <el-table-column prop="CurrentDeductionHours" label="课时" width='60'></el-table-column>
        <el-table-column prop="UnitPrice">
          <template slot="header">
            <div>合同单价</div>
            <div>（元/课时）</div>
          </template>
        </el-table-column>
        <el-table-column prop="XHMoney" label="课耗（消耗合同金额）"> </el-table-column>
        <el-table-column prop="SaleName" label="提成销售"></el-table-column>
        <el-table-column prop="HelpEnterName" label="提成老师"></el-table-column>
      </el-table>
      <div style="margin-top: 10px;text-align: center;">
        <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
          :current-page.sync="msg.pageIndex" :page-size="msg.pageSize" :total='total'>
        </el-pagination>
      </div>

    </template>

  </div>
</template>
<script>
  import {
    getSchoolDropdown,
    getTeacherDropDownList,
    getClassDropDownList
  } from '../../api/school/index'
  import {
    getStudentConsumptionHoursDetialPageList,
  } from '../../api/finance/index'
  import {
    EduDownLoad,
  } from '../../api/common/common';
  export default {
    meta: {
      title: "学生课耗明细列表"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        valuemonth: '',
        valueyear: '',
        //列表数据参数
        msg: {
          pageIndex: 1,
          pageSize: 15,
          TeacherId: '-1',
          SchoolId: '-1',
          StartMonth: '',
          EndMonth: '',
          StudentName: '',
          OrderId: '',
          ContractNo: '',
          ClassId: 0,
        },
        datetype: '2',
        pageCount: 0,
        listData: {},
        tableData: [],
        total: 0,
        CompanyList: [],

        TeacherList: [],
        datetypelist: [{
            Id: '2',
            Name: '月份'
          },
          {
            Id: '1',
            Name: '年份'
          },
        ],
        ClassList: [],
        allClassList: [],
        isshowquery: true, //是否显示筛选栏
      }
    },
    created() {
      let userinfo = this.getLocalStorage();
      var myDate = new Date();
      this.msg.StartMonth = myDate.getFullYear() + "-" + '01'
      this.msg.EndMonth = myDate.getFullYear() + "-" +  '12'
      this.valueyear = myDate.getFullYear().toString()
      if (this.$route.query && this.$route.query.datetype) {
        this.datetype = this.$route.query.datetype
      }
      if (this.$route.query && this.$route.query.valueyear) {
        this.valueyear = this.$route.query.valueyear
      }
      if (this.$route.query && this.$route.query.StartMonth) {
        this.msg.StartMonth = this.$route.query.StartMonth
      }
      if (this.$route.query && this.$route.query.EndMonth) {
        this.msg.EndMonth = this.$route.query.EndMonth
      }
      if (this.$route.query && this.$route.query.ClassId) {
        this.msg.ClassId = Number(this.$route.query.ClassId)
      }
      if (this.$route.query && this.$route.query.SchoolId) {
        this.msg.SchoolId = Number(this.$route.query.SchoolId)
      }
      if (this.$route.query && this.$route.query.StudentId) {
        this.msg.StudentId = this.$route.query.StudentId
        this.isshowquery = false
      }
      if (this.$route.query && this.$route.query.TeacherId>=0) {
        this.msg.TeacherId = this.$route.query.TeacherId
      } else {
        let data = JSON.parse(localStorage.getItem("loginUserInfo"))
        if (data) {
          this.msg.TeacherId = data.data.AccountId
        }
      }
    },
    mounted() {
      this.getList(); //获取提成周期列表
      this.getBranchList()
      this.GetTeacherList(); //老师下拉
      this.setClass()
    },
    methods: {
      getList() {

        if (this.datetype == 1) {
          this.msg.StartMonth = this.valueyear + '-01';
          this.msg.EndMonth = this.valueyear + '-12';
        }
        this.loading = true;
        getStudentConsumptionHoursDetialPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            this.tableData = res.Data.PageData
            this.total = res.Data.Count
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            var obj = {
              TeacherName: '全部',
              TId: '-1'
            }
            this.TeacherList.unshift(obj);
          }
        })
      },
      setClass(item) { //班级
        this.isShowClass = true;
        getClassDropDownList({
          CourseId: 0,
          IsAddDefault: 1, //添加默认选项
        }).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.ClassList = JSON.parse(JSON.stringify(jsonData));
              this.allClassList = JSON.parse(JSON.stringify(jsonData));;
            }
          }
        });
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.ClassList = JSON.parse(JSON.stringify(this.allClassList))
          } else {
            const needle = val.toLowerCase()
            this.ClassList = this.allClassList.filter(v => v.ClassName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },

      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          this.CompanyList = res.Data;
          var obj = {
            SName: '全部',
            SId: '-1'
          }
          this.CompanyList.unshift(obj);
        }).catch(() => {

        })
      },
      goUrl(path, id) {
        this.$router.push({
          path: '/financial/' + path,
          query: {
            "id": id,
            blank: 'y',
          }
        })
      },
      handleCurrentChanges(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      txexport() {

        let text = '';
        if (this.datetype == 2) {
          if (new Date(this.msg.StartMonth).getTime() == new Date(this.msg.EndMonth).getTime()) {
            text = this.msg.StartMonth + '课耗学生明细.xls'
          } else {
            text = this.msg.StartMonth + '-' + this.msg.EndMonth + '课耗学生明细.xls'
          }
        } else if (this.datetype == 1) {
          text = this.valueyear + '年课耗学生明细.xls'
        }
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/finance/GetStudentConsumptionHoursDetialPageListToExcel", msg, text)
      },
      gobaoming(Id) {
        this.OpenNewUrl('/sale/orderStatistics', {
          OrderId: Id
        });
      },
      choicemonth(val) {
        let StartMonth = JSON.parse(JSON.stringify(this.msg.StartMonth))
        let EndMonth = JSON.parse(JSON.stringify(this.msg.EndMonth))
        if (val == 1) { //判断选择的时候开始时间大于结束时间的处理
          if (new Date(StartMonth).getTime() > new Date(EndMonth).getTime()) {
            this.msg.EndMonth = this.msg.StartMonth
          }
        } else {
          if (new Date(this.msg.StartMonth).getTime() > new Date(this.msg.EndMonth).getTime()) {
            this.msg.StartMonth = this.msg.EndMonth
          }
        }
        let diff = this.dateMinus(this.msg.StartMonth, this.msg.EndMonth)
        if (diff > 11) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `月份不能超过12个月`
          })
          if (val == 1) { //如果超哥12过月的处理
            this.msg.StartMonth = this.msg.EndMonth
          } else {
            this.msg.EndMonth = this.msg.StartMonth
          }
          return
        }
        setTimeout(() => {
          this.handleCurrentChanges(1)
        }, 10)

      },
      //两个日期相差几个月
      dateMinus(d1, d2) {
        var m1 = parseInt(d1.split("-")[1].replace(/^0+/, "")) + parseInt(d1.split("-")[0]) * 12;
        var m2 = parseInt(d2.split("-")[1].replace(/^0+/, "")) + parseInt(d2.split("-")[0]) * 12;
        var diff = m2 - m1;

        return diff;
      }

    },
  }

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

</style>
