<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 class="row" style="align-items: center"> <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;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;">
                                                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                                                        <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>
                                                <div style="width:100%;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" 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:#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.EndOrderTime)==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" 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>
        <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-left:10px;">
                        <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 type="textarea" :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: [], //关联教师下拉数据
            elvalue: new Date(),
        }
    },
    created() {

        this.getSchool();
        this.getOrderSEList()
        this.CourseList();
        this.GetTeacherList();
    },
    mounted() {
        let nowDay = new Date();
        var year = nowDay.getFullYear();      　　 //年
        var month = nowDay.getMonth() + 1;     //月
        var day = nowDay.getDate();            　　//日

        this.dateList[0] = year+'-'+month+'-'+day;
        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
                    } 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
            })
        },
        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.SaleRemark = ''; //清空备注
            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;
                    this.enrollMsg = { //清空数据
                        ClassId: 0,
                        GuestNum: 1,
                        Unit_Price: 0, //成交单价
                        PreferPrice: 0, //应收总额
                        OrderSource: 0, //客人来源 枚举
                        SaleRemark: '', //备注
                    }
                }
            }).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;
}

.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;
}
</style>
