<template>
    <div :style="contentStyle" ref="refTab">
        <lj-sticky :offset="appBarHeight" @sticky-on="handleStickyOn" @sticky-off="handleStickyOff">
            <lj-calendar v-model="curDate" :monthTopHide="hideMonth" :range="calendarRange" @change="refreshCurDate"
                         @display-range-changed="handleCalendarRangeChanged"
                         ref="refCalendar"/>
            <tab :line-width="1" :custom-bar-width="planType === 0 ? '56px':'84px'" active-color="#46a4da">
                <tab-item :selected="planType === 0" @on-item-click="handleTabChange">我的任务</tab-item>
                <tab-item :selected="planType === 1" @on-item-click="handleTabChange">我安排的任务</tab-item>
                <tab-item disabled></tab-item>
                <tab-item disabled>

                </tab-item>
            </tab>
        </lj-sticky>
        <div>
            <template v-for="(group,index) in dataGroups" v-if="index === 0 || planType === 0">
                <div v-if="group.list.length" class="lj-card-item">
                    <div :style="planType === 0 && index === 0?{paddingTop:  '10px'}:{}">
                        <div class="lj-todo-group-title">
                            {{group.title}}
                        </div>
                        <div v-if="planType === 0 && index === 0"
                             style="float: right;display: flex;align-items: center;height: 0;margin-top: -20px;">
                            只显示待办
                            <inline-x-switch v-model="onlyTodo" style="margin-left: 5px;"></inline-x-switch>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                    <div v-if="planType === 1 || !onlyTodo || item.isTodo" v-for="item in group.list" class="lj-todo-card lj-todo-card-border-left-blue"
                         :class="group.class" @click="handleItemClick(item)">
                        <div>
                            <div class="lj-card-quaternary-content lj-card-summary-light-text"
                                 style="float: left;">
                                {{item.stime | dateRangeSimpleFilter(item.etime)}}
                            </div>
                            <div v-for="tag in item.tagList" class="lj-todo-card-tip" :class="tag.class"
                                 style="float: right;">{{tag.content}}
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                        <div class="lj-todo-card-content">{{item.content}}</div>
                        <div style="display: inline-flex;">
                            <div class="lj-todo-card-dscrp lj-card-quaternary-content lj-card-summary-light-text">
                                安排人:{{item.opemp}}
                            </div>
                            <div class="lj-todo-card-dscrp lj-card-quaternary-content lj-card-summary-light-text">
                                {{item.kindStr}}
                            </div>
                            <div v-if="item.kind === 3" class="lj-todo-card-dscrp lj-card-quaternary-content lj-card-summary-light-text">
                                {{item.relbillcode}}
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import {Tab, TabItem, InlineXSwitch} from 'vux'
    import LjSticky from "components/lj-sticky";
    import LjCalendar from "components/lj-calendar";

    export default {
        name: "module-todo-workplan",
        components: {Tab, TabItem, InlineXSwitch, LjCalendar, LjSticky},
        data() {
            return {
                empid: 0,
                dataGroups: [],
                dateTodoPlanDic: {},
                dateMyPlanDic: {},
                curCalendarList: [],
                // todayDscrp: '',/
                planType: 0,
                contentStyle: {},
                curDate: undefined,
                calendarRange: undefined,
                thisWeekRange: undefined,
                onlyTodo: false,
                hideMonth: false,
            }
        },
        created() {
            let user = $lj.getStorage("userInfo");
            this.empid = user.empid;
            let now = new Date();
            let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            let startDay = today.getDay() === 1 ? today : $lj.dateAdd(today, 0, 0, 1 - today.getDay() || 7);
            let endDay = today.getDay() === 0 ? today : $lj.dateAdd(today, 0, 0, 7 - today.getDay() || 7);
            this.thisWeekRange = [startDay, endDay];
            // this.todayDscrp = $lj.dateformat(now, "M月d日(今天)");
            this.dataGroups = [
                {title: "", class: "lj-todo-card-border-left-blue", list: []},
                {title: "超期", class: "lj-todo-card-border-left-red", list: []},
                {title: "验收", class: "lj-todo-card-border-left-green", list: []}
            ];
            this.refreshToDo();
        },
        methods: {
            handleStickyOn() {
                this.calendarRange = this.thisWeekRange;
                this.$nextTick(() => {
                    let calendarStyle = window.getComputedStyle(this.$refs.refCalendar.$el);
                    this.contentStyle = {paddingTop: Number(calendarStyle.height.replace("px", '')) + this.appBarHeight + "px"};
                });
            },
            handleStickyOff() {
                this.calendarRange = undefined;
                this.contentStyle.paddingTop = 0;
            },
            handleTabChange(index) {
                this.planType = index;
                if (this.curCalendarList.length) {
                    this.refreshCalendarNotify();
                    this.handleCalendarRangeChanged({
                        startDay: this.curCalendarList[0].date,
                        endDay: this.curCalendarList[this.curCalendarList.length - 1].date,
                        list: this.curCalendarList
                    });
                }
                this.refresh();
            },
            refreshCalendarNotify() {
                let planDic = this.planType === 0 ? this.dateTodoPlanDic : this.dateMyPlanDic;
                let list = this.curCalendarList;
                for (let day of list) {
                    let date = $lj.dateformat(day.date, 'yyyy-MM-dd');
                    this.$set(day, "isNotify", planDic[date]);
                }
            },
            refresh() {
                this.refreshCurDate();
            },
            handleCalendarRangeChanged({startDay, endDay, list}) {
                let startDate = $lj.dateformat(startDay, "yyyy-MM-dd");
                let endDate = $lj.dateformat(endDay, "yyyy-MM-dd");
                this.curCalendarList = list;
                let planDic = this.planType === 0 ? this.dateTodoPlanDic : this.dateMyPlanDic;
                if (planDic[startDate] !== undefined && planDic[endDate] !== undefined) {
                    this.refreshCalendarNotify();
                    return;
                }
                let requestBody = {
                    token: $lj.getStorage("token"),
                    etimeBegin: startDate,
                    etimeEnd: endDate,
                    type: this.planType
                };
                let self = this;
                $lj.postLJRequest("GetL1OaEmpWorkPlan", requestBody, function (ret) {
                    if (ret) {
                        planDic[startDate] = false;
                        planDic[endDate] = false;
                        for (let item of ret.workplan) {
                            let date = $lj.dateformat(item.etime || item.stime, 'yyyy-MM-dd');
                            planDic[date] = true;
                        }
                        self.refreshCalendarNotify();

                        let itDate = $lj.getDateObject(startDate);
                        let endDateObject = $lj.getDateObject(endDate);
                        do {
                            let dateStr = $lj.dateformat(itDate, "yyyy-MM-dd");
                            if (!planDic[dateStr]) {
                                planDic[dateStr] = false;
                            }
                            itDate = $lj.dateAdd(itDate, 0, 0, 1);
                        } while (itDate <= endDateObject)

                    }
                });
            },
            refreshCurDate() {
                if (!this.curDate) {
                    return;
                }
                let dtNowOrgin = new Date();
                let dtNow = dtNowOrgin.getFullYear() + "-" + (dtNowOrgin.getMonth() + 1) + "-" + dtNowOrgin.getDate();
                let dayDscrp = $lj.dateformat(dtNow, "M月d日");
                let curDate = this.curDate.getFullYear() + "-" + (this.curDate.getMonth() + 1) + "-" + this.curDate.getDate();
                if ($lj.dateformat(dtNow, 'yyyy-MM-dd') === $lj.dateformat(curDate, 'yyyy-MM-dd')) {
                    dayDscrp += "(今天)";
                }
                this.dataGroups[0].title = dayDscrp;
                this.dataGroups[0].list = [];
                let requestBody = {
                    token: $lj.getStorage("token"),
                    etimeBegin: this.curDate,
                    etimeEnd: this.curDate,
                    type: this.planType
                };
                let self = this;
                $lj.postLJRequest("GetL1OaEmpWorkPlan", requestBody, function (ret) {
                    if (ret) {
                        for (let item of ret.workplan) {
                            self.computeWorkplanTag(item);
                            self.dataGroups[0].list.push(item);
                        }
                    }
                });
            },
            computeWorkplanTag(workplan) {
                let dtNow = new Date();
                if (workplan.kind === 5) {
                    workplan.isTodo = workplan.empid === this.empid && (workplan.status == 0 || workplan.status == 1 || workplan.status == 2);
                    workplan.isDelay = workplan.isTodo && dtNow > $lj.getDateObject(workplan.etime || workplan.stime);
                    workplan.isToCheck = workplan.check_empid === self.empid && workplan.status === 3;
                }
                else {
                    workplan.isTodo = workplan.empid === this.empid && !workplan.status;
                    workplan.isDelay = workplan.isTodo && dtNow > $lj.getDateObject(workplan.etime || workplan.stime);
                    workplan.isToCheck = workplan.check_empid === self.empid && workplan.status === 1;
                }
                workplan.tagList = [];
                if (workplan.isTodo) {
                    workplan.tagList.push({class: "lj-todo-card-tip-red", content: "待办"});
                }
                if (workplan.isDelay) {
                    workplan.tagList.push({class: "lj-todo-card-tip-red", content: "超期"});
                }
                if (workplan.isToCheck) {
                    workplan.tagList.push({class: "lj-todo-card-tip-blue", content: "验收"});
                }
                if (workplan.hasFile) {
                    workplan.tagList.push({class: "lj-todo-card-tip-grey", content: "有图片"});
                }
            },
            refreshToDo() {
                this.dataGroups[1].list = [];
                this.dataGroups[2].list = [];
                let requestBody = {
                    token: $lj.getStorage("token"),
                    type: 2
                };
                let self = this;
                $lj.postLJRequest("GetL1OaEmpWorkPlan", requestBody, function (ret) {
                    if (ret) {
                        for (let item of ret.workplan) {
                            self.computeWorkplanTag(item);
                            if (item.isDelay) {
                                self.dataGroups[1].list.push(item);
                            }
                            if (item.isToCheck) {
                                self.dataGroups[2].list.push(item);
                            }
                        }
                    }
                });
            },
            handleItemClick(item) {
                if (item.kind === 5) {
                    $lj.openWin("equipment-repair-info", {mainObject: {repairtid: item.planid}});
                }
                else {
                    $lj.openWin("workplan-detail", {mainObject: item});
                }
            }
        },
        computed: {
            appBarHeight() {
                return $lj.getAppBarHeight();
            }
        }
    }
</script>

<style scoped>

</style>