<template>
    <div class="extend-action-timeline">
        <div class="extend-action-timeline-table">
            <div class="extend-action-timeline-thead"></div>
            <div class="extend-action-timeline-body" v-if="data.length > 0">
                <div class="timeline-draw extend-action-timeline-body__timeline timeline-head">
                    <div class="timeline-wrapper">
                        <div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div>
                        <div class="timeline-wrapper__usertaskname">{{ $t('components.timeline.node') }}</div>
                        <div class="timeline-wrapper__authorname">{{ $t('components.timeline.author') }}</div>
                        <div class="timeline-wrapper__type">{{ $t('components.timeline.type') }}</div>
                        <div class="timeline-wrapper__last-time">{{ $t('components.timeline.lasttime') }}</div>
                        <div class="timeline-wrapper__fullmessage">{{ $t('components.timeline.opinion') }}</div>
                    </div>
                    <div class="timeline-arrow"></div>
                </div>
                <template v-for="(usertask, index) in data">
                    <div class="timeline-content" :key="index">
                        <div class="extend-action-timeline-body__timeline">
                            <div class="timeline-wrapper">
                                <div class="timeline-wrapper__timeline-index">
                                    <span>{{ usertask.index }}</span>
                                    <div class="icon-bottom" v-if="usertask.index != 1">
                                        <i class="el-icon-bottom"></i>
                                    </div>
                                    <div class="icon-top" v-if="usertask.index < usertasksLength"></div>
                                </div>
                                <div class="timeline-wrapper__usertaskname">{{ usertask.usertaskname }}</div>
                                <div class="timeline-wrapper__authorname">{{usertask.displayNames ? usertask.displayNames.join(' , ') : usertask.authorName}}</div>
                                <div class="timeline-wrapper__type" v-if="usertask.type">
                                    <div
                                        class="dot"
                                    ></div>
                                    <span>{{usertask.type}}</span>
                                </div>
                                <div class="timeline-wrapper__last-time" v-if="usertask.time">
                                    {{
                                        formatDate(
                                            usertask.time,
                                            'MM月DD日 HH:mm:ss',
                                        )
                                    }}
                                </div>
                                <el-popover class="timeline-wrapper__tooltip" placement="top" :width="500" trigger="hover">
                                    <div slot="reference">
                                        {{ usertask.fullMessage }}
                                    </div>
                                    <div class="fullmessage">
                                        {{ usertask.fullMessage }}
                                    </div>
                                </el-popover>
                            </div>
                            <div v-if="usertask.displayNames && usertask.displayNames.length > 1" class="timeline-arrow" @click="changeExpand(usertask)">
                                <i :class="usertask.isShow ? 'el-icon-minus' : 'el-icon-plus'" />
                            </div>
                        </div>
                        <div v-if="usertask.isShow">
                            <template v-for="(displayName, index) in usertask.displayNames">
                                <div class="timeline-draw extend-action-timeline-body__timeline" :key="index">
                                    <div class="timeline-wrapper">
                                        <div class="timeline-wrapper__timeline-index">
                                            <div v-if="usertask.index < usertasksLength" class="icon-line"></div>
                                        </div>
                                        <div class="timeline-wrapper__usertaskname"></div>
                                        <div class="timeline-wrapper__authorname">
                                            {{ displayName }}
                                        </div>
                                    </div>
                                    <div class="timeline-arrow"></div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import moment from 'moment';

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

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

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

    /**
     *  实体名称
     *
     *  @memberof ExtendActionTimeline
     */
    @Prop() public appDeCodeName!: string;

    /**
     * 数据
     *
     *  @memberof ExtendActionTimeline
     */
    public data: any[] = [];

    /**
     *  初始化memo
     *
     *  @memberof ExtendActionTimeline
     */
    public initmemo: string = '';

    /**
     *  子项索引初始值
     *
     *  @memberof ExtendActionTimeline
     */
    public usertasksIndex: number = 1;

    /**
     *  子项长度初始值
     *
     *  @memberof ExtendActionTimeline
     */
    public usertasksLength: number = 1;

    /**
     *  实体服务
     *
     *  @memberof ExtendActionTimeline
     */
    public appEntityService: any;

    /**
     * 初始化数据
     *
     *  @memberof ExtendActionTimeline
     */
    public async created() {
        this.appEntityService = await window.entityServiceRegister.getService(this.appDeCodeName.toLowerCase());
        if (this.appEntityService) {
            this.appEntityService.GetWFHistory(this.context).then((response: any) => {
                if (response && response.status === 200) {
                    this.formatData(response.data);
                    this.initUIStateData(this.data);
                } else {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response });
                }
            }).catch((error: any) => {
                const message = error.message ? error.message : '加载数据错误';
                this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
            })
        }
    }

    /**
     * 初始化数据添加标记
     *
     *  @memberof ExtendActionTimeline
     */
    public initUIStateData(items: any) {
        if (items.length > 0) {
            this.usertasksIndex = 1;
            items.forEach((item: any) => {
                item.isShow = false;
                item.index = this.usertasksIndex;
                this.usertasksIndex++;
            })
            this.usertasksLength = this.usertasksIndex - 1;
            this.$forceUpdate();
        }
    }

    /**
     * 格式化数据
     *
     *  @memberof ExtendActionTimeline
     */
    public formatData(data: any) {
        const historyTasks = data.historytasks || [];
        const waitTasks = data.waittasks || [];
        if (historyTasks.length > 0) {
            this.data.push(...historyTasks);
        }
        if (waitTasks.length > 0) {
            const taskItems: any[] = [];
            waitTasks.forEach((task: any) => {
                const index = taskItems.findIndex((item: any) => Object.is(task.usertaskid, item.usertaskid));
                if (task.usertaskid && index == -1) {
                    task.displayNames = [task.displayname];
                    taskItems.push(task);
                }
                if (index != -1) {
                    const index = taskItems.findIndex((item: any) => Object.is(item.usertaskid, task.usertaskid));
                    taskItems[index].displayNames.push(task.displayname);
                }
            })
            this.data.push(...taskItems);
        }
    }

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

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

    /**
     * 办理人员名称显示去重
     *
     * @param tag 需要去重的名称标识
     * @param data 需要去重数据集
     * @memberof ExtendActionTimeline
     */
    public acceptingOfficerNodup(tag: string, data: any[]): any[] {
        let tempData: any[] = [];
        if (data && data.length > 0 && tag) {
            data.forEach((data: any) => {
                tempData.push(data[tag]);
            });
        }
        const nodup = [...new Set(tempData)];
        return nodup;
    }
}
</script>

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