<template>
  <div class="transfer-order">
    <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale"
      @hide="$emit('close')">
      <q-card style="width: 800px;max-width:800px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">转订单</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="q-pt-none scroll">
          <q-stepper v-model="step" ref="stepper" color="primary" animated flat>
            <q-step :name="1" title="上课模式" icon="settings" :done="step > 1">
              <Mode v-model="mode"></Mode>
            </q-step>
            <q-step :name="2" title="选择课程" icon="settings" :done="step > 2">
              <template v-if="mode == 1">
                <div class="page-search row items-center">
                  <div class="col row wrap q-mr-lg q-col-gutter-md">
                    <div class="col-3">
                      <q-select @input="resetSearch" filled option-value="SId" option-label="SName"
                        v-model="courseMsg.School_Id" :options="schoolList" emit-value map-options label="关联校区"
                        clearable />
                    </div>

                    <div class="col-3">
                      <q-input @change="resetSearch" clearable filled v-model="courseMsg.ClassNo" label="班号"
                        @clear="resetSearch" maxlength="20" />
                    </div>
                    <div class="col-6">
                      <q-input @change="resetSearch" clearable filled v-model="courseMsg.ClassName" label="班级名称"
                        @clear="resetSearch" maxlength="20" />
                    </div>
                    <div class="col-6">
                      <q-select @input="resetSearch" @filter="filterCourseFn" use-input filled option-value="CourseId"
                        option-label="CourseName" v-model="courseMsg.CouseId" :options="myClassList" emit-value
                        map-options label="学习课程" clearable>
                        <template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-grey">
                              未找到相关数据
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>
                    <div class="col-6">
                      <div class="col-3 Sysuser_Date">
                        <q-field filled>
                          <template v-slot:control>
                            <el-date-picker v-model="courseMsg.StartTime" type="date" placeholder="开学日期" size="small"
                              style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                            </el-date-picker>至
                            <el-date-picker v-model="courseMsg.EndTime" type="date" placeholder="结束日期" size="small"
                              style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                            </el-date-picker>
                          </template>
                        </q-field>
                      </div>
                    </div>
                  </div>
                </div>
                <Course :dataList="courseData" @select="selectClass" :select="defaultCourse"></Course>
                <q-pagination class="full-width justify-end" v-model="courseMsg.pageIndex" color="primary"
                  :max="coursePageCount" :input="true" @input="changePage" />
              </template>
              <template v-if="mode == 2">
                <yueke @select="selectCourse" :select="defaultCourse"></yueke>
              </template>
            </q-step>
            <q-step :name="3" title="确认" icon="settings" :done="step > 3">
              <orderForm ref="orderForm" :mode="mode" :schoolList="schoolList" :save-obj="saveObj" :stuData="stuData"
                :modityOrderType="1" @success="$emit('close')" @cancelloading="cancelloading"></orderForm>
            </q-step>
          </q-stepper>
        </q-card-section>
        <q-card-actions align="right" class="bg-white q-mx-md ">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" v-close-popup />
          <q-btn @click="$refs.stepper.previous()" color="primary" label="上一步" v-if="step > 1" />
          <q-btn @click="next" color="primary" label="下一步" v-if="step < 3" />
          <q-btn label="保存" color="primary" :loading="loading1" @click="saveOrderForm" v-if="step == 3" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    getClassPruductList, //获取日语培训列表
    setClassOrder, //新增 修改订单
    getOrderGuestRenewState
  } from "../../../api/sale/sale";
  import {
    getSchoolDropdown, //获取校区列表
    getTeacherDropDownList
  } from "../../../api/school/index";
  import {
    queryCourseDropdownList,
    getCourseSubject
  } from "../../../api/course/index";
  import Mode from "./transfer-order/tickMode";
  import Course from "./transfer-order/courselist";
  import orderForm from "./transfer-order/order-form";
  import yueke from "./transfer-order/yueke";
  export default {
    props: {
      select: {
        type: Array,
        default: () => []
      }
    },
    components: {
      Course,
      Mode,
      orderForm,
      yueke
    },
    data() {
      return {
        persistent: true,
        step: 1,
        stuData: {}, //学生是否续费
        OrderMsg: {
          ClassId: 0, //班级编号
          GuestNum: 0, //人数
          B2CRatio: 0,
          B2CReNewRatio: 0,
          CustomerId: 0, //市场专员
          Unit_Price: 0,
          PreferPrice: 0,
          OrderSource: 0,
          SaleRemark: "",
          Class_Price: 0, //单价
          OrderId: 0,
          OrderType: 0, //订单类型(1-班级课程订单，2-留学就业订单)
          SourceId: 0, //来源编号
          HelpEnterId: 0, //协助老师编号
          GeneralOccupation: "", //一般同行
          EduOccupation: "", //教育同行
          IsLessPrice: 0, //是否少价 0 不少 1 少
          LessPrice: 0, //少价金额
          PerLessMoney: 0, //每人少价金额
          OrderNature: 1, //订单性质
          OldPreferPrice: 0, //原实际应收
          IsChaBan: 0, //是否插班报入(1-是)
          CourseId: "", //课程编号
          StartClassHours: 0, //已上课时
          EffectTime: "", //生效时间
          UpOrderId: 0, //前置订单编号
          JoinType: 1, //订单报入类型
          DiscountMoney: 0, //优惠金额
          PerDiscountMoney: 0 //每人优惠金额
        },
        courseMsg: {
          pageIndex: 1,
          pageSize: 8,
          ClassName: "", //班级名称
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          School_Id: "", //关联校区
          CouseId: 0, //课程id
          Teacher_Id: 0, //教师id
          Q_CanApply: "0", //是否可以报名 1是
          JoinStartTime: "", //报名截止日期开始
          JoinEndTime: "", //报名截止日期结束
          ClassNo: "", //班号
          CourseSubject: "", //所属科目
          IsQuerySalePlat:1
        },
        courseData: [], //课程列表
        coursePageCount: 0, //课程页数
        saveObj: {}, //所选课程
        defaultCourse: [], //默认课程
        //关联校区列表
        schoolList: [],
        ClassList: [], //关联课程下拉数据
        myClassList: [],
        allClassList: [],
        loading1: false, //防止多次点击
        mode: 1
      };
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay = year + "-" + month + "-" + day;
      this.courseMsg.StartTime = currentDay;
      this.getOrderGuestRenewState();
      this.getCourseList();
      this.getSchool();
      this.CourseList();
    },
    methods: {
      getOrderGuestRenewState() {
        const ids = this.select.map(e => e.StuId).toString();
        getOrderGuestRenewState({
          StuIds: ids
        }).then(res => {
          this.stuData = res.Data;
        });
      },
      //获取课程分页列表
      getCourseList() {
        getClassPruductList(this.courseMsg).then(res => {
          this.courseData = res.Data.PageData;
          this.coursePageCount = res.Data.PageCount;
          this.courseData.forEach(x => {
            if (x.ClassStyle == 1) {
              let weekList = [
                //定义一个数组
                {
                  id: 7,
                  select: false
                },
                {
                  id: 1,
                  select: false
                },
                {
                  id: 2,
                  select: false
                },
                {
                  id: 3,
                  select: false
                },
                {
                  id: 4,
                  select: false
                },
                {
                  id: 5,
                  select: false
                },
                {
                  id: 6,
                  select: false
                }
              ];
              weekList.forEach(j => {
                x.ClassPlanList.forEach(z => {
                  if (j.id == z.WeekDay) {
                    j.select = true;
                  }
                });
              });
              x.weeks = weekList;
            } else if (x.ClassStyle == 2) {
              let data = [];
              for (let i = 0; i < 31; i++) {
                let obj = {
                  name: i + 1,
                  select: false
                };
                x.ClassPlanList.forEach(j => {
                  if (j.WeekDay == i + 1) {
                    obj.select = true;
                  }
                });
                data.push(obj);
              }
              x.month = data;
            }
          });
        });
      },
      // 课程翻页
      changePage(val) {
        this.courseMsg.pageIndex = val;
        this.getCourseList();
      },
      // 选择班级
      selectClass(val) {
        if (val.length > 0) {
          this.saveObj = val[0];
          this.saveObj.Unit_Price = this.saveObj.SellPrice;
          this.defaultCourse = val;
        } else {
          this.saveObj = {};
          this.saveObj.Unit_Price = 0;
          this.defaultCourse = [];
        }
      },
      // 选择课程
      selectCourse(val) {
        if (val.length > 0) {
          this.saveObj = val[0];
          this.saveObj.Unit_Price = this.saveObj.SellPrice;
          this.defaultCourse = val;
        } else {
          this.saveObj = {};
          this.saveObj.Unit_Price = 0;
          this.defaultCourse = [];
        }
      },
      next() {
        if (this.step == 1 && this.mode <= 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择上课模式`
          });
          return;
        }
        if (this.step == 2) {
          if (
            this.mode == 1 &&
            (!this.saveObj.ClassId || this.saveObj.ClassId == 0)
          ) {
            this.$q.notify({
              type: "negative",
              position: "top",
              message: `请选择班级`
            });
            return;
          }
          if (
            this.mode == 2 &&
            (!this.saveObj.ClassId || this.saveObj.ClassId == 0)
          ) {
            this.$q.notify({
              type: "negative",
              position: "top",
              message: `请选择课程`
            });
            return;
          }
        }
        this.$refs.stepper.next();
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolList = res.Data;
          }
        });
      },
      //获取课程
      CourseList() {
        queryCourseDropdownList({
          IsQuerySalePlat: 1
        }).then(res => {
          if (res.Code == 1) {
            this.ClassList = res.Data;
            this.ClassList.unshift({
              CourseId: 0,
              CourseName: "不限"
            });
            this.myClassList = this.ClassList;
            this.allClassList = res.Data;
          }
        });
      },
      //课程筛选
      filterCourseFn(val, update, abort) {
        update(() => {
          if (val === "") {
            this.myClassList = JSON.parse(JSON.stringify(this.allClassList));
          } else {
            const needle = val.toLowerCase();
            this.myClassList = this.allClassList.filter(
              v => v.CourseName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      resetSearch() {
        this.courseMsg.pageIndex = 1;
        this.getCourseList();
      },
      saveOrderForm() {
        this.loading1 = true;
        this.$refs.orderForm.saveOrderInfo();
      },
      cancelloading() {
        this.loading1 = false;
      }
    }
  };
</script>
<style scoped>
  /deep/.el-input__inner {
    background-color: transparent;
    border: none;
  }

  /deep/.q-stepper__step-inner {
    padding: 0 24px;
  }
</style>