<style>
  .Title_remark {
    font-size: 12px;
    color: #999999;
    margin-left: 20px;
  }

  .conTinuCheckdTable {
    width: 100%;
    height: auto;
    text-align: left;
    margin-top: 20px;
    font-size: 12px;
  }

  .conTinuCheckdTable th {
    color: #888888;
  }

  .enrollTotalSearchTable {
    width: 100%;
  }

  .backContius {
    color: #2961FE;
    cursor: pointer;
  }

  .contiue_Top {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #d1d1d1;
  }
  .continus_ClassChoice{
    padding:20px;
    max-height: 460px;
    overflow: auto; 
  }
  .el-picker-panel{
    z-index:9999!important;
  }
  .Sysuser_Date .el-range-editor .el-range-input {
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor.el-input__inner {
    background-color: transparent;
  }
  .conChoiceTeacherTable{
    width:100%;
    border:1px solid #d1d1d1;
  }
  .continus_ClassChoice::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .continus_ClassChoice::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .continus_ClassChoice::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

  .contius_List{
    width:100%;
    height:130px;
    border:1px solid #d1d1d1;
    border-radius: 5px;
    margin-bottom:15px;
    font-size:12px;
    box-shadow: 5px 5px 5px #d4d0d0;
  }
  .continu_Div{
    display: inline-block;
    min-height: 90px;
    border-right:1px dashed #d1d1d1;
    padding:10px;
    color:#000;
  }
  .continu_Div:last-child{
    border-right:0;
  }
  .continu_Btm{
    width:100%;
    height:30px;
    padding:10px;
    border-top:1px solid #d1d1d1;
  }
</style>
<!--续课-->
<template>
  <q-dialog v-model="IsShowContinueClassDialog" content-class="bg-grey-1" persistent transition-show="scale"
    transition-hide="scale">
    <q-card style="width: 850px;max-width:900px;">
      <template v-if="isShowTuike">
        <q-card-section>
          <div class="text-h6">
            续课申请<span class="Title_remark">注：找不到学员？请确认学员是否已退课或已续班</span>
          </div>
        </q-card-section>
        <div style="margin:20px;border-bottom:1px solid #E2E2E2">
          <div class="apply_List" v-for="(item,index) in studentList" v-if="item.IsShow">
            <span style="width:10%">{{item.GuestName}}</span>
            <span style="width:10%">{{item.SexStr}}</span>
            <span style="width:10%">{{item.Age}}</span>
            <span style="width:20%">{{item.Mobile}}</span>
            <span style="width:20%">
              <template v-if="item.ClassHours">已学：{{item.ClassHours}}课时</template>
            </span>
            <span style="width:10%">{{item.GuestStateStr}}</span>
            <span style="width:20%;" class="guest_Status">
              <span v-if="item.GuestState==1" @click="clickItem(item)">续费</span>
              <template v-if="chooseItem&&chooseItem.Id==item.Id">
                <span style="margin-left:10px;" @click="cancelApply">取消续费</span>
              </template>
            </span>
          </div>
          <table class="conTinuCheckdTable" v-if="classItem.ClassId>0&&studentList.length>0&&isShowAdd">
            <tr>
              <th>续费班级</th>
              <th>续费班级</th>
              <th>2人续班单价</th>
              <th>应收合计</th>
              <th>带班老师</th>
              <th>开班日期</th>
            </tr>
            <tr>
              <td>
                <span style="color:#2961FE;cursor:pointer;" @click="getRenewClassList()">+点击选择班级</span>
              </td>
              <td>{{classItem.ClassName}}</td>
              <td>¥{{classItem.SellPrice}}</td>
              <td>¥{{classItem.OriginalPrice}}</td>
              <td>{{classItem.TeacherName}}</td>
              <td>{{classItem.OpenTime}}</td>
            </tr>
          </table>
          <table class="conTinuCheckdTable" v-else-if="studentList.length>0&&isShowAdd">
            <tr>
              <td>
                <span class="backContius" @click="getRenewClassList()">+点击选择班级</span>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
          <q-input filled stack-label :dense="false" v-model="SaleRemark" style="margin-top: 20px" type="textarea"
            class="col-12" label="销售备注" />
          <q-separator />
        </div>
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeContinueClassForm" />
          <q-btn label="确认续费" color="accent" class="q-px-md" style="font-weight:400 !important"
            @click="setRenewOrder" />
        </q-card-actions>
      </template>
      <template v-else>
        <div class="contiue_Top">
          <span class="backContius" @click="isShowTuike=true">
            <返回</span> <span style="margin-left:20px;">班级选择
          </span>
        </div>
        <div class="col row wrap q-mr-lg q-col-gutter-md" style="margin:10px;">
          <div class="col-3">
            <q-select @input="getRenewClassList" filled option-value="SId" option-label="SName"
              v-model="classMsg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
          </div>
          <div class="col-3">
            <q-select filled stack-label option-value="CTypeId" option-label="CTypeName" v-model="classMsg.ClassType"
              ref="CouseId" :options="classTypeList" label="班级类型" :dense="false"
              emit-value map-options />
          </div>
          <div class="col-5 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                  <el-date-picker v-model="dateList" @change="getRenewClassList()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                     range-separator="至"  start-placeholder="开始时间"  end-placeholder="结束时间">
                  </el-date-picker>       
                </template>
            </q-field>
          </div>
          <div class="col-3">
            <q-input @change="getRenewClassList" clearable filled v-model="classMsg.TeacherName"
            label="带班老师" @clear="getRenewClassList" maxlength="20" />
          </div>
          <div class="col-3">
            <q-select filled stack-label use-input
              option-value="CourseId" option-label="CourseName" v-model="classMsg.CouseId"
              :options="ClassList" label="学习课程" :dense="false" emit-value map-options @filter="filterFn"
              @input="getRenewClassList">
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    未找到相关数据
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
        </div>
        <div class="continus_ClassChoice">
          <div class="contius_List" v-for="(cItem,cIndex) in calssData">
            <div style="display:flex;">
              <div class="continu_Div" style="width:30%">
                <div>{{cItem.ClassName}}</div>
                <div style="margin-top:5px;">{{cItem.CourseName}}</div>
                <div style="margin-top:5px;">{{cItem.ClassHours}}课时</div>
              </div>
              <div class="continu_Div" style="width:20%">
                <div>代课老师：{{cItem.TeacherName}}</div>
                <div style="margin-top:5px;">上课教师：{{cItem.RoomName}}</div>
                <div style="margin-top:5px;">开班时间：<span style="color:red;">{{cItem.OpenTime}}</span></div>
              </div>
              <div class="continu_Div" style="width:20%">
                <div>价格</div>
                <div style="margin:5px 0;">续费价格：{{cItem.SellPrice}}</div>
                <template v-if="cItem.ClassStepPriceList&&cItem.ClassStepPriceList.length>0">
                    更多优惠价格
                    <span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px"></span>
                    <q-popup-proxy>
                      <q-banner>
                        <div class="price-popup">
                          <div class="price-popup-item" v-for="(x,index2) in cItem.ClassStepPriceList" :key="index2"
                            style="margin: 5px 0">
                            <span style="color: #2D2D2D;font-weight: bold">{{x.PersionNum}}人报名<span
                                style="color:#2860FB;margin-left: 15px">{{x.PersionPrice.toFixed(2)}}</span></span>
                          </div>
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                </template>
              </div>
              <div class="continu_Div" style="width:15%">
                招生信息
                <div style="margin:5px 0;">计划招收 {{cItem.ClassPersion}}人</div>
                <div>已招收 <span style="color:blue;">{{cItem.OrderStudentCount}}</span>人</div>
              </div>
              <div class="continu_Div" style="width:15%">
                <q-btn label="选择此班" size="sm" @click="clickClassItem(cItem)" color="accent q-px-md" style="font-weight:400 !important;display:block;margin:25px 0 0 10px;padding:0;" />
              </div>
            </div>
            <div class="continu_Btm">
              OP备注 {{cItem.InnerRemark}}
            </div>
          </div>
          <q-pagination class="full-width justify-end" v-model="classMsg.pageIndex" color="primary" :max="classPageCount"
            :input="true" @input="changePage" />
        </div>
      </template>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    getSchoolDropdown,
  } from '../../api/school/index'
    import {
    GetClassTypeList
  } from '../../api/system/index'
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import {
    getOrderGuestPageList,
    saveRenewOrder,
    queryRenewClass
  } from '../../api/sale/sale'
  export default {
    name: "backclass-form",
    props: {
      saveObj: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        IsShowContinueClassDialog: true,
        continueClassMsg: {
          OrderId: 0,
          ClassId: 0,
          pageIndex: 1,
          pageSize: 1000,
          GuestState: 1,
        },
        SaleRemark: "", //申请理由
        loading: false,
        studentList: [], //学员列表
        chooseItem: {}, //当前选择项
        classMsg: {
          pageIndex: 1, //当前页码
          pageSize: 5, //每页显示条数
          rowsPerPage: 5,
          School_Id: 0, //校区
          ClassType: 0, //班级类型
          StartTime: "", //开课开始时间
          EndTime: "", //开课结束时间
          TeacherName: "", //教师姓名
          CouseId: 0, //课程编号
          ClassId: 0, //原班级编号
        },
        classPageCount: 0,
        calssData: [],
        classItem: {}, //当前点击的班级

        isShowTuike: true, //显示退课信息
        schoolList: [], //校区列表
        classTypeList:[], //班级类型
        dateList:[], //日期
        ClassList: [], //学习课程
        AllClassList: [],
        isShowAdd:false,
      }
    },
    created() {
      this.continueClassMsg.OrderId = this.saveObj.OrderId;
      this.continueClassMsg.ClassId = this.saveObj.ClassId;
      this.classMsg.ClassId = this.saveObj.ClassId;

      this.getSchool();
      this.GetClassTypeList();
      this.CourseList();
      this.getStudentList();
    },
    methods: {
      //取消申请
      cancelApply() {
        this.chooseItem = {};
        if (this.studentList && this.studentList.length > 0) {
          this.studentList.forEach(item => {
            item.IsShow = true;
          })
        }
        this.isShowAdd=false;
      },
      //当前点击项
      clickItem(item) {
        if (this.studentList && this.studentList.length > 0) {
          this.studentList.forEach(item => {
            item.IsShow = false;
          })
        }
        this.isShowAdd=true;
        item.IsShow = true;
        this.chooseItem = item;
        // this.getRenewClassList();
      },
      //关闭弹窗
      closeContinueClassForm() {
        this.IsShowContinueClassDialog = false;
        this.SaleRemark = "";
        this.continueClassMsg.OrderId = 0;
        this.continueClassMsg.ClassId = 0;
        this.chooseItem = {};
        this.$emit('close');
      },
      //获取订单学员列表
      getStudentList() {
        this.studentList = [];
        getOrderGuestPageList(this.continueClassMsg).then(res => {
          if (res.Code == 1) {
            this.studentList = res.Data.PageData;
          }
        })
      },
      //获取续课列表
      getRenewClassList() {
        this.isShowTuike = false;
        if (this.dateList && this.dateList.length > 0) {
          this.classMsg.StartTime = this.dateList[0];
          this.classMsg.EndTime = this.dateList[1];
        } else {
          this.classMsg.StartTime = '';
          this.classMsg.EndTime = '';
        }
        queryRenewClass(this.classMsg).then(res => {
          if (res.Code == 1) {
            this.classPageCount = res.Data.PageCount;
            this.calssData = res.Data.PageData;
          }
        })
      },
      clickClassItem(cItem) {
        this.classItem = cItem;
        this.isShowTuike=true;
      },
      //确认续费
      setRenewOrder() {
        if (!this.classItem) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择要续费的班级`
          })
          return;
        }
        var Class_Price = this.classItem.SellPrice; //单价
        var PreferPrice = this.classItem.SellPrice;; //应收
        if (this.classItem.ClassStepPriceList && this.classItem.ClassStepPriceList.length > 0) {
          this.classItem.ClassStepPriceList.forEach(item => {
            if (item.PersionNum == 1) {
              Class_Price = item.PersionPrice;
              PreferPrice = item.PersionPrice;
            }
          });
        }
        var applyMsg = {
          GuestId: this.chooseItem.Id,
          OrderId: this.chooseItem.OrderId,
          SaleRemark: this.SaleRemark,
          ClassId: this.classItem.ClassId,
          Class_Price: Class_Price,
          PreferPrice: PreferPrice,
        };
        if (!applyMsg.GuestId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择要申请的学员`
          })
          return;
        }
        saveRenewOrder(applyMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '续费成功！',
              position: 'top'
            })
            //调用父页面成功方法
            this.$emit('success');
            this.IsShowContinueClassDialog = false
          }
        })
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: 0,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      //获取班级类型下拉
      GetClassTypeList() {
        GetClassTypeList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              CTypeId: 0,
              CTypeName: "不限"
            })
            this.classTypeList = tempArray;
          }
        })
      },
      //筛选课程
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.ClassList = JSON.parse(JSON.stringify(this.AllClassList))
          } else {
            this.ClassList = this.AllClassList.filter(v => v.CourseName.indexOf(val) > -1);
          }
        })
      },
      //获取课程
      CourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.ClassList = res.Data;
            this.AllClassList = res.Data;
            this.ClassList.unshift({
              CourseId: 0,
              CourseName: "不限"
            })
          }
        })
      },
      //翻页
      changePage(val) {
        this.classMsg.pageIndex = val;
        this.getRenewClassList()
      },
    }
  }

</script>
