<template>
    <div :class="['project-log', taskId == 0 ? 'is-drawer' : '']">
        <div class="log-title">{{$L('项目动态')}}</div>
        <ul class="logs-activity">
            <li v-for="items in lists">
                <div class="logs-date">{{logDate(items)}}</div>
                <div class="logs-section">
                    <Timeline>
                        <TimelineItem v-for="(item, index) in items.lists" :key="index">
                            <div slot="dot" class="logs-dot">
                                <UserAvatar v-if="item.userid" :userid="item.userid" :size="18"/>
                                <EAvatar v-else :size="18">A</EAvatar>
                            </div>
                            <div class="log-summary">
                                <span class="log-creator">{{item.user ? item.user.nickname : $L('系统')}}</span>
                                <ProjectLogDetail class="log-text" :render="logDetail" :item="item"/>
                                <span v-if="operationList(item).length > 0" class="log-operation">
                                    <Button v-for="(op, oi) in operationList(item)" :key="oi" size="small" @click="onOperation(op)">{{op.button}}</Button>
                                </span>
                                <span class="log-time">{{item.time.ymd}} {{item.time.segment}} {{item.time.hi}}</span></div>
                        </TimelineItem>
                    </Timeline>
                </div>
            </li>
            <li v-if="loadIng > 0" class="logs-loading"><Loading/></li>
            <li v-else-if="hasMorePages" class="logs-more" @click="getMore">{{$L('加载更多')}}</li>
            <li v-else-if="totalNum == 0" class="logs-none" @click="getLists(true)">{{$L('没有任何动态')}}</li>
        </ul>
    </div>
</template>

<script>
import {VNode} from "vue";
import ProjectLogDetail from "./ProjectLogDetail";

export default {
    name: "ProjectLog",
    components: {ProjectLogDetail},
    props: {
        projectId: {
            type: Number,
            default: 0
        },
        taskId: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            loadIng: 0,

            lists: {},
            listPage: 1,
            hasMorePages: false,
            totalNum: -1,
        }
    },

    mounted() {
        this.getLists(true);
    },

    computed: {

    },

    watch: {
        projectId() {
            this.lists = {};
            this.getLists(true);
        },
        taskId() {
            this.lists = {};
            this.getLists(true);
        },
        loadIng(num) {
            this.$emit("on-load-change", num > 0)
        }
    },

    methods: {
        logDate(items) {
            let md = $A.formatDate("m-d");
            return md == items.ymd ? (items.ymd + ' ' + this.$L('今天')) : items.key;
        },

        getLists(resetLoad) {
            if (resetLoad === true) {
                this.listPage = 1;
            }
            this.loadIng++;
            this.$store.dispatch("call", {
                url: 'project/log/lists',
                data: {
                    project_id: this.projectId,
                    task_id: this.taskId,
                    page: Math.max(this.listPage, 1),
                    pagesize: this.pagesize,
                }
            }).then(({data}) => {
                this.loadIng--;
                if (resetLoad === true) {
                    this.lists = {};
                }
                data.data.forEach((item) => {
                    let time = item.time;
                    let key = time.ymd + " " + time.week;
                    if (typeof this.lists[key] !== "object") {
                        this.$set(this.lists, key, {
                            key: key,
                            ymd: time.ymd,
                            lists: [],
                        });
                    }
                    this.lists[key].lists.push(item);
                });
                this.hasMorePages = data.current_page < data.last_page;
                this.totalNum = data.total;
            }).catch(() => {
                this.loadIng--;
                this.lists = {};
                this.hasMorePages = false;
                this.totalNum = 0;
            });
        },

        getMore() {
            if (!this.hasMorePages) {
                return;
            }
            this.hasMorePages = false;
            this.listPage++;
            this.getLists();
        },

        /**
         * 日志详情
         * @param h
         * @param detail
         * @param record
         * @returns {*[]}
         */
        logDetail(h, {detail, record}) {
            let vNode = [h('span', this.$L(detail))];
            if ($A.isJson(record)) {
                if ($A.isArray(record.change)) {
                    let [before, now] = record.change
                    vNode.push(h('span', ': '))
                    if (before) {
                        vNode.push(h('span', `${before} => ${now}`))
                    } else {
                        vNode.push(h('span', now))
                    }
                }
                if (record.userid) {
                    let userids = $A.isArray(record.userid) ? record.userid : [record.userid]
                    let userNode = [];
                    userids.some(userid => {
                        userNode.push(h('UserAvatar', {
                            props: {
                                size: 18,
                                userid
                            }
                        }))
                    })
                    if (userNode.length > 0) {
                        vNode.push(h('div', {
                            class: 'detail-user'
                        }, [
                            h('div', {
                                class: 'detail-user-wrap'
                            }, userNode)
                        ]))
                    }
                }
            }
            return h('span', {
                class: 'log-text'
            }, vNode)
        },

        /**
         * 可操作事件
         * @param id
         * @param record
         * @returns {*[]}
         */
        operationList({id, record}) {
            let list = [];
            if (!$A.isJson(record)) {
                return list
            }
            if (this.taskId > 0 && $A.isJson(record.flow)) {
                list.push({
                    id,
                    button: '重置',
                    content: `确定重置为【${$A.getMiddle(record.flow.flow_item_name, "|")}】吗？`,
                })
            }
            return list;
        },

        /**
         * 执行操作
         * @param item
         */
        onOperation(item) {
            $A.modalConfirm({
                content: item.content,
                loading: true,
                onOk: () => {
                    this.$store.dispatch("call", {
                        url: 'project/task/resetfromlog',
                        data: {
                            id: item.id
                        }
                    }).then(({data, msg}) => {
                        $A.messageSuccess(msg);
                        this.$Modal.remove();
                        this.$store.dispatch("saveTask", data);
                        this.getLists(true);
                    }).catch(({msg}) => {
                        $A.modalError(msg, 301);
                        this.$Modal.remove();
                    });
                }
            });
        }
    }
}
</script>
