<template>
    <div class="el-schedule_show_fixrecord_pc_2">
        <div class="schedule_show_fixrecord_pc_2">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="learningtool-title">
                            <span class="sp1">在线课表</span>
                        </div>
                        <div class="liveshow-tab">
                            <ul>
                                <li :class="scheduletab==0?'on':''" @click="getParamScheduleList(0, true)">今日课表（{{today}} 周{{weekDay4Today}}）</li>
                                <li :class="scheduletab==1?'on':''" @click="getParamScheduleList(1, true)">明日课表（{{tomorrow}} 周{{weekDay4Tomorrow}}）</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="schedule-table">
                            <table>
                                <tr>
                                    <th>线下班名称</th>
                                    <th>讲师</th>
                                    <th>时间</th>
                                    <th>开班机构</th>
                                    <!--                  <th>教室</th>-->
                                </tr>
                                <tr v-for="(item,index) in scheduleList" :key="index">
                                    <td>{{item.czName}}</td>
                                    <td>{{item.scMainName}}</td>
                                    <td>{{item.startDate | formatDate}}~{{item.endDate | formatDate}}</td>
                                    <td>{{item.siteName}}</td>
                                    <!--                <td>书法培训教师(1)</td>-->
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="showlist-searchbar clearfix">
                            <ul class="showlist-tab" id="change2WeekOrMonth">
                                <li :class="scheduletabm==2?'active':''" @click="getParamScheduleList(2, false)"><a href="javascript:;">本周课表</a></li>
                                <li :class="scheduletabm==3?'active':''"><a href="javascript:;" @click="getParamScheduleList(3, false)">本月课表</a></li>
                                <li :class="scheduletabm==4?'active':''"><a href="javascript:;" @click="getParamScheduleList(4, false)">下月课表</a></li>
                            </ul>
                            <!--<div class="showlist-searchbar-right clearfix">-->
                            <!--<span class="select-sp1">-->
<!--                                <select name="" id="">-->
<!--                                     <option value="">选择日期</option>-->
<!--                                     <option value="">选择日期</option>-->
<!--                                </select>-->
                                <!--<div class="block">-->
                                    <!--<span class="demonstration">默认</span>-->
                                    <!--<el-date-picker-->
                                            <!--v-model="value1"-->
                                            <!--type="daterange"-->
                                            <!--range-separator="/"-->
                                            <!--start-placeholder="开始日期"-->
                                            <!--end-placeholder="结束日期">-->
                                    <!--</el-date-picker>-->
                                <!--</div>-->
                            <!--</span>-->
<!--                            <span class="select-sp1">-->
<!--                                <select name="" id="">-->
<!--                                    <option value="">全部机构</option>-->
<!--                                    <option value="">全部机构</option>-->
<!--                                </select>-->
<!--                            </span>-->
                                <!--<span class="select-btn"><a href="javascript:;" @click="queryScheduleList(false)">课表查询</a></span>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="schedule-table2">
                            <table>
                                <tr>
                                    <td class="td1 clearfix header-td">
                                        <span class="sp1">日期</span>
                                        <span class="sp2">
                                           <span class="spp1 clearfix">
                                              <i class="i1">线下班名称</i>
                                              <i class="i2">讲师</i>
                                              <i class="i3">时间</i>
                                              <i class="i4">开班机构</i>
