<!--vip课程-->
<template>
  <div>
    <div style="row items-center">
      <div class="col row wrap">
        <q-input filled stack-label ref="CourseName" maxlength="50" :dense="false" :rules="[val => !!val || '请输入课程名称']"
          v-model="CourseMsg.CourseName" label="课程名称" class="col-6 q-pr-lg q-pb-lg" />
        <div class="col-6 row">
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="CourseMsg.HourType"
            :options="HourTypeList" label="课时类型" class="col-5" emit-value map-options />
          <q-input filled stack-label :dense="false" style="margin-left:28px;" ref="TotalHour"
            v-model="CourseMsg.TotalHour" @keyup.native="checkPrice(CourseMsg,'TotalHour')" class="col-6" label="课时" />
        </div>
      </div>
      <div class="col row wrap">
        <q-input filled stack-label :dense="false" ref="CoursePrice" maxlength="10"
          @keyup.native="checkPrice(CourseMsg, 'CoursePrice')" v-model="CourseMsg.CoursePrice"
          class="col-6 q-pr-lg q-pb-lg" label="价格" :rules="[val => !!val || '请输入价格']" />
        <q-select filled stack-label option-value="Id" option-label="Name" v-model="CourseMsg.CourseTimeId"
          ref="CourseTimeId" :options="CourseTimeList" label="上课时段" class="col-6" emit-value map-options />
      </div>
      <q-input filled stack-label :dense="false" v-model="CourseMsg.Remarks" type="textarea" class="col-12 q-py-sm"
        label="备注" />
    </div>
  </div>
  </div>
</template>
<script>
  import {
    getScrollCourseTimeList
  } from "../../../../api/course/roll";
  import {
    SetVipCourseApply
  } from "../../../../api/sale/sale";

  export default {
    props: {
      stuData: {
        //学生是否续费
        type: Object,
        default: null
      },
    },
    data() {
      return {
        CourseMsg: {
          Id: 0,
          CourseName: "", //课程名称
          HourType: 1, //课时类型 1课时2小时
          TotalHour: '', //课时
          CoursePrice: '', //价格
          CourseTimeId: 1, //上课时段
          Remarks: '',
          StuId: 1
        },
        CourseTimeList: [],
        HourTypeList: [{
          Id: 1,
          Name: '课时'
        }, {
          Id: 2,
          Name: '小时'
        }]
      };
    },
    created() {},
    mounted() {
      this.getCourseTimeList();
      this.ceshi();
    },
    methods: {
      ceshi() {
        var p = new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve('绥滨啥数据');
          }, 2000)
        })
        return p
      },
      //关联上课时间段
      getCourseTimeList() {
        getScrollCourseTimeList({}).then(res => {
          if (res.Code == 1) {
            this.CourseTimeList = res.Data;
          }
        });
      },
      //保存
      saveVipCourse() {
        let StuArr = [];
        if (this.stuData && this.stuData.StuList.length > 0) {
          this.stuData.StuList.forEach(x => {
            StuArr.push(x.StuId);
          })
        }
        this.CourseMsg.StuId = StuArr.toString();
        this.$refs.CourseName.validate();
        this.$refs.CoursePrice.validate();
        if (!this.$refs.CourseName.hasError && !this.$refs.CoursePrice.hasError) {
          SetVipCourseApply(this.CourseMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "操作成功!",
                position: "top"
              });
              this.$emit("success");
            }
          });
        }
      }
    }
  };

</script>
