<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 :disable="!isHaveCourseHoursEdit"
              @keyup.native="checkPrice(objOption, 'ClassHours')" 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 @input="getCourseSubject(objOption.CateId)" option-value="CateId"
              option-label="CateName" v-model="objOption.CateId" 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="row wrap">
          <div class="col-6">
            <q-select filled stack-label option-value="Id" disable option-label="SubjectName"
              v-model="objOption.CourseSubject" ref="CourseSubject" :options="courseSubjectList" label="所属科目"
              class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
          </div>
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseRate"
              ref="CourseRate" :options="courseLevelList" label="课程等级" class="col-6 q-pr-lg q-pb-lg" emit-value
              map-options />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="CourseEmphasis" multiple
              use-chips ref="CourseEmphasis" :options="keynoteList" label="课程重点" class="col-6 q-pr-lg q-pb-lg"
              emit-value map-options />
          </div>
          <div class="col-6 q-pb-lg q-pr-lg">
            <q-uploader :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }" style="width: auto; " flat
              hide-upload-btn max-files="1" label="图标" accept=".jpg, image/*" :factory="uploadFile2" auto-upload>
            </q-uploader>
            <q-input filled label="背景颜色" v-model="objOption.B2BBackground" :rules="['anyColor']" class="my-input">
              <template v-slot:append>
                <q-icon name="colorize" class="cursor-pointer">
                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                    <q-color v-model="objOption.B2BBackground" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <img id="background" :src="objOption.B2BIcon" height="100" width="100" crossorigin="anonymous"
              style="display:none" />
          </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-9">
            <span>上架端口：</span>
            <template v-for="(item, index) in SaleplatList">
              <q-checkbox v-model="choosePlat" :label="item.Name" :val="item.Id" :key="index" />
            </template>
          </div>
          <div class="col-3">
            <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>
        <div class="row col-12" v-if="choosePlat.find((e) => e == 4)">
          <span class="q-mb-sm">选择分类：</span>
          <q-card class="full-width">
            <q-tree class="col-sm-6" :nodes="goodClassify" node-key="Id" label-key="Name" children-key="ChildList"
              tick-strategy="strict" :ticked.sync="chooseGoodsClassify" default-expand-all
              @update:ticked="handleCheckChange" />
          </q-card>
        </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 ColorThief from "colorthief";
  import {
    queryCourseCategoryTree,
    saveCourseInfo,
    queryCourseInfo,
    querySaleplatList,
    getCourseRate,
    getCourseSubject,
    getCourseEmphasisEnumList
  } from "../../api/course/index";
  import {
    getTeacherDropDownList
  } from "../../api/school/index";
  import {
    UploadSelfFile
  } from "../../api/common/common";
  import extEditor from "../common/ext-editor";
  import {
    mapState
  } from "vuex";
  export default {
    components: {
      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,
          CategoryList: [],
          CourseRate: "", //课程等级
          CourseSubject: "", //课程科目
          B2BIcon: '', //图标
          B2BBackground: '', //背景
          CourseEmphasis: [], //课程重点   多选  英文逗号分隔
        },
        CourseEmphasis: [], //数据临时存放
        optionTitle: "",
        defaultArray: [],
        ladderPriceList: [], //阶梯定价数组
        saveCourseLoading: false,
        TreeCategoryList: [], //课程分类树形列表
        TeacherList: [], //关联教师下拉数据
        SaleplatList: [], //销售端口
        choosePlat: [], //选择的平台
        chooseTeacher: [], //选择老师
        isShowPrice: 0, //是否显示价格【hk2021-03-05新增】
        goodClassify: [], //商品分类列表
        chooseGoodsClassify: [], //选中的商品分类
        modifyClassifyList: [], //修改时返回的分类列表
        courseLevelList: [], //课程等级列表
        courseSubjectList: [], //课程科目列表
        keynoteList: [], //重点枚举列表
      };
    },
    created() {
      this.GetTeacherList();
      this.getSaleplat();
      this.getGoodsClassify();
      this.getCourseRateList();
      this.getCourseEmphasisList(); //获取课程重点枚举列表
      this.initObj();

    },
    computed: mapState({
      isHaveCourseHoursEdit(state) {
        if (
          state.user.userInfo &&
          state.user.userInfo.ActionMenuList &&
          state.user.userInfo.ActionMenuList.length > 0
        ) {
          let action = state.user.userInfo.ActionMenuList.find((x) => {
            if (x.FunctionCode == "Edit_CourseClassHours") {
              return x;
            }
          });
          if (action) {
            return true;
          }
        }
        return false;
      },
    }),
    mounted() {},
    methods: {
      //根据系列改变获取所属科目
      getCourseSubject(Id) {
        if (Id > 0) {
          let val = this.TreeCategoryList.find(x => x.CateId == Id);
          this.objOption.CourseSubject = val.CourseSubject;
        }
      },
      //获取课程等级列表
      getCourseRateList() {
        getCourseRate({}).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            if (tempData && tempData.length > 0) {
              tempData.forEach(item => {
                this.courseLevelList.push({
                  Id: item.Id,
                  Name: item.Name.replace(/课程/g, '')
                })
              })
            }
          }
        })
        getCourseSubject({}).then(res => {
          if (res.Code == 1) {
            this.courseSubjectList = res.Data;
          }
        })
      },
      getCourseEmphasisList() {
        getCourseEmphasisEnumList({}).then((res) => {
          if (res.Code == 1) {
            this.keynoteList = res.Data;
            this.keynoteList.map((x) => {
              this.CourseEmphasis.push(x.Id)
            })
          }
        });
      },
      //获取教师下拉
      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;
          }
        });
      },
      uploadFile2(files) {
        UploadSelfFile("course", files[0], (res) => {
          if (res.Code == 1) {
            this.objOption.B2BIcon = res.FileUrl;
            this.ImgColor();
          }
        });
      },
      ImgColor() { //获取图标上传的主色
        let domImg = document.querySelector('#background');
        let colorthief = new ColorThief();
        domImg.addEventListener('load', () => {
          let color = colorthief.getColor(domImg, 2)
          this.objOption.B2BBackground = this.rgb2Hex(`RGB(${color[0]}, ${color[1]}, ${color[2]})`)
        })
      },
      rgb2Hex(string) { //rgb转化为16进制
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        if (/^(rgb|RGB)/.test(string)) {
          var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
          var strHex = "#";
          for (var i = 0; i < aColor.length; i++) {
            var hex = Number(aColor[i]).toString(16);
            if (hex === "0") {
              hex += hex;
            }
            strHex += hex;
          }
          if (strHex.length !== 7) {
            strHex = string;
          }
          return strHex;
        } else if (reg.test(string)) {
          var aNum = string.replace(/#/, "").split("");
          if (aNum.length === 6) {
            return string;
          } else if (aNum.length === 3) {
            var numHex = "#";
            for (var i = 0; i < aNum.length; i += 1) {
              numHex += (aNum[i] + aNum[i]);
            }
            return numHex;
          }
        } else {
          return string;

        }

      },



      getCategorytree() {
        this.TreeCategoryList = [];
        var qMsg = {};
        queryCourseCategoryTree(qMsg).then((res) => {
          this.TreeCategoryList = res.Data;
          if (this.objOption.CateId > 0) {
            let val = this.TreeCategoryList.find(x => x.CourseSubject == this.objOption.CateId);
            this.objOption.CourseSubject = val.CourseSubject;
          }
        });
      },
      //新增阶梯定价
      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;
            this.objOption.CourseRate = res.Data.CourseRate;
            this.objOption.CourseSubject = res.Data.CourseSubject;
            this.objOption.B2BIcon = res.Data.B2BIcon;
            this.objOption.B2BBackground = res.Data.B2BBackground;
            this.CourseEmphasis = []
            setTimeout(() => { //Todo 暂时不知道什么原因 偶尔会出现2个 所以加了一个延迟
              if (res.Data.CourseEmphasis && res.Data.CourseEmphasis != '') {
                this.CourseEmphasis = res.Data.CourseEmphasis.split(",").map(Number)

              } else {
                this.keynoteList.map((x) => {
                  this.CourseEmphasis.push(x.Id)
                })
              }
            }, 100)

            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;
            }
            if (res.Data.CategoryList && res.Data.CategoryList.length > 0) {
              this.modifyClassifyList = res.Data.CategoryList;
              this.chooseGoodsClassify = res.Data.CategoryList.map((e) => {
                return e.CategoryId;
              });
            }
            this.defaultArray.push(res.Data.CateId);
            this.getCategorytree();
            this.handleCheckChange();
          });
          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.objOption.CourseRate = "";
          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;
          if (this.CourseEmphasis.length > 0) {
            this.objOption.CourseEmphasis = this.CourseEmphasis.join(',')
          } else {
            this.objOption.CourseEmphasis = ''
          }
          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;
            });
        }
      },
      //获取商品分类
      getGoodsClassify() {
        let msg1 = {
          Id: 0,
          Name: "",
          Tier: 0,
          ParentId: 0,
          Enabled: 1,
          IsShow: 1,
          CategoryPageType: 0,
        };
        this.apipostDS("/api/product/GetProductCategoryTreeList", msg1, (res) => {
          if (res.data.resultCode === 1) {
            this.goodClassify = res.data.data;
          }
        });
      },
      //处理选中后的商品分类参数
      handleCheckChange() {
        this.objOption.CategoryList = [];
        this.chooseGoodsClassify.forEach((list) => {
          this.goodClassify.forEach((item) => {
            if (list == item.Id) {
              let newItem = JSON.parse(JSON.stringify(item));
              newItem.CategoryId = item.Id;
              newItem.Id = 0;
              //查找已提交的分类的id，否则为0
              let findId = this.modifyClassifyList.find(
                (e) => e.CategoryId === newItem.CategoryId
              );
              if (findId) {
                newItem.Id = findId.Id;
              }
              this.objOption.CategoryList.push(newItem);
            }
            item.ChildList.forEach((item2) => {
              if (list == item2.Id) {
                let newItem2 = JSON.parse(JSON.stringify(item2));
                newItem2.CategoryId = item2.Id;
                newItem2.Id = 0;
                let findId2 = this.modifyClassifyList.find(
                  (e) => e.CategoryId === newItem2.CategoryId
                );
                if (findId2) {
                  newItem2.Id = findId2.Id;
                }
                this.objOption.CategoryList.push(newItem2);
              }
              item2.ChildList.forEach((item3) => {
                if (list == item3.Id) {
                  let newItem3 = JSON.parse(JSON.stringify(item3));
                  newItem3.CategoryId = item2.Id;
                  newItem3.Id = 0;
                  let findId3 = this.modifyClassifyList.find(
                    (e) => e.CategoryId === newItem3.CategoryId
                  );
                  if (findId3) {
                    newItem3.Id = findId3.Id;
                  }
                  this.objOption.CategoryList.push(newItem3);
                }
              });
            });
          });
        });
      },
    },
  };
</script>