<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">选择章节</div>
      </q-card-section>
      <div class="col row wrap q-mr-lg q-col-gutter-md" style="margin:20px 0;">
        <div class="col-6">
          <q-input @input="filterCourseFn" filled clearable v-model="CourseName" label="课程名称" @clear="filterCourseTWo"
            maxlength="20" />
        </div>
      </div>
      <q-card-section class="q-pt-none scroll" style="max-height:60vh">
        <q-table :loading="loading" no-data-label="暂无相关数据" flat style="height:400px" selection="single"
          :selected.sync="selected" class="sticky-column-table sticky-header-table no-bottom-table" separator="none"
          :pagination="initialPagination" :data="fiterDataList" :columns="columns" hide-bottom row-key="CourseId">
        </q-table>
      </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="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveChapter" />
          <template v-slot:loading>
            <q-spinner-ios />
          </template>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    GetCourseChaperDate,
    SetImportCourse
  } from '../../api/course/index'
  export default {
    props: {
      CourseId: {
        type: String,
        default: null
      },
      MyChapterNo: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        optionTitle: "",
        saveLoading: false,
        loading: false,
        CourseName: '', //课程名称
        dataList: [], //章节选择数据
        fiterDataList: [],
        initialPagination: {
          rowsPerPage: 1000
        },
        columns: [{
          name: 'CourseName',
          label: '课程名称',
          field: 'CourseName',
          align: 'left',
        }, {
          name: 'ChapterCount',
          label: '章节',
          field: 'ChapterCount',
          align: 'left',
        }, {
          name: 'UnitCount',
          label: '单元',
          field: 'UnitCount',
          align: 'left',
        }],
        selected: [],
      }
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        let msg = {
          CourseId: this.CourseId
        }
        GetCourseChaperDate(msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
            this.fiterDataList = res.Data;
          }
        })
      },
      //课程筛选
      filterCourseFn() {
        this.fiterDataList = [];
        this.dataList.forEach(x => {
          if (x.CourseName.indexOf(this.CourseName) > -1) {
            this.fiterDataList.push(x);
          }
        })
      },
      filterCourseTWo() {
        this.fiterDataList = this.dataList;
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存
      saveChapter() {
        if (this.selected.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择课程`
          })
          return
        }
        if(this.saveLoading) return;
        this.saveLoading=true;
        let msg = {
          CourseIds: '',
          MaxLength: this.MyChapterNo,
          NewCourseId: this.CourseId
        }
        let ckedArr = [];
        if (this.selected && this.selected.length > 0) {
          this.selected.forEach(x => {
            ckedArr.push(x.CourseId);
          })
        }
        msg.CourseIds = ckedArr.toString();
        SetImportCourse(msg).then(res => {
          if (res.Code == 1) {
            this.$emit('success')
            this.closeSaveForm();
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
          }
        }).catch(e=>{
          this.saveLoading=false
        })
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>
