<template>
    <div class='app-todo-list'>
        <el-table :data="myTasks" :border="true" style="width: 100%">
            <el-table-column prop="" sortable label="标题">
                <template slot-scope="scope">
                    <span class="title" @click="handleClick(scope.row)">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="processDefinitionName" sortable label="流程" width="200">
            </el-table-column>
            <el-table-column prop="name" sortable label="状态" width="200">
            </el-table-column>
            <el-table-column prop="createTime" sortable label="创建时间" width="200">
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang = 'ts'>
import { Environment } from '@/environments/environment';
import { Component, Vue } from 'vue-property-decorator';

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

    /**
     * 待办数据
     */
    public myTasks: any[] = [];

    /**
     * vue创建
     */
    created(): void {
        this.getMyTasks();
    }

    /**
     * 获取待办列表
     */
    public getMyTasks() {
        let url: any = '/wfcore/mytasks';
        this.$http.get(url).then((response: any) => {
            if (response && response.status == 200) {
                const data: any = response.data;
                if (data && data.length > 0) {
                    this.myTasks = data;
                } else {
                    this.myTasks = [];
                }
            }
        }).catch((error: any) => {
            console.warn("加载数据错误");
        })
    }


    /**
     * 处理点击
     */
    public handleClick(data: any) {
        if (!data) return;
        // 拼接要打开的窗口地址
        const baseUrl: any = Environment.BaseUrl;
        const openUrl: any = baseUrl + `/wfcore/mytasks/${data.processDefinitionKey}/web/${data.processInstanceBusinessKey}/usertasks/${data.taskDefinitionKey}`;
        // 打开新窗口
        window.open(openUrl, '_blank');
    }

}
</script>

<style lang="less">
@import './app-todo-list.less';
</style>