<template>
    <div class="action-timeline">
        <table class="action-timeline-table">
            <thead class="action-timeline-thead">
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody class="action-timeline-tbody">
                <template v-for="(usertask, usertaskIndex) in data.usertasks">
                    <tr :key='usertaskIndex'>
                        <td align="right" valign="top">
                            <div class='date'>
                                <div class='usertaskname'>{{ usertask.userTaskName }}</div>
                                <div class='arrow' @click="changeExpand(usertask)">
                                    <i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class='timeline'>
                                <template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
                                    {{$t('components.appwfapproval.wait')}}
                                    <strong>
                                        <template v-for="(identitylink, len) in usertask.identitylinks">
                                            <template v-if="identitylink.displayname">
                                            {{ identitylink.displayname }}
                                            <template v-if="len != usertask.identitylinks.length - 1">
                                            、
                                            </template>
                                            </template>
                                        </template>
                                    </strong>
                                    {{$t('components.appwfapproval.handle')}}
                                </template>
                                <template v-else>
                                    <ul class="action-timeline-wrapper">
                                        <template v-if="!usertask.isShow">
                                            <li v-if="usertask.comments && usertask.comments.length > 0" class="action-timeline-item">
                                                <div class='timeline-time'>
                                                    {{ formatDate(usertask.comments[0].time, 'MM月DD日 HH:mm') }}&nbsp;{{ usertask.comments[0].authorName }}
                                                </div>
                                                <div class='timeline-content'>
                                                    {{ usertask.comments[0].type }}&nbsp;{{ usertask.comments[0].fullMessage }}
                                                </div>
                                            </li>
                                        </template>
                                        <template v-else>
                                            <template v-for="(comment, commentIndex) in usertask.comments">
                                                <li :key="commentIndex" class="action-timeline-item">
                                                    <div class='timeline-time'>
                                                        {{ formatDate(comment.time, 'MM月DD日 HH:mm')}} &nbsp;{{ comment.authorName }}
                                                    </div>
                                                    <div class='timeline-content'>
                                                        {{ comment.type }}&nbsp;{{ comment.fullMessage }}
                                                    </div>
                                                </li>
                                            </template>
                                        </template>
                                    </ul>
                                </template>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import moment from 'moment';
import { GlobalService } from '@ibizstudio-ex/runtime';

@Component({
})
export default class ActionTimeline extends Vue {

    /**
     * 数据
     *
     *  @memberof ActionTimeline
     */
    data:any = {};

        /**
     *  初始化memo
     *
     *  @memberof ActionTimeline
     */
    initmemo:string = "";

    /**
     * 应用实体名称
     *
     * @memberof ActionTimeline
     */
    @Prop() appEntityCodeName!:string;

    /**
     *  上下文
     *
     *  @memberof ActionTimeline
     */
    @Prop() context:any;

    /**
     *  视图参数
     *
     *  @memberof ActionTimeline
     */
    @Prop() viewparams:any;

    /**
     * 初始化数据
     *
     *  @memberof ActionTimeline
     */
    created(){
        if(this.appEntityCodeName){
            new GlobalService().getService(this.appEntityCodeName, this.context).then((service: any) => {
                if(service){
                    service.GetWFHistory(this.context).then((res:any) =>{
                        if(res && (res.status === 200)){
                            this.data = res.data;
                            this.initUIStateData();
                        }
                    })
                }
            });
        }
    }

    /**
     * 初始化数据添加标记
     *
     *  @memberof ActionTimeline
     */
    initUIStateData() {
        if(this.data && this.data.usertasks) {
            for (let i in this.data.usertasks) {
                this.data.usertasks[i].isShow = false;
            }
        }
    }

    /**
     * 时间转换
     *
     *  @memberof ActionTimeline
     */
    formatDate(date: string, format: string) {
        return moment(date).format(format);
    }

    /**
     * 点击事件
     *
     *  @memberof ActionTimeline
     */
    changeExpand(usertask:any) {
        usertask.isShow = !usertask.isShow;
        this.$forceUpdate();
    }

}
</script>

<style lang='less'>
@import './action-timeline.less';
</style>