edu-mini/pages/eduDetail/components/edu-plan/edu-plan.js

import {
    getDataSet,
    getEventParam,
    toast
} from "../../../../utils/utils";
import Route from "../../../../model/route";
import {
    courseTypes,
    liveStatus,
    logicStatus,
    courseStatus
} from "../../../../model/enum";
import Api from '../../../../model/api';

const SEARCH_TAB_MAP = {
    ALL: 'all',
    FINISHED: 'finished',
    NOT_FINISH: 'notfinish'
};
Component({
    properties: {
        isPre: {
            type: Number,
        },
        courseList: {
            type: Array
        },
        obj: {
            type: Object,
        },
    },
    data: {
        liveStatusEnum: liveStatus,
        courseTypesEnum: courseTypes,
        courseStatusEnum: courseStatus,
        filterCourseDate: '',
        searchCourseList: [],
        searchName: '', //搜索的课程名称
        // searchTabMap: SEARCH_TAB_MAP,
        activeSearchTab: SEARCH_TAB_MAP.ALL,
        searchTabs: [{
                name: SEARCH_TAB_MAP.ALL,
                label: '全部课程',
                info: 0
            },
            {
                name: SEARCH_TAB_MAP.FINISHED,
                label: '已完成',
                info: 0
            },
            {
                name: SEARCH_TAB_MAP.NOT_FINISH,
                label: '未完成',
                info: 0
            },
        ],
        showCollapseButton: false,
        showMaxNum: 20,
        expandAll: {
            [SEARCH_TAB_MAP.ALL]: false,
            [SEARCH_TAB_MAP.FINISHED]: false,
            [SEARCH_TAB_MAP.NOT_FINISH]: false,
        },
        defaultPicture: 'https://college-file-1254259530.cos.ap-beijing.myqcloud.com/resource/course/kc.jpg'
        // expandAll: false
    },
    observers: {
        courseList() {
            this.queryCourse();
        }
    },
    attached: function () {
        this.queryCourse();
    },
    ready() {
        this.selectComponent('#searchTabs').resize();
    },
    methods: {
        setCourseTabInfo(courseList) {
            // let searchName = this.data.searchName.trim();
            // let courseList = list.filter(item => {
            //     let flag = true;
            //     if (item.ceremonyCategory) {
            //         //活动仪式
            //         flag = searchName ? item.ceremonyName.indexOf(searchName) !== -1 : true;
            //     } else {
            //         //课程
            //         flag = searchName ? item.courseName.indexOf(searchName) !== -1 : true;
            //     }
            //     return flag;
            // });
            // console.log('courseList', courseList);
            let total = courseList.length;
            let finishList = courseList.filter(item => item.courseProcess == courseStatus.COMPLETE);
            let finishLen = finishList.length;
            let tabs = this.data.searchTabs;
            tabs.forEach((item, index) => {
                switch (item.name) {
                    case SEARCH_TAB_MAP.ALL:
                        item.info = total;
                        break;
                    case SEARCH_TAB_MAP.FINISHED:
                        item.info = finishLen;
                        break;
                    case SEARCH_TAB_MAP.NOT_FINISH:
                        item.info = total - finishLen;
                        break;
                }
            });
            // console.log('tabs -> ', tabs);
            this.setData({
                searchTabs: tabs
            });
        },
        onSearchChange(e) {
            // console.log('onSearchChange', e.detail);
            this.setData({
                searchName: e.detail
            });
        },
        // handleClearSearch() {
        //     console.log('clear!!!!!!');
        //     this.data.searchName = '';
        //     this.setData({
        //         searchName: ''
        //     });
        // },
        onSearchTabChange(e) {
            // console.log(e);
            let name = e.detail.name;
            // this.activeSearchTab = name;
            this.setData({
                activeSearchTab: name
            });
            this.queryCourse(false);
        },
        queryCourse(updateTabInfo = true) {
            if (this.data.expandAll[this.data.activeSearchTab]) {
                wx.showLoading({
                    title: '加载中',
                });
            }
            wx.nextTick(() => {
                // console.log('this.data.searchName', this.data.searchName);
                let searchName = this.data.searchName.trim();
                let courseFilterTab = this.data.activeSearchTab;
                let courseDate = this.data.filterCourseDate;
                let startTime, endTime;
                if (courseDate) {
                    courseDate = this.data.filterCourseDate.replaceAll('-', '/');
                    startTime = new Date(`${courseDate} 00:00:00`).getTime();
                    endTime = new Date(`${courseDate} 23:59:59`).getTime();
                }
                //按照搜索的课程名称、课程日期筛选
                let courseList = this.data.courseList.filter(item => {
                    let flag = true;
                    if (item.ceremonyCategory) {
                        //活动仪式
                        flag = searchName ? item.ceremonyName.indexOf(searchName) !== -1 : true;
                    } else {
                        //课程
                        flag = searchName ? item.courseName.indexOf(searchName) !== -1 : true;
                    }
                    if (courseDate && flag) {
                        //按日期筛选
                        // courseDate = this.data.filterCourseDate.replaceAll('-', '/');
                        // let startTime = new Date(`${courseDate} 00:00:00`).getTime();
                        // let endTime = new Date(`${courseDate} 23:59:59`).getTime();
                        let courseStartTime = new Date(`${item.courseStart.replaceAll('-', '/')}`).getTime();
                        let courseEndTime = new Date(`${item.courseEnd.replaceAll('-', '/')}`).getTime();
                        // //开始时间 和 结束时间 都在当日
                        // let flag1 = courseStartTime >= startTime && courseEndTime <= endTime;
                        //1. 开始时间和结束时间包含当日
                        let flag1 = courseStartTime <= startTime && courseEndTime >= endTime;
                        //2. 开始时间在当日
                        let flag2 = courseStartTime >= startTime && courseStartTime <= endTime;
                        //3. 结束时间在当日
                        let flag3 = courseEndTime >= startTime && courseEndTime <= endTime;
                        //三种情况满足任意一种就可以
                        return flag1 || flag2 || flag3;
                    }
                    return flag;
                });
                // console.log(courseList.length);
                //按照课程状态（全部、已学、未学）tab筛选
                let list = courseList.filter(item => {
                    let flag = true;
                    if (courseFilterTab == SEARCH_TAB_MAP.FINISHED) {
                        flag = item.courseProcess == courseStatus.COMPLETE;
                    } else if (courseFilterTab == SEARCH_TAB_MAP.NOT_FINISH) {
                        flag = item.courseProcess != courseStatus.COMPLETE;
                    }
                    return flag;
                });
                // console.log('list -> ', list.length);
                // console.log('list -> ', list);
                this.setData({
                    searchCourseList: this.data.expandAll[this.data.activeSearchTab] ? list : list.slice(0, this.data.showMaxNum),
                    showCollapseButton: list.length > this.data.showMaxNum
                });
                if (updateTabInfo) {
                    this.setCourseTabInfo(courseList);
                }
                wx.nextTick(() => {
                    setTimeout(() => {
                        wx.hideLoading({
                            success: (res) => {},
                        });
                    }, 1500);
                });
            });
        },
        handleExpandChange() {
            let key = this.data.activeSearchTab;
            let prop = `expandAll.${key}`
            let value = !this.data.expandAll[key];
            this.setData({
                [prop]: value
            });
            // if (value) {
            //     wx.showLoading({
            //         title: '加载中',
            //     });
            // }
            this.queryCourse(false);
        },
        scrollToSchedule(info) {
            const query = this.createSelectorQuery();
            query.select(`#course-${info.id}`).boundingClientRect();
            query.exec(function (res) {
                console.log('query-res', res);
                wx.pageScrollTo({
                    duration: 0,
                    scrollTop: res[0].top - 80
                });
            });
        },
        async toLive(e) {
            // console.log('e --> ', e);
            // let item = getDataSet(e, "item");
            let item = e.type ? getDataSet(e, "item") : e;
            let plan = JSON.stringify(item);
            let isPre = this.data.isPre;
            if (isPre) {
                if (item.isReplay == logicStatus.NO) {
                    if (item.courseType == courseTypes.RECORD) {
                        toast('课程不允许回放!');
                    }
                    if (item.isLive && item.liveStatus == liveStatus.LIVEEND) {
                        toast('课程不允许回放!');
                    }
                    return;
                } else if (item.isReplay == logicStatus.YES) {
                    if (item.isLive && item.liveStatus != liveStatus.LIVEEND) {
                        return;
                    }
                }
            }

            let type = "";
            if (item.courseType == courseTypes.RECORD) {
                type = courseTypes.RECORD;
                let res = await Api.getCourseOpenStatus(item.id, (code, msg) => {
                    wx.hideToast();
                    wx.showModal({
                        title: msg || '课程还未开始~',
                        content: `${item.courseStart} 开始上课`,
                        showCancel: false
                    });
                    return false;
                });
                if (!res) {
                    return;
                }
            }

            if (item.isReplay && item.isLive && item.liveStatus == liveStatus.LIVEEND && type == "") {
                type = courseTypes.PLAYBACK;
            }

            if (item.isLive && type == "") {
                type = courseTypes.LIVE;
            }

            if (type == "") {
                type = courseTypes.OFFLINE;
            }
            // let detail = JSON.stringify(this.data.obj);
            //暂时解决解析json报错问题 start
            let detail = this.data.obj;
            let paramsDetail = JSON.stringify({
                ...detail,
                picUrl: '',
                teamName: '',
                itemName: ''
            });
            //暂时解决解析json报错问题 end
            Route.toCourseDetail(type, item.id, paramsDetail, plan, isPre, {
                refresh: () => {
                    this.triggerEvent("refresh")
                }
            });

        },
        selectDate(e) {
            // this.triggerEvent("select", getEventParam(e))
            let courseDate = getEventParam(e, "date");
            // console.log('courseStart -> ', courseDate);
            this.setData({
                filterCourseDate: courseDate
            });
            this.queryCourse();

            // let courseList = [];
            // if (!courseDate) {
            //     //全部
            //     courseList = this.data.courseList;
            // } else {
            //     //按日期筛选
            //     courseDate = courseDate.replaceAll('-', '/');

            //     let startTime = new Date(`${courseDate} 00:00:00`).getTime();
            //     let endTime = new Date(`${courseDate} 23:59:59`).getTime();

            //     // if (startTime)
            //     courseList = this.data.courseList.filter(course => {
            //         let courseStartTime = new Date(`${course.courseStart.replaceAll('-', '/')}`).getTime();
            //         let courseEndTime = new Date(`${course.courseEnd.replaceAll('-', '/')}`).getTime();
            //         // //开始时间 和 结束时间 都在当日
            //         // let flag1 = courseStartTime >= startTime && courseEndTime <= endTime;

            //         //开始时间和结束时间包含当日
            //         let flag1 = courseStartTime <= startTime && courseEndTime >= endTime;
            //         //开始时间在当日
            //         let flag2 = courseStartTime >= startTime && courseStartTime <= endTime;
            //         //结束时间在当日
            //         let flag3 = courseEndTime >= startTime && courseEndTime <= endTime;

            //         return flag1 || flag2 || flag3;
            //     });
            // }
        },
        refresh(e) {
            this.triggerEvent("refresh")
        }
    }
});