<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="关联校区" clearable />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
            @clear="resetSearch" maxlength="20" clearable />
        </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="带班老师" clearable />
        </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="学习课程"
            clearable />
        </div>
        <div class="col-3">
          <div class="col-3 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                <el-date-picker v-model="msg.StartTime" type="date" placeholder="开学日期" size="small" style="width:47%;"
                  @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>至
                <el-date-picker v-model="msg.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 class="col-3">
          <div class="col-3 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                <el-date-picker v-model="msg.JoinStartTime" type="date" placeholder="报名截止日期" size="small"
                  style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>至
                <el-date-picker v-model="msg.JoinEndTime" 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>
    <div class="page-content">
      <div style="width: 100%;display: flex;justify-content: space-between">
        <span style="font-size: 20px;font-weight: bold;font-family:'perfectFont' ">日语培训产品列表</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: 8px;align-items:baseline">
                  <img src="../../assets/images/administration/kezname.png" alt=""
                    style="width: 14px;height: 14px;margin-right:5px;position:relative;top:2px;">{{item.CourseName}}
                  <template v-if="item.OtherCourseList&&item.OtherCourseList.length>0">
                    <span style="color:blue;cursor:pointer;">关联课程</span>
                    <q-popup-proxy>
                      <q-banner>
                        <table class="OCourseTable" style="border-collapse:collapse;">
                          <tr>
                            <th>课程名称</th>
                            <th>课时数</th>
                            <th>价格</th>
                          </tr>
                          <tr v-for="(sItem,sIndex) in item.OtherCourseList">
                            <td>{{sItem.CourseName}}</td>
                            <td>{{sItem.ClassHours}}</td>
                            <td>{{sItem.SellPrice}}</td>
                          </tr>
                        </table>
                      </q-banner>
                    </q-popup-proxy>
                    </span>
                  </template>
                </div>
                <div class="di-c" style="align-items:baseline"><img src="../../assets/images/administration/period.png"
                    alt=""
                    style="width: 14px;height: 14px;margin-right:5px;position:relative;top:2px;">{{item.ClassHours?item.ClassHours:'0'}}课时
                </div>
                <div class="japanFeature">
                  <i class="iconfont icon-tesezhuanti" style="color:#3DC5FF"></i>
                  <span style="text-decoration:underline;margin-left:3px;">
                    课程特色
                    <q-popup-proxy>
                      <q-banner>
                        <div class="CourseFearure">
                          {{item.CourseFeature}}
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </span>
                  <span class="iconfont icon-xiangxia" style="color: rgb(41, 97, 254); font-size: 10px;"></span>
                </div>
              </div>
              <div class="d2">
                <div class="row" style="align-items: center ;margin:0;padding:0;">
                  <span class="d2-n">带课老师</span>
                  <q-avatar rounded size="sm" v-if="item.TeacherHead&&item.TeacherHead!=''">
                    <img :src="item.TeacherHead" />
                  </q-avatar>
                  <q-avatar v-else rounded size="sm" color="teal-10" text-color="white">
                    <template v-if="item.TeacherName&&item.TeacherName!=''">
                      {{item.TeacherName.substr(0,1)}}
                    </template>
                  </q-avatar>
                  &nbsp;{{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;cursor: pointer">{{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 v-if="item.ClassStyle==2" class="row wrap" style="width: 454px;">
                            <div v-for="(j,k) in item.month"
                              style="width: 45.4px;height: 30px;line-height: 30px;text-align: center;font-size: 12px;color: #2D2D2D;margin-top: 10px;!important">
                              <div
                                :style="{'width': '45.4px','height': '30px',background:j.select==true?'rgba(41, 97, 254, 0.2)':'#FFF'}">
                                {{j.name}}
                              </div>
                            </div>
                          </div>
                          <div v-if="item.ClassStyle==3">
                            <el-calendar v-model="elvalue" id="calendar" style="width: 500px;">
                              <template slot="dateCell" slot-scope="{date, data}" class="row" style="height: 45px">
                                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                                <div v-for="x in item.ClassPlanList">
                                  <div v-if="x.ClassDate === data.day"
                                    style="align-items: center;justify-content: center;margin-top: 15px" class="row">
                                    <img src="../../assets/images/administration/gou.png" alt=""
                                      style="width: 16px;height: 12px">
                                  </div>
                                </div>
                              </template>
                            </el-calendar>
                          </div>
                          <div style="color:#2D2D2D;font-size: 14px;font-weight: bold;">课程安排</div>
                          <table
                            style="width:100%;border-collapse: separate;border-collapse:collapse;margin-top:20px;text-align:center;">
                            <thead>
                              <tr
                                style="height: 40px;background: #EEEEEF;font-size: 12px;color: #2D2D2D;font-weight: 600;margin-top: 20px;">
                                <th width="40%">
                                  <template v-if="item.ClassStyle==1">
                                    每周
                                  </template>
                                  <template v-if="item.ClassStyle==2">
                                    每月
                                  </template>
                                  <template v-if="item.ClassStyle==3">
                                    固定日期
                                  </template>
                                </th>
                                <th width="20%">
                                  课节
                                </th>
                                <th width="40%">
                                  时间
                                </th>
                              </tr>
                            </thead>
                            <tbody style="border-bottom:1px dashed #d1d1d1;"
                              v-for="(tItem,tIndex) in item.ClassTimeList" :key="tIndex">
                              <template v-for="(timeItem,timeIndex) in   tItem.TimeList">
                                <tr>
                                  <td style="width:180px;" :rowspan=" tItem.TimeList.length" v-if="timeIndex==0">
                                    <template v-for="(sItem,sIndex) in tItem.DateList">
                                      {{sItem}}
                                    </template>
                                  </td>
                                  <td>
                                    第 {{timeIndex+1}} 节
                                  </td>
                                  <td>
                                    {{timeItem.StartTime}}-{{timeItem.EndTime}}
                                  </td>
                                </tr>
                              </template>
                            </tbody>
                          </table>
                        </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:var(--q-color-negative);font-weight: bold">{{item.SellPrice.toFixed(2)}}</span></div>
                <div v-if="item.IsStepPrice==1 && item.ClassStepPriceList.length>0" style="cursor: pointer">
                  更多优惠价格<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:var(--q-color-negative);font-weight: bold">{{item.SurplusNum}}人</span></div>
              </div>
              <div class="d7">
                <div>
                  <q-btn style="margin-top:20px;" color="primary" size="sm" label="立即下单" v-if="item.IsCanApply==1"
                    @click="placeAnorder(item,0)" />
                </div>
                <div v-if="item.IsCanApply==0">
                  <img src="../../assets/images/administration/bmym.png" alt=""
                    style="width: 64px;height: 62px;margin:20px 15px 0 0" v-if="item.SurplusNum==0">
                  <!-- <img src="../../assets/images/administration/guoqi.png" alt="" style="width: 64px;height: 62px"
                    v-if="getEXPDate(item.EndOrderTime)==true"> -->
                </div>
                <div>
                  <q-btn style="margin-top:10px;" size="sm" color="primary" label="订单中心" @click="goclassorder(item)" />
                </div>
                <!--插班报入-->
                <div v-if="item.IsChaBan==1">
                  <q-btn style="margin-top:10px;" size="sm" color="primary" label="插班报名"
                    @click="placeAnorder(item,1)" />
                </div>
              </div>
            </div>
            <div class="d6 row">
              <p style="color:var(--q-color-negative);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" class="full-width justify-end"
              color="primary" :input="true">
            </q-pagination>
          </li>
        </ul>
        <div v-else style="width: 100%;color: #999999;text-align: center;font-size: 15px">暂无数据</div>
      </div>
      <editorder-form v-if="isShowEditOrderForm" :save-obj="orderObj" :orderType="1" :modityOrderType="1" :isChaBan="isChaBan"
        @close="closeOrderSaveForm" @success="refreshOrder">
      </editorder-form>
    </div>
  </div>
</template>

<script>
  import {
    getClassPruductList, //获取日语培训列表
    setClassOrder, //新增 修改订单
  } from '../../api/sale/sale';
  import {
    getSchoolDropdown, //获取校区列表
    getTeacherDropDownList,
  } from '../../api/school/index';
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import editorderForm from '../../components/sale/editorder-form' //修改订单

  export default {
    meta: {
      title: "日语培训"
    },
    components: {
      editorderForm
    },
    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是
          JoinStartTime: '', //报名截止日期开始
          JoinEndTime: "", //报名截止日期结束
        },
        //关联校区列表
        schoolList: [],
        pageCount: 0,
        ClassList: [], //关联课程下拉数据
        TeacherList: [], //关联教师下拉数据
        elvalue: new Date(),
        isShowEditOrderForm: false, //是否显示订单弹窗
        //订单对象
        orderObj: {
          ClassId: 0,
          Unit_Price: 0,
        },
        isChaBan: 0, //是否插班(0-正常报入，1-插班报入)
      }
    },
    created() {
      this.getSchool();
      this.CourseList();
      this.GetTeacherList();

      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay = year + '-' + month + '-' + day;
      this.msg.StartTime = currentDay
    },
    mounted() {
      this.getList();
    },
    methods: {
      //关闭订单修改
      closeOrderSaveForm() {
        this.isShowEditOrderForm = false;
      },
      refreshOrder() {
        this.getList();
      },
      //跳转到班级订单
      goclassorder(item) {
        var tempStr = '/course/classorder?ClassId=' + item.ClassId;
        this.$router.push({
          path: tempStr
        });
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: 0,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      //判断是否过期
      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() {
        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
            } 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;
            }
          })
        }).catch(() => {
          this.loading = false
        })
      },
      //立即报名和插班报名
      placeAnorder(item, type) {
        this.isChaBan = type;
        this.orderObj.ClassId = item.ClassId;
        this.orderObj.Unit_Price = item.SellPrice;
        this.isShowEditOrderForm = true;
      },
    }
  }

</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;
    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: var(--q-color-negative);
    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;
  }

  .japaneseTrain .month-item {
    display: inline-block;
    width: 45.5px;
    height: 45.4px;
    line-height: 45.4px;
    text-align: center;
    font-size: 12px;
    color: #2D2D2D;
  }

  .price-popup .el-calendar-table .el-calendar-day {
    height: 60px;
  }

  .japaneseTrain .el-input__inner {
    border: none !important;
    background: transparent !important;
  }
  .japanFeature{
    font-size:14px;
    color:#111111;
    cursor: pointer;
    margin-left:-1px;
  }
  .CourseFearure{
    margin:10px;
    width:500px;
    color:#000;
  }
</style>
