<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: 850px;max-width:850px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">{{msg.Type==1?'留学':'就业'}}订单</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-col-gutter-md">
                  <div class="col-6">
                    <q-select @input="resetSearch" filled option-value="Id" option-label="Name" v-model="msg.Type"
                      :options="studyList" emit-value map-options label="类型" />
                  </div>
                  <div class="col-6">
                    <q-input @change="resetSearch" clearable filled v-model="msg.Name" label="项目名称" @clear="resetSearch"
                      maxlength="20" />
                  </div>
                </div>
              </div>
              <abroadlist :dataList="dataList" :loading="loading" @select="selectCourse" :select="defaultCourse"></abroadlist>
              <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount"
                :input="true" @input="changePage" />
            </q-step>
            <q-step :name="2" title="确认" icon="settings" :done="step > 2">
              <studyForm ref="orderForm" :save-obj="saveObj" :select="selectedArr" @success="$emit('close')" @cancelloading='cancelloading'></studyForm>
            </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" :loading="loading1" @click="saveOrderForm" v-if="step == 2" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    queryCourseDropdownList,
    getCourseSubject
  } from "../../../api/course/index";
  import {
    queryStudyAbroadPage
  } from '../../../api/studyabroad/index'

  import abroadlist from "./transfer-order/abroadlist";
  import studyForm from "./transfer-order/study-form";
  export default {
    props: {
      select: {
        type: Array,
        default: () => []
      }
    },
    components: {
      abroadlist,
      studyForm
    },
    data() {
      return {
        persistent: true,
        step: 1,
        loading1: false, //防止多次点击
        msg: {
          Type: 1, //1留学 2就业
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          Name: "",
          IsQPrice: 1,
          SaleState: "", //销售状态
          ProductType: "", //产品类型
          StudyCountryId: "", //国家编号
        },
        dataList: [],
        defaultCourse: [],
        saveObj: {}, //所选数据
        loading:false,
        studyList: [{
          Id: 1,
          Name: '留学'
        }, {
          Id: 2,
          Name: '就业'
        }],
        PageCount: 0,
        selectedArr:[]
      };
    },
    mounted() {
      if(this.select){
        this.selectedArr = this.select;
      }
      this.getList();
    },
    methods: {
      //获取留学 就业数据
      getList() {
        this.loading = true;
        queryStudyAbroadPage(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      // 课程翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      // 选择课程
      selectCourse(val) {
        if(val&&val.length>0){
            this.saveObj = val[0];
            this.defaultCourse = val;
            this.saveObj.OrderCourseList =[];
            this.saveObj.OrderCourseList.push(JSON.parse(JSON.stringify(this.saveObj)));
            this.saveObj.TextbookFee=0;
            this.saveObj.CoursewareFee=0;
        }
      },
      next() {
        if (!this.saveObj.Id || this.saveObj.Id == 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择项目名称`
          });
          return;
        }
        this.$refs.stepper.next();
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      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>
