<template>
  <!-- 跳课 -->
  <q-dialog
    v-model="show"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 900px; max-width: 900px">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">跳课</div>
        <q-space />
        <q-btn icon="close" flat round dense @click="changeDig(false)" />
      </q-card-section>
      <q-card-section class="q-pt-none">
        <div class="row col flex q-col-gutter-md">
          <q-field filled label="姓名" readonly stack-label class="col-4">
            <template v-slot:control>
              <div>{{ saveObj.GuestName }}</div>
            </template>
          </q-field>
          <!-- <q-field filled label="课程" readonly  stack-label class="col-4">
            <template v-slot:control>
              <div>{{ saveObj.CourseName }}</div>
            </template>
          </q-field>
          <q-field filled label="班级" readonly  stack-label class="col-4">
            <template v-slot:control>
              <div>{{ saveObj.ClassName }}</div>
            </template>
          </q-field> -->
          <q-field filled label="已上课次数" readonly stack-label class="col-4">
            <template v-slot:control>
              <div>{{ saveObj.CourseChapterNo }}</div>
            </template>
          </q-field>
          <q-field filled label="预约次数" readonly stack-label class="col-4">
            <template v-slot:control>
              <div>{{ saveObj.AppointNum }}</div>
            </template>
          </q-field>
        </div>
        <div class="q-my-xs">
          类型:
          <q-radio
            v-model="type"
            val="a"
            label="第一次课开始"
            color="teal"
            @input="changeType"
          />
          <q-radio
            v-model="type"
            val="b"
            label="中途已上课"
            color="teal"
            @input="changeType"
          />
          <q-radio
            v-model="type"
            val="c"
            label="后续未上课"
            color="teal"
            @input="changeType"
          />
        </div>
        <div class="row col q-col-gutter-md">
          <q-input
            filled
            v-model.number="msg.SChapterNo"
            label="跳课开始章节"
            type="number"
            class="col-4"
            stack-label
            :min="0"
            v-if="type == 'b'"
            @change="changeStartChapter"
          />
          <q-input
            filled
            v-model.number="endSChapterNo"
            label="跳课结束章节"
            type="number"
            class="col-4"
            stack-label
            :min="0"
            :max="999"
            @change="changeEndChapter"
          />
        </div>
        <div class="q-my-xs" style="word-wrap:break-word">
          <span style="white-space:nowrap">跳课章节列表:</span>{{ msg.ChapterNos }}</div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" @click="changeDig(false)" />
        <q-btn
          label="保存"
          color="accent q-px-md"
          :loading="loading"
          @click="save"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { setGuestStartChapter } from "../../api/stuMan/index.js";
export default {
  model: {
    prop: "show",
    event: "changeshow"
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    saveObj: {
      type: Object
    }
  },
  watch: {
    show(){
      this.loading = false
    },
  },
  data() {
    return {
      type: "c",
      saveLoading: false,
      msg: {
        StuId: 0,
        GuestId: 0,
        CourseId: 0,
        ChapterNos: "",
        SChapterNo: 0
      },
      endSChapterNo: 0,
      loading: false
    };
  },
  mounted() {},
  methods: {
    //开关弹窗
    changeDig(val) {
      this.$emit("changeshow", val);
    },
    changeType() {
      this.msg.SChapterNo = 0;
      this.msg.ChapterNos = "";
      this.endSChapterNo = 0;
    },
    changeStartChapter() {
      if (!this.msg.SChapterNo) {
        this.msg.SChapterNo = 0;
      }
      this.changeEndChapter();
    },
    changeEndChapter() {
      if (!this.endSChapterNo) {
        this.endSChapterNo = 0;
      }
      if (this.endSChapterNo>=999) {
        this.endSChapterNo = 999;
      }
      const end = parseInt(this.endSChapterNo);
      let arr = [];
      if (this.type == "a") {
        for (let i = 1; i <= end; i++) {
          arr.push(i);
        }
      } else if (this.type == "b") {
        for (let i = this.msg.SChapterNo; i <= end; i++) {
          arr.push(i);
        }
      } else if (this.type == "c") {
        let start = this.saveObj.CourseChapterNo + this.saveObj.AppointNum;
        for (let i = start + 1; i <= end; i++) {
          arr.push(i);
        }
      }
      this.msg.ChapterNos = arr.toString();
    },
    save() {
      if (this.endSChapterNo == 0) {
        this.$q.notify({
          message: "请输入跳课的章节",
          position: "top"
        });
        return;
      }
      this.msg.StuId = this.saveObj.Student_Id;
      this.msg.GuestId = this.saveObj.Id;
      this.msg.CourseId = this.saveObj.CourseId;
      this.loading = true;
      setGuestStartChapter(this.msg)
        .then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.$q.notify({
              message: "操作成功",
              position: "top"
            });
            this.changeDig(false);
            this.$emit("success");
          }
        })
        .catch(err => {
          this.loading = false;
        });
    }
  }
};
</script>