<!--                                              <i class="i5">书法培训教师</i>-->
                                           </span>
                                        </span>
                                    </td>
                                </tr>
                                <tr v-for="(item,index) in bottomScheduleList" :key="index" v-if="index < 7">
                                    <td class="td1 clearfix">
                                        <span class="sp1">{{item.date}}</span>
                                        <span class="sp2">
                                            <span class="spp1 clearfix" v-for="(schedule, index) in item.data" :key="index">
                                                <i class="i1">{{schedule.czName}}</i>
                                                <i class="i2">{{schedule.scMainName}}</i>
                                                <i class="i3">{{schedule.startDate | formatDate}}~{{schedule.endDate | formatDate}}</i>
                                                <i class="i4">{{schedule.siteName}}</i>
                                            </span>
                                            <!--<span class="spp1 clearfix" v-if="item.data.length > 3">-->
                                                <!--<i class="i5"><a href="" class="zhankai">展开更多</a></i>-->
                                            <!--</span>-->
                                        </span>
                                    </td>
                                </tr>
                                <!--<tr>-->
                                    <!--<td class="schedule-table2-more"><a href="" class="shouqi">收起</a></td>-->
                                <!--</tr>-->
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="search-result-page">
                            <el-pagination background
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :page-sizes="[3, 5, 7]"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage4"
                                    :total="totalCount">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from "fy-kit";
    import {httpPost} from '../../../src/utils/utils';
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';

    export default {
        name: 'ElScheduleShowFixrecordPc2',
        mixins: [formMixin],
        model: {},
        data() {
            return {
                startTime: $.date.moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
                endTime: $.date.moment(new Date()).format("YYYY-MM-DD") + " 23:59:59",
                scheduleList: [],
                bottomScheduleList: [],
                today: $.date.moment(new Date()).format("YYYY.MM.DD"),
                tomorrow: $.date.moment(this.addDate(new Date(), 1)).format("YYYY.MM.DD"),
                weekDay4Today: this.getWeek(new Date()),
                weekDay4Tomorrow: this.getWeek(this.addDate(new Date(), 1)),
                totalCount:0,
                currentPage4:1,
                rows:99999,
                page:1,
                datasize: 3,
                type:2,
                timeList:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1 : '',
                scheduletab: 0,
                scheduletabm: 2,
            }
        },
        // 过滤
        filters: {
            formatDate: function (value) {
                // var datavalue = value.replace(/\-/g, "/");
                let date = new Date(value);
                // let y = date.getFullYear();
                // let MM = date.getMonth() + 1;
                // MM = MM < 10 ? ('0' + MM) : MM;
                // let d = date.getDate();
                // d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                // let s = date.getSeconds();
                // s = s < 10 ? ('0' + s) : s;
                return h + ':' + m;
            }
        },
        mounted() {
            console.log(httpPost);
            this.getScheduleList(this.type, true);
            this.setParam(this.type);
            this.setPageAttr(this.type);
            this.getScheduleList(this.type, false);
            console.log(lenye_base);
        },
        computed: {},
        methods: {
            queryScheduleList(isHead) {
                for (let i = 0; i < this.value1.length; i++) {
                    if (i == 0) {
                        this.startTime = $.date.moment(this.value1[i]).format("YYYY-MM-DD") + " 00:00:00";
                    } else if (i == 1) {
                        this.endTime = $.date.moment(this.value1[i]).format("YYYY-MM-DD") + " 00:00:00";
                    }
                }
                this.setPageAttr(this.type);
                this.getScheduleList(this.type, isHead);
            },
            setPageAttr(type) {
                var d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth();
                if (type == 2) {
                    this.totalCount = 7;
                    this.rows = 99999;
                } else if (type == 3) {
                    this.rows = 99999;
                    if (month == 11) {
                        month = 0;
                    } else {
                        month += 1;
                    }
                    this.totalCount = new Date(year, month , 0).getDate();
                } else if (type == 4) {
                    this.rows = 99999;
                    if (month == 11) {
                        month = 1;
                    } else {
                        month += 2;
                    }
                    this.totalCount = new Date(year, month, 0).getDate();
                } else {
                    this.rows = 99999;
                }
            },
            handleSizeChange(val) {
                // this.rows = val;
                this.datasize = val;
                this.getScheduleList(false);
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getScheduleList(false);
            },
            getParamScheduleList(num, isHead) {
                if ( num >= 2) {
                    this.scheduletabm = num
                } else {
                    this.scheduletab = num;
                }
                this.page = 1;
                this.type = num;
                this.setParam(num);
                this.setPageAttr(num);
                this.getScheduleList(num, isHead);
            },
            getScheduleList(type, isHead) {
                let clzTabList = [];
                let that = this;
                let czList = [];
                let czIds = '';
                httpPost(lenye_base.base_data.getapiUrl() + "/schoolclass-service/common/clzClazzSchedule/queryScheduleList4front.do",
                    lenye_base.base_data.getformatting({
                        startDate: this.startTime,
                        endDate: this.endTime,
                        page: this.page,
                        rows: this.rows
                    }),
                    function (data) {
                        clzTabList = data.data;
                        if (data.totalCount > 0) {
                            clzTabList.forEach((a) => {
                                if (a.czId) {
                                    czIds += a.czId + ','
                                }
                            });
                            httpPost(lenye_base.base_data.getapiUrl() + "/schoolclass-service/common/clzClazz/queryByIds.do",
                                lenye_base.base_data.getformatting({ids: czIds})
                            ).then((data) => {
                                czList = data.data;
                                clzTabList.forEach((schedule) => {
                                    czList.forEach((clazz) => {
                                        if (schedule.czId == clazz.czId) {
                                            schedule.czName = clazz.czName;
                                            schedule.siteName = clazz.siteName;
                                            return;
                                        }
                                    });
                                });
                                if (isHead) {
                                    that.scheduleList = clzTabList;
                                } else {
                                    var result = that.groupbyDate(clzTabList);
                                    that.bottomScheduleList = result;
                                }
                            });
                        } else {
                            if (isHead) {
                                that.scheduleList = clzTabList;
                            } else {
                                var result = that.groupbyDate();
                                that.bottomScheduleList = result;
                            }
                        }
                    });
            },
            groupbyDate(list) {
                console.log(list)
                let result = [];
                if (list){
                    let timeData;
                    let groupedData;
                    this.timeList.forEach((time) => {
                        timeData = {};
                        groupedData = [];
                        timeData.date = $.date.moment(time).format("YYYY.MM.DD") + " / " + "周" + this.getWeek(new Date(time));
                        list.forEach((listData) => {
                            var data = listData;
                            if ($.date.moment(new Date(listData.startDate)).format("YYYY-MM-DD") == $.date.moment(time).format("YYYY-MM-DD")) {
                                groupedData.push(data);
                            }
                        });
                        timeData.data = groupedData;
                        result.push(timeData);
                    });
                    result = result.slice((this.page - 1) * this.datasize, this.page * this.datasize);
                    return result;
                } else {
                    return result;
                }
            },
            setParam(val) {
                var year = new Date().getFullYear();
                var month = new Date().getMonth();
                if (val == 1) {
                    this.startTime = $.date.moment(this.addDate(new Date(), 1)).format("YYYY-MM-DD") + " 00:00:00";
                    this.endTime = $.date.moment(this.addDate(new Date(), 1)).format("YYYY-MM-DD") + " 23:59:59";
                } else if (val == 2) {
                    var firstDay;
                    var lastDay2;
                    var day1 = new Date();
                    if (day1.getDay() == 0) {
                        firstDay = this.addDate(day1, -6);
                        lastDay2 = day1;
                    } else if (day1.getDay() == 1) {
                        firstDay = day1;
                        lastDay2 = this.addDate(day1, 6);
                    } else if (day1.getDay() == 2) {
                        firstDay = this.addDate(day1, -1);
                        lastDay2 = this.addDate(day1, 5);
                    } else if (day1.getDay() == 3) {
                        firstDay = this.addDate(day1, -2);
                        lastDay2 = this.addDate(day1, 4);
                    } else if (day1.getDay() == 4) {
                        firstDay = this.addDate(day1, -3);
                        lastDay2 = this.addDate(day1, 3);
                    } else if (day1.getDay() == 5) {
                        firstDay = this.addDate(day1, -4);
                        lastDay2 = this.addDate(day1, 2);
                    } else if (day1.getDay() == 6) {
                        firstDay = this.addDate(day1, -5);
                        lastDay2 = this.addDate(day1, 1);
                    }
                    this.startTime = $.date.moment(firstDay).format("YYYY-MM-DD") + " 00:00:00";
                    this.endTime = $.date.moment(lastDay2).format("YYYY-MM-DD") + " 23:59:59";
                    this.timeList = [];
                    this.timeList.push($.date.moment(firstDay).format("YYYY-MM-DD"));
                    for (let i = 1; i < 7; i++) {
                        this.timeList.push($.date.moment(this.addDate(firstDay, i)).format("YYYY-MM-DD"));
                    }
                } else if (val == 3) {
                    if (month == 11) {
                        month = 0;
                    } else {
                        month += 1;
                    }
                    this.startTime = year + "-" + month + "-01" + " 00:00:00";
                    var lastDay = new Date(year, month, 0).getDate();
                    this.endTime = year + "-" + month + "-" + lastDay + " 23:59:59";
                    this.timeList = [];
                    this.timeList.push($.date.moment(this.startTime).format("YYYY-MM-DD"));
                    for (let i = 1; i < lastDay; i++) {
                        this.timeList.push($.date.moment(this.addDate(this.startTime, i)).format("YYYY-MM-DD"));
                    }
                } else if (val == 4) {
                    if (month == 11) {
                        year += 1;
                        month = 1;
                    } else {
                        month += 2;
                    }
                    this.startTime = year + "-" + month + "-01" + " 00:00:00";
                    var lastDay1 = new Date(year, month, 0).getDate();
                    this.endTime = year + "-" + month + "-" + lastDay1 + " 23:59:59";
                    this.timeList = [];
                    this.timeList.push($.date.moment(this.startTime).format("YYYY-MM-DD"));
                    for (let i = 1; i < lastDay1; i++) {
                        this.timeList.push($.date.moment(this.addDate(this.startTime, i)).format("YYYY-MM-DD"));
                    }
                } else if (val == 0) {
                    this.startTime = $.date.moment(new Date()).format("YYYY-MM-DD") + " 00:00:00";
                    this.endTime = $.date.moment(new Date()).format("YYYY-MM-DD") + " 23:59:59";
                }
            },
            getWeek(date) {
                if (date.getDay() == 0) {
                    return "日";
                } else if (date.getDay() == 1) {
                    return "一";
                } else if (date.getDay() == 2) {
                    return "二";
                } else if (date.getDay() == 3) {
                    return "三";
                } else if (date.getDay() == 4) {
                    return "四";
                } else if (date.getDay() == 5) {
                    return "五";
                } else if (date.getDay() == 6) {
                    return "六";
                }
            },
            addDate(date, days) {
                return new Date((new Date(date) / 1000 + 86400 * days) * 1000);
            },
        },
    };
</script>
