<template>
  <div class="page-body japaneseTrain">
    <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" standout="bg-primary text-white" option-value="SId" option-label="SName"
                    v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
                   @clear="resetSearch" />
        </div>

        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="TId" option-label="TeacherName"
                    v-model="msg.Teacher_Id" :options="TeacherList" emit-value map-options label="带班老师" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
                    v-model="msg.CouseId" :options="ClassList" emit-value map-options label="学习课程" />
        </div>

        <div class="col-3">
          <div class="col-3 Sysuser_Date">
            <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                range-separator="至"  start-placeholder="开学日期"  end-placeholder="结束日期">
              </el-date-picker>       
            </template>
            </q-field>
            </div>
          </div>
        </div>

    </div>

    <div class="page-content" >
      <div style="width: 100%;display: flex;justify-content: space-between">
        <span style="font-size: 20px;font-weight: 400; ">日语培训产品列表</span>
        <span><q-toggle v-model="msg.Q_CanApply" label="只看有余位" class="q-mb-md" false-value="0"  true-value="1" @input="resetSearch"/></span>
      </div>
      <div class="productQueryList" v-loading='loading'>
        <ul v-if="data.length!=0">
          <li v-for="(item,index) in data" :key="index">
            <div class="dline">
              <div class="d1">
                <div class="di-title">{{item.ClassName}}</div>
                <div class="di-c" style="margin-top: 25px;"><img src="../../assets/images/administration/kezname.png" alt="" style="width: 14px;height: 14px;margin-right: 5px;">{{item.CourseName}}</div>
                <div class="di-c"><img src="../../assets/images/administration/period.png" alt="" style="width: 14px;height: 14px;margin-right: 5px;">{{item.ClassHours?item.ClassHours:'0'}}课时</div>
              </div>
              <div class="d2">
                <div> <span class="d2-n">带课老师</span><img :src="item.TeacherHead" alt="" style="width: 26px;height: 26px;border-radius: 4px;margin-right: 5px;color: #2961FE">{{item.TeacherName}}</div>
                <div><span class="d2-n">上课教室</span>{{item.RoomName}}</div>
                <div><span class="d2-n">上课时间</span><span style="text-decoration:underline;color:#111111;">{{item.ClassStyleName}}   </span><span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px" ></span>
                  <q-popup-proxy>
                    <q-banner>
                      <div class="price-popup" style="padding: 10px">
                        <div class="popup-top">
                          <div style="color:#2D2D2D;font-size: 14px;font-weight: bold" >上课时间</div>
                          <div style="background: #EEEEEF;font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;justify-content: space-around;margin-top: 20px" v-if="item.ClassStyle==1">
                            <span>周末</span>
                            <span>周一</span>
                            <span>周二</span>
                            <span>周三</span>
                            <span>周四</span>
                            <span>周五</span>
                            <span>周六</span>
                          </div>
                          <div v-if="item.ClassStyle==1" style="font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;justify-content: space-around;border-bottom: 1px solid rgba(138, 138, 138, 0.09);margin-bottom: 20px">
                            <span v-for="(j,k) in item.weeks" :key="k" style="width: 24.5px;">
                              <img src="../../assets/images/administration/gou.png" alt="" style="width: 16px;height: 12px" v-if="j.select==true">
                            </span>
                          </div>
                          <div style="color:#2D2D2D;font-size: 14px;font-weight: bold;">课程安排</div>
                          <div style="width: 454px;height: 40px;background: #EEEEEF;font-size: 12px;color: #2D2D2D;font-weight: 600;margin-top: 20px;display: flex;align-items: center">
                            <div style="width: 50%;padding-left: 20px">
                              课节
                            </div>
                            <div>时间</div>
                          </div>
                          <div style="font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;border-bottom: 1px solid rgba(138, 138, 138, 0.09);"
                               v-for="(zx,zi) in item.ClassTimeList" :key="zi"
                          >
                            <div style="width: 50%;padding-left: 20px">
                              第{{zi+1}}节
                            </div>
                            <div>{{zx.StartTime}}-{{zx.EndTime}}</div>
                          </div>
                        </div>
                      </div>
                    </q-banner>
                  </q-popup-proxy>
                </div>
              </div>
              <div class="d3">
                <div style="margin: 0">招生信息</div>
                <div><span class="d2-n">截止报名时间</span><span class="d3-s">{{item.OpenTime}}</span></div>
                <div><span class="d2-n">开始上课时间</span><span class="d3-s">{{item.EndOrderTime}}</span></div>
              </div>
              <div class="d4">
                <div style="margin: 0">价格信息</div>
                <div><span class="d2-n">原价</span><span>{{item.OriginalPrice.toFixed(2)}}</span></div>
                <div><span class="d2-n">售价</span><span style="color:#f5576c;font-weight: bold">{{item.SellPrice.toFixed(2)}}</span></div>
                <div v-if="item.IsStepPrice==1 && item.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 item.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>
                </div>
              </div>
              <div class="d5">
                <div style="margin: 0">名额信息</div>
                <div><span class="d2-n">计划招生人数</span><span>{{item.ClassPersion}}人</span></div>
                <div><span class="d2-n">剩余招生名额</span><span style="color:#f5576c;font-weight: bold">{{item.SurplusNum}}人</span></div>
              </div>
              <div class="d7">
                <q-btn   color="primary" label="立即下单"  v-if="item.IsCanApply==1" @click="placeAnorder(item)"/>
                <div  v-if="item.IsCanApply==0">
                  <img src="../../assets/images/administration/bmym.png" alt="" style="width: 64px;height: 62px;margin-right: 15px" v-if="item.SurplusNum==0">
                  <img src="../../assets/images/administration/guoqi.png" alt="" style="width: 64px;height: 62px" v-if="getEXPDate(item.OpenTime)==true">

                </div>
              </div>
            </div>

            <div class="d6 row">
              <p style="color:#f5576c;font-weight: bold"><span style="color:#2D2D2D;">OP备注：</span>{{item.OutRemark}}</p>
              <div class="progress">
                <q-linear-progress size="5px" color="#3FC4FF" :value="(item.OrderStudentCount/item.ClassPersion)"  rounded/>
              </div>
            </div>
          </li>
          <li style="border: none;display: flex;justify-content: flex-end;background: white;padding: 5px 20px">
            <q-pagination
              v-model="msg.pageIndex"
              :max="pageCount"
              @input="changePage"
            >
            </q-pagination>
          </li>
        </ul>

      </div>
      <q-dialog v-model="dialog" maximized full-height seamless position="right" >
        <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
          <div class="drawerTop">
            <div style="display:flex;align-items:center;margin:20px 0 0 20px;">
              <span class="drawer_Span">学员报名</span>
            </div>
          </div>
          <div style="padding:20px 15px;">
            <q-input filled stack-label maxlength="100" :dense="false" v-model="enrollMsg.GuestNum" type="number" @input="peopleNumber"
                     class="col-12" label="人数" :rules="[val => !!val || '请填写人数']" />
            <q-input filled stack-label  :dense="false" v-model="enrollMsg.Unit_Price" :disable="UPrice==true?false:true" @blur="priceNumber"
                     class="col-12" label="成交单价" :rules="[val => !!val || '请填成交单价']" />
            <q-toggle v-model="UPrice" label="高于定价收生" class="q-mb-md"  @change="resetSearch"/>
            <q-select  standout="bg-primary text-white" option-value="Id" option-label="Name"
                      v-model="enrollMsg.OrderSource" :options="SourceEnumList" emit-value map-options label="客人来源" />
            <q-input filled stack-label  :dense="false" v-model="enrollMsg.SaleRemark" style="margin-top: 20px"
                     class="col-12" label="备注"  />
            <div style="margin:30px 10px 0 0;">
              <q-btn  class="q-mr-md"  label="取消" @click="dialog=false" />
              <q-btn color="accent" class="q-mr-md"  label="保存" @click="saveSatMsg()" />
            </div>
          </div>

        </q-card>
        <div class="dialog-out-close" @click="dialog=false"
             style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
          <q-icon name="iconfont icon-jujue1" size="26px" />
        </div>
      </q-dialog>
    </div>



  </div>
