<template>
  <q-dialog
    v-model="persistent"
    persistent
    content-class="bg-grey-1"
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">
          {{ objOption.CourseId == 0 ? "新增课程信息" : "修改课程信息" }}
        </div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">基本设置</div>
        <div class="row wrap">
          <q-input
            filled
            stack-label
            :dense="false"
            v-model="objOption.CourseName"
            ref="CourseName"
            class="col-6 q-pr-lg q-pb-lg"
            label="课程名称"
            :rules="[val => !!val || '请填写课程名称']"
          />

          <q-select
            filled
            stack-label
            option-value="TId"
            option-label="TeacherName"
            v-model="chooseTeacher"
            ref="Teacher_Id"
            :options="TeacherList"
            label="教师团队"
            :dense="false"
            class="col-6 q-pr-lg q-pb-lg"
            emit-value
            map-options
            multiple
          />
        </div>
        <div class="row wrap">
          <div class="col-6 q-pb-lg q-pr-lg">
            <q-uploader
              :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
              style="width:auto;height:139px"
              flat
              hide-upload-btn
              max-files="1"
              label="课程封面"
              accept=".jpg, image/*"
              :factory="uploadFile"
              auto-upload
            >
            </q-uploader>
          </div>
          <div class="col-6 q-pr-lg q-pb-lg">
            <q-input
              v-model="objOption.CourseFeature"
              filled
              type="textarea"
              placeholder="课程特色"
            />
          </div>
        </div>
        <div
          class="text-caption q-mb-lg q-px-md text-grey-6"
          v-if="isShowPrice == 1"
        >
          价格设置
          <q-toggle
            style="float:right;"
            size="md"
            left-label
            label="阶梯定价"
            color="primary"
            :false-value="0"
            :true-value="1"
            v-model="objOption.IsOpenStepPrice"
          />
        </div>
        <div class="row wrap" v-if="isShowPrice == 1">
          <div class="col-6">
            <q-input
              filled
              stack-label
              :dense="false"
              v-model="objOption.OriginalPrice"
              ref="OriginalPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="原价"
              @keyup.native="checkPrice(objOption, 'OriginalPrice')"
              :rules="[val => !!val || '请填写原价']"
            />
          </div>
          <div class="col-6">
            <q-input
              filled
              stack-label
              :dense="false"
              v-model="objOption.SellPrice"
              ref="SellPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="卖价"
              @keyup.native="checkPrice(objOption, 'SellPrice')"
              :rules="[val => !!val || '请填写卖价']"
            />
          </div>
        </div>
        <div class="row wrap" style="margin:20px 0;" v-if="isShowPrice == 1">
          <div class="col-6">
            <q-btn
              v-if="objOption.IsOpenStepPrice == 1"
              size="10px"
              @click="addStepPrice()"
              round
              color="primary"
              icon="iconfont icon-img_haha"
            />
          </div>
        </div>
        <template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1">
          <div
            class="row wrap"
            v-for="(item, index) in ladderPriceList"
            :key="index"
          >
            <div class="col-6">
              <q-input
                filled
                stack-label
                v-model="item.PersionNum"
                @keyup.native="checkInteger(item, 'PersionNum')"
                :dense="false"
                class="col-6 q-pr-lg q-pb-lg"
                label="人"
              />
            </div>
            <div class="col-6" style="position:relative;">
              <q-input
                filled
                stack-label
                v-model="item.PersionPrice"
                @keyup.native="checkPrice(item, 'PersionPrice')"
                :dense="false"
                class="col-6 q-pr-lg q-pb-lg"
                label="价格"
              />
              <q-btn
                style="position:absolute;right:-5px;top:20px;"
                size="6px"
                @click="delStepPrice(index)"
                round
                color="red"
                icon="iconfont icon-guanbi1"
              />
            </div>
          </div>
        </template>
        <div
          class="text-caption q-mb-lg q-px-md text-grey-6"
          v-if="isShowPrice == 1"
        >
          可续费课程
          <q-toggle
            style="float:right;"
            size="md"
            left-label
            label="可续费课程"
            color="primary"
            :false-value="0"
            :true-value="1"
            v-model="objOption.IsRenew"
          />
        </div>
        <div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1">
          <div class="col-6">
            <q-input
              filled
              stack-label
              :dense="false"
              v-model="objOption.RenewOgPrice"
              ref="RenewOgPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="续费原价"
              @keyup.native="checkPrice(objOption, 'RenewOgPrice')"
              :rules="[val => !!val || '请填写续费原价']"
            />
          </div>
          <div class="col-6">
            <q-input
              filled
              stack-label
              :dense="false"
              v-model="objOption.RenewSlPrice"
              ref="RenewSlPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="续费售价"
              @keyup.native="checkPrice(objOption, 'RenewSlPrice')"
              :rules="[val => !!val || '请填写续费售价']"
            />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input
              filled
              stack-label
              :dense="false"
              mask="#"
              fill-mask="0"
              reverse-fill-mask
              v-model="objOption.ClassHours"
              ref="ClassHours"
              class="col-6 q-pr-lg q-pb-lg"
              label="课时数量"
              :rules="[val => !!val || '请填写课时信息']"
            />
          </div>
          <div class="col-6">
            <q-select
              filled
              stack-label
              option-value="CateId"
              option-label="CateName"
              v-model="chosenCateId"
              ref="CateId"
              :options="TreeCategoryList"
              label="所属系列"
              class="col-6 q-pr-lg q-pb-lg"
              emit-value
              map-options
              :rules="[val => !!val || '请选择课程所属系列']"
            />
          </div>
        </div>
        <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div>
        <ext-editor
          :defaultMsg="objOption.CourseIntro"
          classStr="col-12"
          @getEditValue="getEditValue"
        ></ext-editor>
        <div class="row wrap">
          <div class="col-6">
            <span>上架端口：</span>
            <template v-for="(item, index) in SaleplatList">
              <q-checkbox
                v-model="choosePlat"
                :label="item.Name"
                :val="item.Id"
              />
            </template>
          </div>
          <div class="col-6">
            <q-toggle
              style="float:right;"
              size="md"
              left-label
              label="K12课程"
              color="primary"
              :false-value="0"
              :true-value="1"
              v-model="objOption.IsKCourse"
            />
          </div>
        </div>
      </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 {
  queryCourseCategoryTree,
  saveCourseInfo,
  queryCourseInfo,
  querySaleplatList
} from "../../api/course/index";
import { getTeacherDropDownList } from "../../api/school/index";
import { UploadSelfFile } from "../../api/common/common";
import selectTree from "../common/select-tree";
import extEditor from "../common/ext-editor";
export default {
  components: {
    selectTree,
    extEditor
  },
  props: {
    saveObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      persistent: true,
      objOption: {
        CourseId: 0, //课程编号
        CoverImg: "", //课程封面图
        CourseName: "", //课程名称
        CourseIntro: "", //课程介绍
        CateId: 0, //课程编号
        School_Id: 0, //校区编号
        Teacher_Ids: "", //教学团队
        CourseFeature: "", //课程特色
        OriginalPrice: 0, //原价
        SellPrice: 0, //售价
        IsOpenStepPrice: 0, //是否开启阶梯定价(1-开启)
        IsRenew: 0, //是否可续费课程(1-是)
        RenewOgPrice: 0, //续费原价
        RenewSlPrice: 0, //续费售价
        Saleplat: "", //销售平台
        IsKCourse: 0, //是否是K12课程(1-是)
        ClassHours: 0
      },
      optionTitle: "",
      defaultArray: [],
      ladderPriceList: [], //阶梯定价数组
      saveCourseLoading: false,
      TreeCategoryList: [], //课程分类树形列表
      TeacherList: [], //关联教师下拉数据
      SaleplatList: [], //销售端口
      choosePlat: [], //选择的平台
      chooseTeacher: [], //选择老师
      chosenCateId: null,
      isShowPrice: 0 //是否显示价格【hk2021-03-05新增】
    };
  },
  created() {
    this.GetTeacherList();
    this.getSaleplat();
  },
  mounted() {
    this.initObj();
    
    
  },
  methods: {
    //获取教师下拉
    GetTeacherList() {
      getTeacherDropDownList({}).then(res => {
        if (res.Code == 1) {
          this.TeacherList = res.Data;
        }
      });
    },
    //获取销售端口列表
    getSaleplat() {
      querySaleplatList().then(res => {
        this.SaleplatList = res.Data;
      });
    },
    //获取编辑器值
    getEditValue(obj) {
      this.objOption.CourseIntro = obj;
    },
    getChild(obj) {
      if (obj == "") {
        this.objOption.CateId = 0;
      } else {
        this.objOption.CateId = obj;
      }
    },
    uploadFile(files) {
      UploadSelfFile("course", files[0], res => {
        if (res.Code == 1) {
          this.objOption.CoverImg = res.FileUrl;
        }
      });
    },
    getCategorytree() {
      this.TreeCategoryList = [];
      var qMsg = {};
      queryCourseCategoryTree(qMsg).then(res => {
        this.TreeCategoryList = res.Data;
          this.TreeCategoryList.forEach(x=>{
            if(x.CateId==this.objOption.CateId){
              this.chosenCateId=x
            }
          })
      });
    },
    //新增阶梯定价
    addStepPrice() {
      var obj = {
        ClassStepPriceId: 0,
        PersionNum: 2,
        PersionPrice: 0
      };
      if (this.ladderPriceList && this.ladderPriceList.length > 0) {
        var _index = this.ladderPriceList.length - 1;
        obj.PersionNum = parseInt(this.ladderPriceList[_index].PersionNum) + 1;
      }
      this.ladderPriceList.push(obj);
    },
    //删除阶梯定价
    delStepPrice(index) {
      this.ladderPriceList.splice(index, 1);
    },
    //初始化表单
    initObj() {
      this.defaultArray = [];
      if (this.saveObj && this.saveObj.CourseId > 0) {
        queryCourseInfo({
          CourseId: this.saveObj.CourseId
        }).then(res => {
          this.objOption.CourseId = res.Data.CourseId;
          this.objOption.CoverImg = res.Data.CoverImg;
          this.objOption.CourseName = res.Data.CourseName;
          this.objOption.CourseIntro = res.Data.CourseIntro;
          this.objOption.CateId = res.Data.CateId;
          this.objOption.School_Id = res.Data.School_Id;
          this.objOption.Teacher_Ids = res.Data.Teacher_Ids;
          this.objOption.CourseFeature = res.Data.CourseFeature;
          this.objOption.OriginalPrice = res.Data.OriginalPrice;
          this.objOption.SellPrice = res.Data.SellPrice;
          this.objOption.ClassHours = res.Data.ClassHours;
          this.objOption.IsOpenStepPrice = res.Data.IsOpenStepPrice;
          this.objOption.IsRenew = res.Data.IsRenew;
          this.objOption.RenewOgPrice = res.Data.RenewOgPrice;
          this.objOption.RenewSlPrice = res.Data.RenewSlPrice;
          this.objOption.Saleplat = res.Data.Saleplat;
          this.objOption.IsKCourse = res.Data.IsKCourse;
          if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) {
            this.ladderPriceList = res.Data.StepPriceList;
          }
          if (res.Data.TeacherIdList && res.Data.TeacherIdList.length > 0) {
            this.chooseTeacher = res.Data.TeacherIdList;
          }
          if (res.Data.SalePlatList && res.Data.SalePlatList.length > 0) {
            this.choosePlat = res.Data.SalePlatList;
          }
          this.defaultArray.push(res.Data.CateId);
          this.getCategorytree();
        });
        this.optionTitle = "修改课程信息";
      } else {
        this.optionTitle = "新增课程";
        this.objOption.CourseId = 0;
        this.objOption.CoverImg = "";
        this.objOption.CourseName = "";
        this.objOption.CourseIntro = "";
        this.objOption.CateId = 0;
        this.objOption.School_Id = 0;
        this.objOption.Teacher_Ids = "";
        this.objOption.CourseFeature = "";
        this.objOption.OriginalPrice = 0;
        this.objOption.SellPrice = 0;
        this.objOption.ClassHours = 0;
        this.objOption.IsOpenStepPrice = 0;
        this.objOption.IsRenew = 0;
        this.objOption.RenewOgPrice = 0;
        this.objOption.RenewSlPrice = 0;
        this.objOption.Saleplat = "";
        this.objOption.IsKCourse = 0;
        this.getCategorytree();
      }
      
    },
    //关闭弹窗
    closeCourseForm() {
      this.$emit("close");
      this.persistent = false;
    },
    //保存菜单
    saveCourse() {
      this.$refs.CourseName.validate();
      this.$refs.ClassHours.validate();
      this.$refs.CateId.validate();
      if (!this.$refs.CourseName.hasError && !this.$refs.ClassHours.hasError && !this.$refs.CateId.hasError) {
        this.saveCourseLoading = true;
        var Teacher_Ids = "";
        if (this.chooseTeacher && this.chooseTeacher.length > 0) {
          this.chooseTeacher.forEach(item => {
            Teacher_Ids += "," + item;
          });
        }
        if (Teacher_Ids != "") {
          Teacher_Ids = Teacher_Ids.substring(1);
        }
        var salePlat = "";
        if (this.choosePlat && this.choosePlat.length > 0) {
          this.choosePlat.forEach(item => {
            salePlat += "," + item;
          });
        }
        if (salePlat != "") {
          salePlat = salePlat.substring(1);
        }
        this.objOption.StepPriceList = this.ladderPriceList;
        this.objOption.Teacher_Ids = Teacher_Ids;
        this.objOption.Saleplat = salePlat;

        this.objOption.CateId=this.chosenCateId
        saveCourseInfo(this.objOption)
          .then(res => {
            this.saveCourseLoading = false;
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.$emit("success");
            this.closeSaveForm();
          })
          .catch(() => {
            this.saveCourseLoading = false;
          });
      }
    }
  }
};
</script>
