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

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

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

.lessonCostStatistics ._icon_btn .icon-xueyuan {
  background-color: #47bf8c;
}

.lessonCostStatistics ._icon_btn .icon-jiaoshi {
  background-color: #47bf8c;
}

.lessonCostStatistics ._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;
}

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

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

.lessonCostStatistics .items-center .el-input__inner {
  width: 100%;
  border: none;
  background-color: transparent;
}
</style>
<template>
  <div class="page-body lessonCostStatistics">
    <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
            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
          >
            <template v-slot:option="{ itemProps, itemEvents, opt }">
              <q-item v-bind="itemProps" v-on="itemEvents">
                <q-item-section>
                  <div>
                    {{ opt.TeacherName }}
                    <span style="color: #f00" v-if="opt.LeaveStatus === 4"
                      >(离职)
                    </span>
                  </div>
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </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="valuemonth" type="month" placeholder="选择月份" value-format="yyyy-MM"
                                @change="handleCurrentChanges(1)">
                            </el-date-picker>     -->
              <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 style="font-size: 16px"></span>
      </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="SchoolName" label="校区"></el-table-column>
        <el-table-column prop="LeaveStatus" label="职务"> </el-table-column>
        <el-table-column prop="EmployeeName" label="老师名称"></el-table-column>
        <el-table-column prop="KSNum" label="上课课时"> </el-table-column>
        <el-table-column prop="DKNum" label="基础课时"></el-table-column>
        <el-table-column prop="Hours" label="课时转换/小时"></el-table-column>
        <el-table-column prop="KSMoney" label="课时费"> </el-table-column>
        <el-table-column prop="StuLearnMoney" label="学生上课金额">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="_icon_btn">
              <el-tooltip
                class="item"
                effect="dark"
                content="查看老师"
                placement="top"
              >
                <i
                  class="iconfont icon-jiaoshi"
                  @click="goUrl('teacherclassfee', scope.row.AccountId)"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="查看学生"
                placement="top"
              >
                <i
                  class="iconfont icon-xueyuan"
                  @click="goUrl('studentsClassfee', scope.row.AccountId)"
                ></i>
              </el-tooltip>
            </div>
          </template>
        </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,
} from "../../api/school/index";
import { getTeacherConsumptionHoursStatistics } 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: "",
      },
      datetype: "2",
      pageCount: 0,
      listData: {},
      tableData: [],
      total: 0,
      CompanyList: [],
      TeacherList: [],
      datetypelist: [
        { Id: "2", Name: "月份" },
        { Id: "1", Name: "年份" },
      ],
    };
  },
  created() {
    let userinfo = this.getLocalStorage();
    var myDate = new Date();
    this.msg.StartMonth = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
    this.msg.EndMonth = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
    this.valueyear = myDate.getFullYear().toString();
  },
  mounted() {
    this.getList(); //获取提成周期列表
    this.getBranchList();
    this.GetTeacherList(); //老师下拉
  },
  methods: {
    getList() {
      if (this.datetype == 1) {
        this.msg.StartMonth = this.valueyear + "-01";
        this.msg.EndMonth = this.valueyear + "-12";
      }
      this.loading = true;
      getTeacherConsumptionHoursStatistics(this.msg).then((res) => {
        if (res.Code == 1) {
          this.loading = false;
          this.tableData = res.Data.PageData;
          this.total = res.Data.Count;
        }
      });
    },
    //获取教师下拉
    GetTeacherList() {
      getTeacherDropDownList({ IsQLeave: 1 }).then((res) => {
        if (res.Code == 1) {
          res.Data.sort((a1, a2) => {
            return a1.LeaveStatus - a2.LeaveStatus;
          });
          this.TeacherList = res.Data;
          var obj = {
            TeacherName: "全部",
            TId: "-1",
          };
          this.TeacherList.unshift(obj);
        }
      });
    },

    getBranchList() {
      //获取校区
      getSchoolDropdown({})
        .then((res) => {
          this.CompanyList = res.Data;
          var obj = {
            SName: "全部",
            SId: "-1",
          };
          this.CompanyList.unshift(obj);
        })
        .catch(() => {});
    },
    goUrl(path, id) {
      this.OpenNewUrl("/financial/" + path, {
        id: id,
        datetype: this.datetype,
        valueyear: this.valueyear,
        StartMonth: this.msg.StartMonth,
        EndMonth: this.msg.EndMonth,
      });
    },
    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/GetTeacherConsumptionHoursStatisticsToExcel",
        msg,
        text
      );
    },
    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>