<template>
    <div class='app-todo-list'>
        <i-input v-model="query" search enter-button @on-search="handleSearch" class='app-todo-list__search' placeHolder="标题"/>
        <el-table :data="myTasks" :border="true" @sort-change="handleSortChange">
            <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>
        <el-pagination
            class="app-todo-list__pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

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

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

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

    /**
     * 查询数据
     */
    public query: string = '';

    /**
     * 分页条数
     */
    public limit: number = 20;

    /**
     * 当前分页
     */
    public curPage: number = 1;

    /**
     * 总条数
     */
    public total: number = 0;

    /**
     * 排序字段
     */
    public sort: string = '';

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

    /**
     * 获取待办列表
     */
    public getMyTasks() {
        const params = {
            size: this.limit,
            page: this.curPage - 1
        };
        let url: any = '/wfcore/mytasks';
        if (this.query) {
            Object.assign(params, {query: this.query});
        }
        if (this.sort) {
            Object.assign(params, {sort: this.sort});
        }
        Http.getInstance().get(url, params).then((response: any) => {
            if (response && response.status == 200) {
                if(response.headers['x-total']){
                    this.total = Number(response.headers['x-total']);
                }
                const data: any = response.data || [];
                if (data && data.length > 0) {
                    this.myTasks = data;
                } else {
                    this.myTasks = [];
                }
            }
        }).catch((error: any) => {
            const message = error.message ? error.message : '加载数据错误';
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
        })
    }


    /**
     * 处理点击
     */
    public handleClick(data: any) {
        if (!data) return;
        const baseUrl: any = Environment.BaseUrl;
        this.$http.get(baseUrl + `/wfcore/mytasks/${data.processDefinitionKey}/web/${data.processInstanceBusinessKey}/usertasks/${data.taskDefinitionKey}`).then((response: any) => {
            const { status, data } = response;
            if (status && status == 200) {
                const url = data.substr(data.indexOf("#") + 1);
                const indexPath = this.$viewTool.getIndexRoutePath(this.$route);
                this.$router.push({ path: `${indexPath}${url}` });
            } else {
                const message = data.message ? data.message : '跳转失败';
                this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
            }
        }).catch((error: any) => {
            const message = error.message ? error.message : '跳转失败';
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
        })
    }

    /**
     * 处理搜索
     */
    public handleSearch() {
        this.getMyTasks();
    }

    /**
     * 处理分页数改变
     */
    public handleSizeChange(size: number) {
        this.limit = size;
        this.getMyTasks();
    }

    /**
     * 处理分页改变
     */
    public handleCurrentChange(page: number) {
        this.curPage = page;
        this.getMyTasks();
    }

    /**
     * 处理排序改变
     */
    public handleSortChange($event: any) {
        const { prop, order } = $event;
        const dir = Object.is(order, 'ascending') ? 'asc' : Object.is(order, 'descending') ? 'desc' : '';
        this.sort = `${prop},${dir}`;
        this.getMyTasks();
    }

}
</script>

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