</template>
<script>
  import {
    getClassPruductList,//获取日语培训列表
    getOrderSourceEnumList,//获取订单来源 枚举
    setClassOrder,//新增 修改订单
  } from '../../api/sale/sale';
  import {
    getSchoolDropdown,  //获取校区列表
    getTeacherDropDownList,
  } from '../../api/school/index';
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  export default {

    components: {

    },
    data() {
      return {
        dialog:false,
        data: [],
        loading: false,
        dateList:[],//开学时间
        msg: {
          pageIndex: 1,
          pageSize: 10,
          ClassName: '', //班级名称
          StartTime:'',//开始时间
          EndTime:'',//结束时间
          School_Id: 0, //关联校区
          CouseId:0,//课程id
          Teacher_Id:0,//教师id
          Q_CanApply:"0",//是否可以报名 1是
        },
        enrollMsg:{
          ClassId:0,
          GuestNum:1,
          Unit_Price:0,//成交单价
          PreferPrice:0,//应收总额
          OrderSource:0,//客人来源 枚举
          SaleRemark:'',//备注
        },
        //关联校区列表
        schoolList: [],
        pageCount: 0,
        selectitem:{},
        UPrice:false,
        UnitPrice:0,//用于可以输入单价的验证
        SourceEnumList:[],
        ClassList: [], //关联课程下拉数据
        TeacherList: [], //关联教师下拉数据
      }
    },
    created() {
      this.getSchool();
      this.getOrderSEList()
      this.CourseList();
      this.GetTeacherList();
    },
    mounted() {
      this.getList();

    },
    methods: {
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: 0,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      getOrderSEList(){
        getOrderSourceEnumList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            this.SourceEnumList = tempArray;
            this.enrollMsg.OrderSource = tempArray[0].Id;
          }
        })
      },
      getEXPDate(time){
        var str = time.replace(/年/g,"/").replace(/月/g,"/").replace(/日/g,"");
        var date = new Date(str ).getTime();
        var now = new Date().getTime()+86400;
        if(date < now) {
          return true //过期
        } else {
          return false //没过期
        }
      },
      //获取课程
      CourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.ClassList = res.Data;
            this.ClassList.unshift({
              CourseId: 0,
              CourseName: "不限"
            })
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            this.TeacherList.unshift({
              TId: 0,
              TeacherName: "不限"
            })
          }
        })
      },

      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList()
      },
      //获取菜单分页列表
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        this.loading = true;
        getClassPruductList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount;
          this.data.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

            }
          })

        }).catch(() => {
          this.loading = false
        })
      },
      getSortFun(order, sortBy){
        var ordAlpah = (order == 'asc') ? '>' : '<';
        var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
        return sortFun;
      },
      countPrice(num){
        let array =[] ;
        if(this.selectitem.ClassStepPriceList && this.selectitem.ClassStepPriceList.length){
          this.selectitem.ClassStepPriceList.forEach(x=>{
            let obj ={
              PersionNum:x.PersionNum,
              PersionPrice:x.PersionPrice,
            }
            array.push(obj)
          })
          let fz =false
          let a =0;
          array.forEach(x=>{
            if(x.PersionNum==num){
              fz=true;
              a =  x.PersionPrice
            }
          })
          if(fz==false){
            array.push({PersionNum:num})
            array.sort(this.getSortFun('asc', 'PersionNum'));//升序排序
            var idx;
            for(var i=0;i<array.length;i++){
              if(array[i].PersionNum == num){
                idx = i;
              }
            }
            idx = Math.max(0,idx - 1);
            if(array[idx].PersionPrice){
              return  array[idx].PersionPrice
            }else {
              return this.selectitem.SellPrice
            }
          }else {
            return a
          }

        }else {
          return this.selectitem.SellPrice

        }



      },
      placeAnorder(item){
        this.selectitem= item;
        this.dialog = true;
        this.enrollMsg.ClassId = item.ClassId;
        this.enrollMsg.Unit_Price = this.countPrice(this.enrollMsg.GuestNum)
        this.UnitPrice = this.enrollMsg.Unit_Price
      },
      peopleNumber(val){
        if(val>this.selectitem.SurplusNum){
          this.enrollMsg.GuestNum=this.selectitem.SurplusNum
        }
        if(val==''){
          this.enrollMsg.GuestNum=1
        }
        this.enrollMsg.Unit_Price = this.countPrice(this.enrollMsg.GuestNum)
        this.UnitPrice = this.enrollMsg.Unit_Price
      },
      priceNumber(val){//大于的时候赋值
        if(this.enrollMsg.Unit_Price<this.UnitPrice ){
          this.enrollMsg.Unit_Price =  this.UnitPrice
        }
      },
      saveSatMsg(){//立即报名
        this.enrollMsg.PreferPrice = this.enrollMsg.GuestNum*this.enrollMsg.Unit_Price
        setClassOrder(this.enrollMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '报名成功！',
              position: 'top'
            })
            this.getList()
            this.dialog = false
          }
        }).catch(() => {

        })
      }
    }
  }

