<style>
  .studentManage .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .studentManage .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }
</style>
<template>
  <div class="page-body studentManage">
    <div class="page-search row items-center ">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3 Sysuser_Date">
          <q-field filled label="日期" stack-label>
            <template v-slot:control>
              <div class="self-center full-width no-outline" tabindex="0">{{ daterangeTimes }}</div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                    <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
                    @range-end="dateRangeHandler"></q-date>
                </q-popup-proxy>
            </template>
          </q-field>
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="学生名称"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.CheckStatus" :options="AttendanceList2" emit-value map-options label="出勤状态" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-tow-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
        row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">学员出勤管理</div>
          <q-space />
          <div class="page-option">
            <!-- <q-btn color="accent" size="sm" class="q-mr-md" label="导出" @click="getexport()" /> -->
          </div>
        </template>
        <template v-slot:body-cell-GuestName="props">
          <q-td :props="props" style="padding-right:0px">
            {{props.row.GuestName}}
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改上课方式"
                  @click="EditClassMode(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <!-- 修改状态 -->
    <q-dialog v-model="IsShowDialog" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 400px;max-width:500px;">
        <q-card-section>
          <div class="text-h6">修改出勤状态</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <q-select standout="bg-primary text-white" option-value="Id" option-label="Name" v-model="editMsg.CheckStatus"
            :options="AttendanceList" emit-value map-options label="出勤状态" />
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="IsShowDialog=false" />
          <q-btn label="立即提交" color="accent" class="q-px-md" style="font-weight:400 !important"
            @click="saveAttendance"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <!-- 修改上课方式 -->
    <q-dialog v-model="IsShowGuestCheck" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 400px;max-width:500px;">
        <q-card-section>
          <div class="text-h6">修改上课方式</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <q-select standout="bg-primary text-white" option-value="Id" option-label="Name" v-model="ClassModeMsg.AttendanceMethod"
            :options="GuestCheckList" emit-value map-options label="上课方式" />
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="IsShowGuestCheck=false" />
          <q-btn label="立即提交" color="accent" class="q-px-md" style="font-weight:400 !important"
            @click="setGuestCheck" :loading="GuestCheckLoading"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import {
    addClassCheck
  } from '../../api/course/class';
  import {
    queryCourseDropdownList,
  } from '../../api/course/index' //课程下拉
  //获取校区列表
  import {
    getSchoolDropdown,
    deleteClass,
    getClassDropDownList
  } from '../../api/school/index';
  import {
    getStudentAttendanceDayStatistics,SetGuestCheckStyle
  } from "../../api/stuMan/index"
  import selectTree from "../../components/common/select-tree";
  import {
    openURL
  } from "quasar";
  import {
    EduDownLoad,
  } from '../../api/common/common';
  import { date } from 'quasar'
  export default {
    meta: {
      title: "学员出勤管理"
    },
    components: {
      selectTree,
    },
    data() {
      return {
        columns: [{
            name: "GuestName",
            required: true,
            label: "学生",
            align: "left",
            field: row => row.GuestName
          },
          {
            name: "CourseName",
            required: true,
            label: "课程",
            align: "left",
            field: row => row.CourseName
          },
          {
            name: "TeacherName",
            required: true,
            label: "老师",
            align: "left",
            field: row => row.TeacherName
          },
          {
            name: "StartTime",
            required: true,
            label: "上课时间",
            align: "left",
            field: row => row.StartTime
          },
          {
            name: "EndTime",
            required: true,
            label: "下课时间",
            align: "left",
            field: row => row.EndTime
          },
          {
            name: "AttendanceMethodName",
            required: true,
            label: "上课方式",
            align: "left",
            field: row => row.AttendanceMethodName
          },
          {
            name: "optioned",
            label: "操作",
            align: "left",
            field: row => row.optioned
          }
        ],
        data: [],
        loading: true,
        ShowOpts: [{
            label: "全部",
            value: "-1"
          },
          {
            label: "正常",
            value: "0"
          },
          {
            label: "删除",
            value: "1"
          }
        ],
        msg: {
          PageIndex:1,
          PageSize: 10,
          StartDate: '',
          EndDate: '',
          GuestName: '',
        },
        IsShowDialog: false,
        //课程分类树形列表
        TreeCategoryList: [],
        returnString: [], //默认值
        CourseList: [], //关联课程下拉数据
        AllCourseList: [],
        ClassList: [], //班级下拉
        allClassList: [],
        AttendanceList2: [{
          Name: '全部',
          Id: -1
        }, {
          Name: '缺席',
          Id: 1
        }, {
          Name: '请假',
          Id: 2
        }, ],
        AttendanceList: [{
          Name: '正常',
          Id: 0
        }, {
          Name: '缺席',
          Id: 1
        }, {
          Name: '请假',
          Id: 2
        }, ],
        option: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        schoolList: [],
        editMsg: { //修改的对象
          CheckStatus: 0,
          StudyNum: 0,
        },
        iseditjurisdiction: false,
        ClassModeMsg: {
          ClassCheckId: 0,
          AttendanceMethod: null,
        },
        pageCount: 0,
        total:0,
        daterangeTimes:'',
        IsShowGuestCheck: false,
        GuestCheckList: [{
          Name: '线下',
          Id: 1
        }, {
          Name: '线上',
          Id: 2
        }, {
          Name: '录播',
          Id: 3
        }, ],
        GuestCheckLoading: false,
        dateRange: {
          to: '',
          from:''
        }
      };
    },
    mounted() {
      let userinfo = this.getLocalStorage();
      userinfo.ActionMenuList.map(x => { //判断权限
        if (x.FunctionCode == "Student_Attendance") { //判断是否有修改状态的权限
          this.iseditjurisdiction = true;
        }
      })
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let day = d.getDate();
      day = day < 10 ? '0' + day : day;
      let today = year + '-' + month + '-' + day;

      this.msg.StartDate = date.formatDate(date.addToDate(new Date(), { days: -31 }), 'YYYY-MM-DD');
      this.msg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 0 }), 'YYYY-MM-DD');;
      this.daterangeTimes = `${this.msg.StartDate}/${today}`

      this.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: -31 }), 'YYYY/MM/DD');
      this.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 0 }), 'YYYY/MM/DD');
      this.getlist();
      this.getSchool()
      this.getClass()
      this.getCourseList()
    },
    methods: {
      // 修改上课方式
      EditClassMode(item) {
        this.ClassModeMsg.ClassCheckId = item.ClassCheckId
        this.ClassModeMsg.AttendanceMethod = item.AttendanceMethod
        this.IsShowGuestCheck = true
      },
      setGuestCheck() {
        if(!this.ClassModeMsg.AttendanceMethod) return this.$q.notify({
                type: 'negative',
                position: "top",
                message: `请选择上课方式!`
              })
        this.GuestCheckLoading = true;
        SetGuestCheckStyle(this.ClassModeMsg)
          .then(res => {
            this.ClassModeMsg = {
              ClassCheckId: 0,
              AttendanceMethod: null,
            },
            this.IsShowGuestCheck = false
            this.GuestCheckLoading = false;
            this.resetSearch()
          })
          .catch(() => {
            this.GuestCheckLoading = false;
          });
      },
      optionsFn(cd) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY-MM-DD')
      },
      dateRangeHandler(e) {
        this.msg.StartDate = `${e.from.year}-${e.from.month>9?e.from.month:'0'+e.from.month}-${e.from.day>9?e.from.day:'0'+e.from.day}`
        this.msg.EndDate = `${e.to.year}-${e.to.month>9?e.to.month:'0'+e.to.month}-${e.to.day>9?e.to.day:'0'+e.to.day}`
        this.daterangeTimes = `${this.msg.StartDate} / ${this.msg.EndDate} `

        this.dateRange.to = `${e.from.year}/${e.from.month}/${e.from.day}`
        this.dateRange.from =  `${e.to.year}/${e.to.month}/${e.to.day}`

        if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
        this.resetSearch()
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            this.schoolList = tempArray;
          }
        })
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 1
        }).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
            var obj = {
              CourseName: '不限',
              CourseId: 0
            }
            this.CourseList.unshift(obj);
            this.AllCourseList = JSON.parse(JSON.stringify(this.CourseList));
          }
        })
      },
      //筛选课程
      filterCourse(val, update) {
        update(() => {
          if (val === '') {
            this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList))
          } else {
            const needle = val.toLowerCase();
            this.CourseList = this.AllCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //获取班级下拉
      getClass() {
        getClassDropDownList({
          CourseId: this.msg.CouseId,
          SchoolId: this.msg.School_Id,
          IsAddDefault: 0, //添加默认选项
        }).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            jsonData.unshift({
              ClassId: 0,
              ClassName: "不限"
            })
            if (jsonData && jsonData.length > 0) {
              this.ClassList = JSON.parse(JSON.stringify(jsonData));
              this.allClassList = JSON.parse(JSON.stringify(jsonData));;
            }
            this.msg.ClassId = 0
            this.refreshPage()
          }
        });
      },
      //筛选班级
      filterClass(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)
          }
        })
      },
      //重新查询
      resetSearch() {
        this.getlist();
      },
      //翻页
      changePage(val) {
        this.msg.PageIndex = val;
        this.getList();
      },
      //获取菜单分页列表
      getlist() {
        this.loading = true;
        getStudentAttendanceDayStatistics(this.msg)
          .then(res => {
            this.loading = false;
            this.data = res.Data.PageData;
            this.total = res.data.data.count;
            this.pageCount = res.Data.pageModel.PageCount;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      //刷新页面
      refreshPage() {
        this.getlist();
      },
      EditCourse(x, row) {
        this.editMsg.CheckStatus = x.CheckStatus;
        this.editMsg.StudyNum = x.StudyNum;
        this.editMsg.ClassDate = row.ClassDate;
        this.editMsg.ClassRoomId = row.ClassRoomId;
        this.editMsg.ClassTimeId = x.ClassTimeId;
        this.editMsg.OrderGuestId = x.OrderGuestId;
        this.editMsg.School_Id = row.School_Id;
        this.editMsg.TeacherId = row.TeacherId;
        this.editMsg.classId = row.ClassId;
        this.IsShowDialog = true
      },
      //跳转至我的课程
      goMycourse(obj) {
        var tempStr = window.location.origin + "/course/courseinfo?CourseId=" + obj.CourseId;
        openURL(tempStr)
      },
      saveAttendance() { //修改出勤状态
        let signMsg = []
        signMsg.push(this.editMsg)
        addClassCheck(signMsg).then(res => {
          if (res.Code == 1) {
            this.getlist();
            this.IsShowDialog = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '操作成功',
              position: 'top'
            })
          }
        })
      },
      getexport() { //导出
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/stu/GetStudentAttendanceDayStatisticsToExcel", msg, '学员出勤管理')
      },
    }
  };
</script>
<style scoped>
  .border-bottom {
    border-bottom: 1px dashed #EEE;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
</style>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>
