<template>
    <div ref="refBody" style="min-height: 400px;">
        <div style="position: fixed;width: 100%;" :style="{top:appBarHeight+'px'}" ref="refTab">
            <tab :line-width="1" custom-bar-width="60px" active-color="#46a4da">
                <tab-item :selected="docType === 0" @on-item-click="handleTabChange">待我审批</tab-item>
                <tab-item :selected="docType === 1" @on-item-click="handleTabChange">我发起的公文</tab-item>
            </tab>
        </div>
        <div :style="contenStyle">
            <!--<div style="height: 100px" v-for="item in allData" @click="handleItemClick(item)">-->
                <!--{{item.docid}}-->
                <!--{{item.doccontent}}-->
            <!--</div>-->
            <template v-for="group in dataGroups">
                <div v-if="group.list.length" class="lj-card-item">
                    <div class="lj-todo-group-title">{{group.title}}</div>
                    <div v-for="item in group.list" class="lj-todo-card lj-todo-card-border-left-blue"
                         :class="group.class" @click="handleItemClick(item)">
                        <div>
                            <div style="float:left">
                                <lj-tag-double v-if="!docType && !(item.docflag === 2 && item.empid === empid)" type="danger" size="small" value="审批时限" :doubleValue="item.limittime | dateRangeSimpleFilter"></lj-tag-double>
                                <div v-else class="lj-card-quaternary-content lj-card-summary-light-text" style="float: left;">
                                    {{item.displayDate | dateRangeSimpleFilter}}
                                </div>
                            </div>
                            <div v-for="tag in item.tagList" class="lj-todo-card-tip" :class="tag.class"
                                 style="float: right;">{{tag.content}}
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                        <div class="lj-todo-card-content">{{item.doccontent}}</div>
                        <div>
                            <lj-tag-double size="small" value="发起时间" :doubleValue="item.opdt | dateRangeSimpleFilter"></lj-tag-double>
                            <lj-tag-double size="small" value="发起人" :doubleValue="item.opemp"></lj-tag-double>
                            <!-- 增加显示审批流程对应的单据类型【开平市积雨卫浴实业】【蔡浩庆】【12567#】 -->
                            <!-- 避免用户只更新前端，导致报错，多加v-if v-else进行两种方式切换 -->
                            <lj-tag-double v-if="item.treename && item.treename.length > 0" size="small" :value="item.dtypeStr" :doubleValue="item.treename"></lj-tag-double>
                            <lj-tag-double v-else size="small" :value="item.dtypeStr"></lj-tag-double>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import {Tab, TabItem} from 'vux'
    import LjTagDouble from "components/lj-tag-double";

    export default {
        name: "module-todo-doc",
        components: {Tab, TabItem, LjTagDouble},
        data() {
            return {
                empid: 0,
                dataGroups: [],
                todayDscrp: '',
                // allData: [],
                docType: 0,
                contenStyle: {}
            }
        },
        created() {
            let user = $lj.getStorage("userInfo");
            this.empid = user.empid;
            let dtNow = new Date();
            let dateToday = dtNow.getFullYear() + "-" + (dtNow.getMonth() + 1) + "-" + dtNow.getDate();
            this.todayDscrp = $lj.dateformat(dateToday, "M月d日(今天)");
            this.refresh();
        },
        mounted() {
            let tabStyle = window.getComputedStyle(this.$refs.refTab);
            this.contenStyle = {paddingTop: tabStyle.height};
        },
        methods: {
            handleTabChange(index) {
                this.docType = index;
                this.refresh();
            },
            refresh() {
                let requestBody = {
                    token: $lj.getStorage("token"),
                    type: this.docType
                };
                this.dataGroups = [
                    {title: this.todayDscrp, class: "-blue", list: []},
                    {title: "被否决", class: "lj-todo-card-border-left-red", list: []},
                    {title: "待审批", class: "lj-todo-card-border-left-blue", list: []},
                    {title: "已审核", class: "lj-todo-card-border-left-green", list: []},
                ];
                let self = this;
                $lj.postLJRequest("GetL1OaEmpDoc", requestBody, function (ret) {
                    if (ret) {
                        let dtNow = new Date();
                        let today = $lj.dateformat(dtNow, 'yyyy-MM-dd');
                        for (let item of ret.Oadoc) {
                            // let isTodo = item.docflag === 1 && typeof item.limittime !== 'undefined';
                            let isTodo = item.docflag === 1;
                            let isOppose = item.docflag === 2 && item.empid === self.empid;
                            let isUrge = isTodo && item.urgeflag;
                            let isDone = item.docflag === 11;
                            item.tagList = [];
                            item.displayDate = self.docType ? item.opdt : (isOppose ? item.fnsdt : item.limittime);
                            if (isTodo && typeof item.limittime !== 'undefined') {
                                item.tagList.push({class: "lj-todo-card-tip-red", content: "待审核"});
                            }
                            if (isUrge) {
                                item.tagList.push({class: "lj-todo-card-tip-red", content: "催办"});
                            }
                            if (isOppose) {
                                item.tagList.push({class: "lj-todo-card-tip-red", content: "被否决"});
                            }
                            if (isDone) {
                                item.tagList.push({class: "lj-todo-card-tip-blue", content: "已审核"});
                            }

                            let date = $lj.dateformat(item.displayDate, 'yyyy-MM-dd');
                            if (date === today) {
                                self.dataGroups[0].list.push(item);
                            } else if (isOppose) {
                                self.dataGroups[1].list.push(item);
                            } else if (isTodo) {
                                self.dataGroups[2].list.push(item);
                            } else if (isDone) {
                                self.dataGroups[3].list.push(item);
                            }
                        }
                        self.dataGroups[1].list.sort((a, b) => {
                            return new Date(b.displayDate) - new Date(a.displayDate);
                        })
                        self.dataGroups[2].list.sort((a, b) => {
                            return new Date(b.displayDate) - new Date(a.displayDate);
                        })
                        self.dataGroups[3].list.sort((a, b) => {
                            return new Date(b.displayDate) - new Date(a.displayDate);
                        })
                    }
                });
            },
            handleItemClick(item) {
                $lj.openWin("approval-process", {mainObject: item});
            }
        },
        computed: {
            appBarHeight() {
                return $lj.getAppBarHeight();
            }
        }
    }
</script>

<style scoped>

</style>