<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">
          <q-select @input="getClass" standout="bg-primary text-white" option-value="SId" option-label="SName"
            v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
        </div>
        <div class="col-3">
          <q-select @input="getClass" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
            v-model="msg.CouseId" :options="CourseList" emit-value map-options label="课程" use-input
            @filter="filterCourse">
            <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-select @input="refreshPage" standout="bg-primary text-white" option-value="ClassId"
            option-label="ClassName" v-model="msg.ClassId" :options="ClassList" emit-value map-options label="班级"
            use-input @filter="filterClass" />
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
            <template v-slot:control>
              <el-date-picker v-model="msg.StartDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
                :picker-options="option" :clearable='false' @change="resetSearch">
              </el-date-picker>    
            </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">
            <div v-for="(x,index) in props.row.GuestList" :key="index">
              <div class="border-bottom">
                {{ x.GuestName }}
              </div>
            </div>
            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
              <div class="remark-font">暂无</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-CurrentDeductionHours="props">
          <q-td :props="props">
            <div v-for="(x,index) in props.row.GuestList" :key="index">
              <div class="border-bottom">
                {{ x.CurrentDeductionHours }}
              </div>
            </div>
            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
              <div class="remark-font">暂无</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-CheckStatus="props">
          <q-td :props="props">
            <div v-for="(x,index) in props.row.GuestList" :key="index">
              <div class="border-bottom">
                <span v-if="x.CheckStatus == 0">正常</span>
                <span v-if="x.CheckStatus == 1">缺席</span>
                <span v-if="x.CheckStatus == 2">请假</span>
              </div>
            </div>
            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
              <div class="remark-font">暂无</div>
            </div>
          </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>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div v-for="(x,index) in props.row.GuestList" :key="index">
              <div class="border-bottom">
                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                  @click="EditCourse(x,props.row)" />
              </div>
            </div>
          </q-td>
        </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>
  </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
  } from "../../api/stuMan/index"
  import selectTree from "../../components/common/select-tree";
  import {
    openURL
  } from "quasar";
  import {
    EduDownLoad,
  } from '../../api/common/common';
  export default {
    meta: {
      title: "学员出勤管理"
    },
    components: {
      selectTree,
    },
    data() {
      return {
        columns: [{
            name: "ClassName",
            required: true,
            label: "班级",
            align: "left",
            field: row => row.ClassName
          },
          {
            name: "CourseName",
            required: true,
            label: "课程",
            align: "left",
            field: row => row.CourseName
          },
          {
            name: "TeacherName",
            required: true,
            label: "老师",
            align: "left",
            field: row => row.TeacherName
          },
          {
            name: "ClassDate",
            required: true,
            label: "上课日期",
            align: "left",
            field: row => row.ClassDate
          },
          {
            name: "TimeBucket",
            required: true,
            label: "上课时间段",
            align: "left",
            field: row => row.TimeBucket
          },
          {
            name: "GuestName",
            required: true,
            label: "学生",
            align: "left",
            field: row => row.GuestName
          },
          {
            name: "CurrentDeductionHours",
            required: true,
            label: "课时",
            align: "left",
            field: row => row.CurrentDeductionHours
          },
          {
            name: "CheckStatus",
            required: true,
            label: "状态",
            align: "left",
            field: row => row.CheckStatus
          },
          {
            name: "optioned",
            label: "操作",
            align: "left",
            field: row => row.optioned
          }
        ],
        data: [],
        loading: true,
        ShowOpts: [{
            label: "全部",
            value: "-1"
          },
          {
            label: "正常",
            value: "0"
          },
          {
            label: "删除",
            value: "1"
          }
        ],
        msg: {
          StartDate: '',
          School_Id: '',
          CouseId: 0,
          ClassId: 0,
          OrderGuestId: '',
          GuestName: '',
          CheckStatus: -1,
        },
        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,
      };
    },
    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 = today;
      this.getlist();
      this.getSchool()
      this.getClass()
      this.getCourseList()
    },
    methods: {
      //获取校区列表
      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();
      },
      //获取菜单分页列表
      getlist() {
        this.loading = true;
        getStudentAttendanceDayStatistics(this.msg)
          .then(res => {
            this.loading = false;
            this.data = res.Data;
          })
          .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>