</script>
<style >
  li{
    list-style-type:none ;
  }
  .japaneseTrain ul{padding: 0px}
  .japaneseTrain li{background: rgba(221, 222, 224, 0.2);border-radius: 4px;margin-top:15px}
  .japaneseTrain li .dline{display: table;width: 100%;display: flex;flex-direction: row}
  .japaneseTrain li .d1,.japaneseTrain li .d2,.japaneseTrain li .d3,.japaneseTrain li .d4,.japaneseTrain li .d5{width: 18%;padding:20px 20px 10px;}
  .japaneseTrain li .d7{flex:1;width: 1px;display: flex;flex-direction: row;align-items: center;justify-content: center}
  .japaneseTrain li .d1 .di-title{font-size: 16px;color: #111111;}
  .japaneseTrain li .d1 .di-c{font-size: 14px;display: flex;align-items: center;line-height: 28px;color: #111111}
  .japaneseTrain li .d6{padding:10px 20px;width: 100%;height: inherit;position: relative;border-top: 1px solid #DDDEE0}
  .japaneseTrain li .d6 .progress{width: 100%;height: 5px;position: absolute;left: 0;bottom: 0}
  .japaneseTrain li .d2 div{margin: 10px 0;font-size: 14px;color: #111111;}
  .japaneseTrain li  .d2-n{font-size: 12px;color: #999999;margin-right: 20px}
  .japaneseTrain li .d3 .d3-s{color: #f5576c;font-weight: bold}
  .japaneseTrain li .d3 div{margin: 10px 0 ;font-size: 14px;}
  .japaneseTrain li .d4 div{font-size: 14px;color: #111111;margin: 10px 0 ;}
  .japaneseTrain li .d5 div{font-size: 14px;color: #111111;margin: 10px 0 ;}
  .japaneseTrain .price-popup{border-radius: 4px;}
  .japaneseTrain .el-range-editor .el-range-input {
    background: none;
  }
  .japaneseTrain .el-range-editor.el-input__inner {
    background-color: transparent;
  }
  .japaneseTrain .q-mb-md{
    margin-bottom: 0;
  }
</style>
