<template>
  <!-- 可补课时 -->
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 900px; max-width: 900px">
      <q-card-section>
        <div class="text-h6" v-if="type == 1">可补课课时</div>
        <div class="text-h6" v-if="type == 2">缺勤次数</div>
        <div class="text-h6" v-if="type == 3">请假次数</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <q-table
          :pagination="msg"
          :loading="loading"
          no-data-label="暂无相关数据"
          flat
          class="sticky-column-table"
          separator="none"
          :data="data"
          :columns="columns"
          row-key="name"
        >
          <template v-slot:top="props">
            <!-- <div class="col-2 q-table__title">可补课课时</div> -->
          </template>
          <!-- <template v-slot:body-cell-ContractNo="props">
          <q-td :props="props">
            <div style="color:#f00;cursor:pointer;" @click="seeContract(props.row)">
              {{props.row.ContractNo}}
            </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>
        </q-table>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeSaveForm"
        />
        <!-- <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="save" /> -->
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { getClassCheckPageList } from "../../api/stuMan/index.js";
export default {
  props: {
    type: {
      type: Number,
      default: 1,
    },
    setObj: {
      type: Object,
    },
  },
  data() {
    return {
      persistent: true,
      loading: false,
      pageCount: 0,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        rowsPerPage: 10,
        OrderGuestId: 0,
        CheckStatus: 1,
        MakeUpStatus: 2,
      },
      data: [],
      columns: [
        {
          name: "GuestName",
          label: "学生名称",
          align: "left",
          field: "GuestName",
        },
        {
          name: "ClassName",
          label: "班级名称",
          align: "left",
          field: "ClassName",
          required: true,
        },
        {
          name: "ClassNo",
          label: "班号",
          align: "left",
          field: "ClassNo",
        },
        {
          name: "CourseName",
          label: "课程",
          align: "left",
          field: "CourseName",
        },
        {
          name: "RoomName",
          label: "教室",
          align: "left",
          field: "RoomName",
        },
        {
          name: "TeacherName",
          label: "教师",
          align: "left",
          field: "TeacherName",
        },

        {
          name: "ClassDate",
          label: "上课时间",
          align: "left",
          field: "ClassDate",
        },
        {
          name: "TimeBucket",
          label: "上课时间段",
          align: "left",
          field: "TimeBucket",
        },
        {
          name: "CreateTime",
          label: "签到时间",
          align: "left",
          field: "CreateTime",
        },
      ],
    };
  },
  mounted() {
    if (this.setObj) {
      this.msg.OrderGuestId = this.setObj.Id;
    }
    if (this.type === 1) {
      //可补课时
      this.msg.CheckStatus = 1;
      this.msg.MakeUpStatus = 2;
    } else if (this.type === 2) {
      //   缺勤
      this.msg.CheckStatus = 1;
      delete this.msg.MakeUpStatus;
    } else if (this.type === 3) {
      //   请假
      this.msg.CheckStatus = 2;
      delete this.msg.MakeUpStatus;
    }
    this.getList();
  },
  methods: {
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    getList() {
      getClassCheckPageList(this.msg).then((res) => {
        if (res.Code === 1) {
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }
      });
    },
    //重新查询
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getList();
    },
    //翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  color: #8c939d;
  position: relative;
  overflow: hidden;
}

.addDutyMain {
  display: inline-block;
  width: 118px;
  height: 118px;
  font-size: 70px;
  border: 1px dashed #d9d9d9;
  line-height: 120px;
}

.ItemImgDiv {
  width: 118px;
  height: 118px;
  position: relative;
  margin: 0 10px 10px 0;
  display: inline-block;
}

._delete_img {
  position: absolute;
  top: 0px;
  height: 82px;
  width: 143px;
  line-height: 34px;
  text-align: center;
  background-color: rgba(2, 2, 2, 0.6);
  display: inherit;
  opacity: 0;
  transition: all linear 0.5s;
}

._delete_img i.iconfont {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #e95252 !important;
  background-color: rgba(251, 251, 251, 0.9);
  margin-top: 26px;
}

._upload_box ul li {
  float: left;
  height: 82px;
  width: 143px;
  padding: 0px 20px 20px 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}

._upload_box ul li img {
  height: 82px;
  width: 143px;
}

._upload_box ul li:hover ._delete_img {
  opacity: 1;
}

._upload_tips {
  font-size: 12px;
  position: absolute;
  top: 71%;
  width: 100%;
  left: 0;
  text-align: center;
  color: #949494;
}
</style>
