<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">
              <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="selectCourse"
                :select="defaultCourse"
              ></Course>
              <q-pagination
                class="full-width justify-end"
                v-model="courseMsg.pageIndex"
                color="primary"
                :max="coursePageCount"
                :input="true"
                @input="changePage"
              />
            </q-step>
            <q-step :name="2" title="确认" icon="settings" :done="step > 2">
              <orderForm
                ref="orderForm"
                :save-obj="saveObj"
                :stuData="stuData"
                :modityOrderType="1"
                @success="$emit('close')"
              ></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 < 2" />
          <q-btn
            label="保存"
            color="primary"
            @click="saveOrderForm"
            v-if="step == 2"
          />
        </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 Course from "./transfer-order/courselist";
import orderForm from "./transfer-order/order-form";
export default {
  props: {
    select: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Course,
    orderForm
  },
  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: "" //所属科目
      },
      courseData: [], //课程列表
      coursePageCount: 0, //课程页数
      saveObj: {}, //所选课程
      defaultCourse: [], //默认课程
      //关联校区列表
      schoolList: [],
      ClassList: [], //关联课程下拉数据
      myClassList: [],
      allClassList: []
    };
  },
  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();
    },
    // 选择课程
    selectCourse(val) {
      this.saveObj = val[0];
      this.saveObj.Unit_Price = this.saveObj.SellPrice;
      this.defaultCourse = val;
    },
    next() {
      if (!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({}).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.$refs.orderForm.saveOrderInfo();
    }
  }
};
</script>
<style scoped>
/deep/.el-input__inner {
  background-color: transparent;
  border: none;
}
/deep/.q-stepper__step-inner{
  padding:0 24px;
}
</style>