<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">
          <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
            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">
          <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">
            <template v-if="scope.row.JoinType == 3">
              <el-tooltip
                class="item"
                effect="dark"
                content="续费订单"
                placement="top-start"
              >
                <div
                  style="
                    text-decoration: underline;
                    cursor: pointer;
                    color: red;
                  "
                  @click="gobaoming(scope.row.OrderId)"
                >
                  {{ scope.row.OrderId }}
                </div>
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.TargetJoinType == 3">
              <el-tooltip
                class="item"
                effect="dark"
                content="已续费"
                placement="top-start"
              >
                <div
                  style="
                    text-decoration: underline;
                    cursor: pointer;
                    color: green;
                  "
                  @click="gobaoming(scope.row.OrderId)"
                >
                  {{ scope.row.OrderId }}
                </div>
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.TargetJoinType == 4">
              <el-tooltip
                class="item"
                effect="dark"
                :content="`已转班【${scope.row.TargetClassName}】,关联订单号${scope.row.TargetOrderId}`"
                placement="top-start"
              >
                <div
                  style="
                    text-decoration: underline;
                    cursor: pointer;
                    color: orange;
                  "
                  @click="gobaoming(scope.row.OrderId)"
                >
                  {{ scope.row.OrderId }}
                </div>
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.TargetJoinType == 1">
              <template v-if="scope.row.JoinType == 3">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`原订单${scope.row.SourceOrderId}`"
                  placement="top-start"
                >
                  <div
                    style="
                      cursor: pointer;
                      text-decoration: underline;
                      color: blue;
                    "
                    @click="gobaoming(scope.row.OrderId)"
                  >
                    {{ scope.row.OrderId }}
                  </div>
                </el-tooltip>
              </template>
              <template v-else-if="scope.row.JoinType == 4">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`从【${scope.row.SourceClassName}】转入,关联订单号${scope.row.SourceOrderId}`"
                  placement="top-start"
                >
                  <div
                    style="
                      cursor: pointer;
                      text-decoration: underline;
                      color: blue;
                    "
                    @click="gobaoming(scope.row.OrderId)"
                  >
                    {{ scope.row.OrderId }}
                  </div>
                </el-tooltip>
              </template>
              <template v-else>
                <div
                  style="cursor: pointer; text-decoration: underline"
                  @click="gobaoming(scope.row.OrderId)"
                >
                  {{ scope.row.OrderId }}
                </div>
              </template>
            </template>
            <template v-else>
              <div
                style="cursor: pointer; text-decoration: underline"
                @click="gobaoming(scope.row.OrderId)"
              >
                {{ scope.row.OrderId }}
              </div>
            </template>
          </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: [],
    };
  },
  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();
    if (this.$route.query && this.$route.query.id) {
      this.msg.TeacherId = Number(this.$route.query.id);
    }
    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.comefrom) {
      //来自用户提成明细页面
      if (
        this.$route.query.comefrom == 1 &&
        this.$route.query.StartMonth == ""
      ) {
        this.msg.StartMonth = "2020-01";
      }
    }
    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.OrderId) {
      this.msg.OrderId = Number(this.$route.query.OrderId);
    }
    if (this.$route.query && this.$route.query.StudentName) {
      this.msg.StudentName = decodeURI(this.$route.query.StudentName);
    }
  },
  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({ 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);
        }
      });
    },
    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>