<style>

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 600px;max-width:600px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">关联其他课程</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row">
          <div class="col">
            <q-select dense standout behavior="menu" filled v-model="selectCourse" :options="courseOptions"
              @filter="filterCourseFn" input-debounce="0" use-input option-label="CourseName" option-value="CourseId"
              emit-value map-options :placeholder="!selectCourse ? '请选择关联课程' : ''" clearable />
          </div>
          <div class="q-ml-md">
            <q-btn color="primary" label="添加" @click="addCourse"></q-btn>
          </div>
        </div>
        <q-table :pagination="msg" no-data-label="暂无相关数据" flat style="margin-top:20px;" class="sticky-column-table"
          separator="none" :data="dataList" :columns="columns">
          <template v-slot:body-cell-Id="props">
            <q-td auto-width :props="props">
              <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
                @click="deleteClassCourse(props.row,props.rowIndex)" />
            </q-td>
          </template>
          <template v-slot:bottom>
          </template>
        </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="closeCourseForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
          @click="saveCourse" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    queryCourseDropdownList,
    setClassCourse,
    queryClassCourseList,
    deleteClassCourse
  } from '../../api/course/index'
  export default {
    components: {},
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        msg: {},
        persistent: true,
        saveCourseLoading: false,
        selectCourse: "", //选中的课程
        CourseList: [], //课程列表
        courseOptions: [], //筛选的课程列表
        dataList: [],
        columns: [{
            name: 'CourseName',
            label: '课程名称',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'SellPrice',
            label: '价格',
            field: 'SellPrice',
            align: 'left'
          },
          {
            name: 'ClassHours',
            label: '课时数',
            field: 'ClassHours',
            align: 'left'
          },
          {
            name: 'Id',
            label: '操作',
            field: 'Id'
          }
        ],
      }
    },
    created() {
      this.getCourseList();
    },
    mounted() {
      this.getClassCourse();
    },
    methods: {
      //获取课程列表
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 1
        }).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
            this.courseOptions = this.CourseList;
          }
        })
      },
      //获取班级关联课程列表
      getClassCourse() {
        queryClassCourseList({
          ClassId: this.setingObj.ClassId
        }).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        })
      },
      saveCourse() {
        var saveMsg = {
          courseMsg: this.dataList
        };
        setClassCourse(saveMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.closeCourseForm();
            this.$emit("success");
          }
        });
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      },
      //课程筛选
      filterCourseFn(val, update, abort) {
        update(() => {
          this.courseOptions = this.CourseList.filter(
            v => v.CourseName.indexOf(val) > -1
          );
        });
      },
      //添加关联课程
      addCourse() {
        if (this.selectCourse) {
          let temp = this.CourseList.find(x => x.CourseId == this.selectCourse);
          if (temp) {
            this.dataList.push({
              Id: 0,
              ClassId: this.setingObj.ClassId,
              CourseId: temp.CourseId,
              CourseName: temp.CourseName,
              SellPrice: temp.SellPrice,
              ClassHours: temp.ClassHours,
            });
          }
          this.selectCourse = "";
        }
      },
      //删除班级课程
      deleteClassCourse(item, index) {
        var delMsg = {
          Id: item.Id
        };
        this.$q.dialog({
          title: '提示信息',
          message: "是否要删除此关联课程?",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          if (item.Id > 0) {
            deleteClassCourse(delMsg).then(res => {
              if (res.Code == 1) {
                this.$q.notify({
                  icon: 'iconfont icon-chenggong',
                  color: 'accent',
                  timeout: 2000,
                  message: '删除成功！',
                  position: 'top'
                })
                this.dataList.splice(index, 1);
              } else {
                this.$q.notify({
                  icon: 'iconfont icon-chenggong',
                  color: 'accent',
                  timeout: 2000,
                  message: res.Message,
                  position: 'top'
                })
              }
            })
          } else {
            this.dataList.splice(index, 1);
          }
        }).onCancel(() => {});
      }
    }
  }

</script>
