<style>
  .CLM-Form .el-input__inner {
    background: transparent;
    border: 0;
  }

  .CLM-Form .el-input-group__append {
    background: transparent;
    border: 0;
  }

  .common_Style {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }

  .classForm_monday {
    background-color: #ced9f8;
    color: #2961FE;
  }

  .classForm_tuesday {
    background-color: #d9f3ff;
    color: #3FC4FF;
  }

  .classForm_wednesday {
    background-color: #f6e2cb;
    color: #F28C1D;
  }

  .classForm_thursday {
    background-color: #ccf3eb;
    color: #02C499;
  }

  .classForm_friday {
    background-color: #f7cfd6;
    color: #F72E52;
  }

  .classForm_saturday {
    background-color: #fff5cc;
    color: #FFCC00;
  }

  .classForm_sunday {
    background-color: #e6e3fe;
    color: #8175FB;
  }

  .CLM-Form .Emp_Line {
    width: 3px;
    height: 10px;
    background-color: #3FC4FF;
    margin-right: 10px;
  }

  .CLM-Form .EmpLine_title {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>基本信息</div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ClassName" ref="ClassName"
              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="CourseId" option-label="CourseName" v-model="objOption.CouseId"
              ref="CouseId" :options="ClassList" label="关联课程" :dense="false" 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="TId" option-label="TeacherName" v-model="objOption.Teacher_Id"
              ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false" class="col-6 q-pr-lg q-pb-lg"
              emit-value map-options />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ClassPersion"
              ref="ClassPersion" class="col-6 q-pr-lg q-pb-lg" label="招生人数" :rules="[val => !!val || '请填写招生人数']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled v-model="objOption.OpenTime" class="col-6 q-pr-lg q-pb-lg" mask="date" label="开班时间">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                    <q-date v-model="objOption.OpenTime" @input="() => $refs.qDateProxy1.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-6">
            <q-input filled v-model="objOption.EndOrderTime" class="col-6 q-pr-lg q-pb-lg" mask="date" label="截止报名时间">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy2" transition-show="scale" transition-hide="scale">
                    <q-date v-model="objOption.EndOrderTime" @input="() => $refs.qDateProxy2.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.OriginalPrice"
              ref="OriginalPrice" class="col-6 q-pr-lg q-pb-lg" label="原价" :rules="[val => !!val || '请填写原价']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SellPrice" ref="SellPrice"
              class="col-6 q-pr-lg q-pb-lg" label="卖价" :rules="[val => !!val || '请填写卖价']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select filled stack-label option-value="SId" option-label="SName" v-model="objOption.School_Id"
              ref="School_Id" :options="SchoolList" label="所属校区" :dense="false" class="col-6 q-pr-lg q-pr-lg" emit-value
              map-options />
          </div>
          <div class="col-6">
            <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="objOption.ClassRoomId"
              ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pr-lg q-pr-lg"
              emit-value map-options />
          </div>
        </div>
        <div class="row wrap" style="margin:20px 0;">
          <div class="col-6">
            阶梯定价
            <q-toggle size="md" label="" color="primary" :false-value="0" :true-value="1"
              v-model="objOption.IsStepPrice" />
            <q-btn v-if="objOption.IsStepPrice==1" style="margin-left:30px;" size="10px" @click="addStepPrice()" round
              color="primary" icon="iconfont icon-img_haha" />
          </div>
        </div>
        <template v-if="objOption.IsStepPrice==1">
          <div class="row wrap" v-for="(item,index) in ladderPriceList" :key="index">
            <div class="col-6">
              <q-input filled stack-label maxlength="20" v-model="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 maxlength="20" v-model="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="row wrap">
          <div class="col-6">
            提成设置
            <q-toggle size="md" label="" color="primary" :false-value="0" :true-value="1"
              v-model="objOption.IsOpenCommission" />
            <div style="display:inline-block;margin-left:20px;" v-if="objOption.IsOpenCommission==1">
              <q-radio v-model="objOption.CommissionType" :val="1" label="按人头" />
              <q-radio v-model="objOption.CommissionType" :val="2" label="按百分" />
            </div>
          </div>
        </div>
        <div class="row wrap" style="margin:20px 0" v-if="objOption.IsOpenCommission==1">
          <div class="col-12">
            <q-field filled class="col-6 q-pr-lg q-pb-lg">
               <template v-slot:control>
                <el-input placeholder="数值" v-model="objOption.CommissionValue">
                  <template slot="append">
                    <span v-if="objOption.CommissionType==1">人</span>
                    <span v-if="objOption.CommissionType==2">%</span>
                  </template>
                </el-input>
              </template>
               </q-field>
          </div>
        </div>
        <div class="EmpLine_title" style="margin:10px 0;">
          <div class="Emp_Line"></div>
          <div>上课设置</div>
        </div>
        <div class="row wrap" style="margin:30px 0;">
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.ClassStyle"
              ref="ClassStyle" :options="classSetList" label="排课安排" :dense="false" class="col-6 q-pr-lg q-pr-lg"
              emit-value map-options @input="changeClassStyle(objOption.ClassStyle)" />
          </div>
        </div>
        <div class="row wrap" v-if="objOption.ClassStyle==1">
          <div class="col-6">
            <q-select filled stack-label multiple option-value="value" option-label="label" v-model="checkedDays"
              ref="ClassStyle" :options="weekList" label="选择周几" :dense="false" class="col-6 q-pr-lg q-pr-lg" emit-value
              map-options>
              <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
                <q-item v-bind="itemProps" v-on="itemEvents">
                  <q-item-section avatar>
                    <span v-if="opt.icon==1" class="common_Style classForm_monday">月</span>
                    <span v-if="opt.icon==2" class="common_Style classForm_tuesday">火</span>
                    <span v-if="opt.icon==3" class="common_Style classForm_wednesday">水</span>
                    <span v-if="opt.icon==4" class="common_Style classForm_thursday">木</span>
                    <span v-if="opt.icon==5" class="common_Style classForm_friday">金</span>
                    <span v-if="opt.icon==6" class="common_Style classForm_saturday">土</span>
                    <span v-if="opt.icon==7" class="common_Style classForm_sunday">日</span>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label v-html="opt.label" />
                  </q-item-section>
                  <q-item-section side>
                    <i style="color:#2961FE" v-if="selected" class="iconfont icon-chenggong"></i>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
        </div>
        <div class="row wrap" v-if="objOption.ClassStyle==2||objOption.ClassStyle==3">
          <div class="col-12">
            <q-date v-model="checkedDays" minimal multiple style="width:100%" />
          </div>
        </div>
        <div class="row wrap" style="margin:20px 0;">
          <div class="col-6">
            学习时段
            <q-btn style="margin-left:30px;" size="10px" @click="addPlanTime()" round color="primary"
              icon="iconfont icon-img_haha" />
          </div>
        </div>
        <template v-if="DefaultPlanTimeList&&DefaultPlanTimeList.length>0">
          <div class="row wrap" v-for="(nItem,nIndex) in DefaultPlanTimeList" :key="nIndex+10000">
            <div class="col-6">
              <q-input filled stack-label maxlength="20" v-model="nItem.StartTime" :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 maxlength="20" v-model="nItem.EndTime" :dense="false"
                class="col-6 q-pr-lg q-pb-lg" label="结束时间" />
              <q-btn style="position:absolute;right:-5px;top:20px;" size="6px" @click="deletePlanTime(nIndex)" round
                color="red" icon="iconfont icon-guanbi1" />
            </div>
          </div>
        </template>
        <div class="row wrap" style="margin-top:30px;">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" v-model="objOption.ClassHours" :dense="false"
              class="col-6 q-pr-lg q-pb-lg" label="学习课时" />
          </div>
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.ClassType"
              ref="CouseId" :options="classTypeList" label="班级类型" :dense="false" class="col-6 q-pr-lg q-pb-lg"
              emit-value map-options />
          </div>
        </div>
        <div class="row wrap" style="margin-top:30px;">
          <div class="col-12">
            <q-input filled stack-label maxlength="2000" v-model="objOption.InnerRemark" :dense="false"
              class="col-12 q-pr-lg q-pb-lg" label="对内备注" />
          </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 {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import {
    getTeacherDropDownList,
    getSchoolDropdown,
    saveClass,
    getClassInfo,
    queryClassRoomList
  } from '../../api/school/index'
  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          ClassId: 0, //班级编号
          ClassName: "", //班级名称
          CouseId: 0, //课程Id
          Teacher_Id: 0, //讲师Id
          Assist_Id: 0, //助教Id
          Group_Id: 0, //集团编号
          School_Id: 0, //学校编号
          CreateBy: 0, //创建人
          CreateTime: '', //创建时间
          UpdateBy: '', //修改人
          UpdateTime: '', //更新时间
          Status: 0, //0正常 1禁用
          ClassPersion: '', //招生人数
          OpenTime: '', //开学时间
          EndOrderTime: '', //截止报名时间
          OriginalPrice: '', //原价
          SellPrice: '', //售价
          IsStepPrice: 0, //是否阶梯价(1-是)
          ClassRoomId: '', //教室编号
          IsOpenCommission: 0, //是否开启提成设置(1-是)
          CommissionType: 1, //提成类型(1-人头，2-百分比）
          CommissionValue: '', //提成值
          ClassHours: '', //课时
          ClassStyle: 1, //排课方式(1-周，2-月，3-固定日期，4-约课)
          ClassStatus: 1, //班级状态
          InnerRemark: '', //对内备注
          OutRemark: '', //对外备注
          CompleteProgress: 0, //完成进度
          ClassType: 1, //班级类型
        },
        optionTitle: "",
        saveCourseLoading: false,
        ClassList: [], //关联课程下拉数据
        TeacherList: [], //关联教师下拉数据
        SchoolList: [], //关联校区下拉数据
        ClassRoomList: [], //教室下拉数据
        ladderPriceList: [], //阶梯定价数组
        //上课设置
        classSetList: [{
          Name: '按周排课',
          Id: 1
        }, {
          Name: '按月排课',
          Id: 2
        }, {
          Name: '固定日期',
          Id: 3
        }, {
          Name: '约课',
          Id: 4
        }],
        //班级类型
        classTypeList: [{
            Id: 1,
            Name: "学生班"
          },
          {
            Id: 2,
            Name: "社会班"
          },
        ],
        //周几
        weekList: [{
          label: '周一',
          value: '1',
          icon: 1
        }, {
          label: '周二',
          value: '2',
          icon: 2
        }, {
          label: '周三',
          value: '3',
          icon: 3
        }, {
          label: '周四',
          value: '4',
          icon: 4
        }, {
          label: '周五',
          value: '5',
          icon: 5
        }, {
          label: '周六',
          value: '6',
          icon: 6
        }, {
          label: '周日',
          value: '7',
          icon: 7
        }],
        //选中日期/星期
        checkedDays: [],
        //默认上课时间数组
        DefaultPlanTimeList: [],
      }
    },
    created() {
      this.getSchool();
      this.CourseList();
      this.getClassRoomList();
      this.GetTeacherList();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //下拉选择改变
      changeClassStyle(style) {
        this.checkedDays = [];
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ClassId > 0) {
          getClassInfo({
            ClassId: this.saveObj.ClassId
          }).then(res => {
            var TempData = res.Data;
            this.objOption.ClassId = TempData.ClassId;
            this.objOption.ClassName = TempData.ClassName;
            this.objOption.CouseId = TempData.CouseId;
            this.objOption.Teacher_Id = TempData.Teacher_Id;
            this.objOption.Assist_Id = TempData.Assist_Id;
            this.objOption.School_Id = TempData.School_Id;
            this.objOption.ClassPersion = TempData.ClassPersion;
            this.objOption.OpenTime = TempData.OpenTime; //暂无
            this.objOption.EndOrderTime = TempData.EndOrderTime;
            this.objOption.OriginalPrice = TempData.OriginalPrice;
            this.objOption.SellPrice = TempData.SellPrice;
            this.objOption.IsStepPrice = TempData.IsStepPrice;
            this.objOption.ClassRoomId = TempData.ClassRoomId;
            this.objOption.IsOpenCommission = TempData.IsOpenCommission;
            this.objOption.CommissionType = TempData.CommissionType;
            this.objOption.CommissionValue = TempData.CommissionValue;
            this.objOption.ClassHours = TempData.ClassHours;
            this.objOption.ClassStyle = TempData.ClassStyle;
            this.objOption.ClassStatus = TempData.ClassStatus;
            this.objOption.InnerRemark = TempData.InnerRemark;
            this.objOption.ClassType = TempData.ClassType;
            //默认时间
            if (TempData.DefaultTimeList && TempData.DefaultTimeList.length > 0) {
              this.DefaultPlanTimeList = TempData.DefaultTimeList;
            }
            if (TempData.WeekDayList && TempData.WeekDayList.length > 0) {
              switch (this.objOption.ClassStyle) {
                //按周排课
                case 1:
                  this.checkedDays = TempData.WeekDayList;
                  break;
                  //按月排课
                case 2:
                  this.checkedDays = TempData.WeekDayList;
                  break;
                  //固定日期排课
                case 3:
                  this.checkedDays = TempData.WeekDayList;
                  break;
              }
            }
            if (TempData.ClassStepPriceList && TempData.ClassStepPriceList.length > 0) {
              this.ladderPriceList = TempData.ClassStepPriceList;
            }
          })
          this.optionTitle = "修改班级信息"
        } else {
          this.optionTitle = "新增班级"
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      },
      //保存班级
      saveCourse() {
        this.saveCourseLoading = true
        this.objOption.ClassStepPriceList = this.ladderPriceList;
        if (this.objOption.ClassName == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写班级名称`
          })
          return;
        }
        if (this.objOption.ClassPersion == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写招生人数`
          })
          return;
        }
        if (this.objOption.OriginalPrice == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写原价`
          })
          return;
        }
        if (this.objOption.SellPrice == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写卖价`
          })
          return;
        }
        if (this.objOption.IsOpenCommission == 1) {
          if (this.objOption.CommissionValue == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请填写数值`
            })
            return;
          }
        }
        if (this.objOption.ClassHours == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写学习课时`
          })
          return;
        }
        //选中的日期或星期
        this.objOption.WeekDayList = this.checkedDays;
        //默认上课时间
        this.objOption.DefaultPlanTimeList = this.DefaultPlanTimeList;
        saveClass(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
        })
      },
      //获取课程
      CourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.ClassList = res.Data;
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        })
      },
      //获取校区下拉
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.SchoolList = res.Data;
            var obj = {
              SName: '全部',
              SId: 0
            }
            this.SchoolList.unshift(obj);
          }
        })
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
      //新增阶梯定价
      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);
      },
      //添加学习时段
      addPlanTime() {
        var obj = {
          StartTime: "",
          EndTime: "",
        }
        this.DefaultPlanTimeList.push(obj);
      },
      //删除学习时段
      deletePlanTime(index) {
        this.DefaultPlanTimeList.splice(index, 1);
      }
    },
  }

</script>
