<template>
    <el-container>
        <el-main>

            <el-row>
                <el-tabs type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="待办任务">
                        <!--检索条件-->
                        <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                            <el-col :span="6">
                                <el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
                                    <template slot="prepend">任务名称</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="queryinfo.taskDefinitionKey" placeholder="关键字" style="width: 200px" clearable>
                                    <template slot="prepend">关键字</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="queryinfo.assignee" placeholder="执行人或组名" style="width: 200px" clearable>
                                    <template slot="prepend">执行人</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="primary" v-on:click="getList">查询</el-button>
                                <!--                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->

                            </el-col>
                        </el-row>
                        <template>
                            <el-table
                                    v-loading="tableloading"
                                    :data="tableData"
                                    style="width: 100%"
                                    :default-sort = "{prop: 'date', order: 'descending'}"
                                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
                            >
                                <el-table-column
                                        prop="name"
                                        label="任务名称"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        prop="taskDefinitionKey "
                                        label="关键字">
                                </el-table-column>
                                <el-table-column
                                        prop="owner"
                                        label="所有者">
                                </el-table-column>
                                <el-table-column
                                        prop="assignee "
                                        label="执行者"
                                        width="160"
                                        show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="开始时间"
                                        width="160">
                                </el-table-column>
                                <!--                        <el-table-column-->
                                <!--                                fixed="right"-->
                                <!--                                label="操作"-->
                                <!--                                width="280">-->
                                <!--                            <template slot-scope="scope">-->
                                <!--                                <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
                                <!--                                <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
                                <!--                                <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
                                <!--                            </template>-->
                                <!--                        </el-table-column>-->
                            </el-table>
                        </template>
                        <!--分页模块-->
                        <el-row style="float: right;margin-top: 20px">
                            <el-col>
                                <div class="block">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="queryinfo.pageNum"
                                            :page-sizes="[10, 20, 30, 40]"
                                            :page-size="queryinfo.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="total">
                                    </el-pagination>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="已办任务">
                        <!--检索条件-->
                        <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                            <el-col :span="6">
                                <el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
                                    <template slot="prepend">任务名称</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
                                    <template slot="prepend">关键字</template>
                                </el-input>
                            </el-col>

                            <el-col :span="8">
                                <el-button type="primary" v-on:click="getAllList">查询</el-button>
                                <!--                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->

                            </el-col>
                        </el-row>
                        <template>
                            <el-table
                                    v-loading="tableloading"
                                    :data="tableData"
                                    style="width: 100%"
                                    :default-sort = "{prop: 'date', order: 'descending'}"
                                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
                            >
                                <el-table-column
                                        prop="name"
                                        label="任务名称"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        prop="taskDefinitionKey"
                                        label="关键字">
                                </el-table-column>
                                <el-table-column
                                        prop="owner"
                                        label="所有者">
                                </el-table-column>
                                <el-table-column
                                        prop="assignee"
                                        label="执行人"
                                        width="160"
                                        show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="开始时间"
                                        width="160">
                                </el-table-column>
                                <!--                        <el-table-column-->
                                <!--                                fixed="right"-->
                                <!--                                label="操作"-->
                                <!--                                width="280">-->
                                <!--                            <template slot-scope="scope">-->
                                <!--                                <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
                                <!--                                <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
                                <!--                                <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
                                <!--                            </template>-->
                                <!--                        </el-table-column>-->
                            </el-table>
                        </template>
                        <!--分页模块-->
                        <el-row style="float: right;margin-top: 20px">
                            <el-col>
                                <div class="block">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="queryinfo.pageNum"
                                            :page-sizes="[10, 20, 30, 40]"
                                            :page-size="queryinfo.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="total">
                                    </el-pagination>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="我发起的">
                        <!--检索条件-->
                        <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                            <el-col :span="6">
                                <el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
                                    <template slot="prepend">任务名称</template>
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
                                    <template slot="prepend">关键字</template>
                                </el-input>
                            </el-col>

                            <el-col :span="8">
                                <el-button type="primary"  v-on:click="getMyList">查询</el-button>
                                <!--                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->

                            </el-col>
                        </el-row>
                        <template>
                            <el-table
                                    v-loading="tableloading"
                                    :data="tableData"
                                    style="width: 100%"
                                    :default-sort = "{prop: 'date', order: 'descending'}"
                                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
                            >
                                <el-table-column
                                        prop="name"
                                        label="任务名称"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        prop="taskDefinitionKey"
                                        label="关键字">
                                </el-table-column>
                                <el-table-column
                                        prop="owner"
                                        label="所有者">
                                </el-table-column>
                                <el-table-column
                                        prop="assignee"
                                        label="执行者"
                                        width="160"
                                        show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="开始时间"
                                        width="160">
                                </el-table-column>
                                <!--                        <el-table-column-->
                                <!--                                fixed="right"-->
                                <!--                                label="操作"-->
                                <!--                                width="280">-->
                                <!--                            <template slot-scope="scope">-->
                                <!--                                <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
                                <!--                                <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
                                <!--                                <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
                                <!--                            </template>-->
                                <!--                        </el-table-column>-->
                            </el-table>
                        </template>
                        <!--分页模块-->
                        <el-row style="float: right;margin-top: 20px">
                            <el-col>
                                <div class="block">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="queryinfo.pageNum"
                                            :page-sizes="[10, 20, 30, 40]"
                                            :page-size="queryinfo.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="total">
                                    </el-pagination>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-row>

        </el-main>
    </el-container>
</template>

<script>
    import {allTask,allTaskHistory} from "../../api/technological";

    export default {
        name: "task",
        data() {
            return{
                queryinfo:{
                    name:'',
                    taskDefinitionKey:'',
                    assignee:'',
                    pageNum:1,
                    pageSize:10
                },
                total:0,
                tableData: [],
                tableloading:false,
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            // 分页
            handleSizeChange(val) {
                this.queryinfo.pageSize= val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryinfo.pageNum  = val
                this.getList()
            },
            //查询
            getList() {
                const _this = this
                this.tableloading = true;
                allTask(this.queryinfo).then((response) => {
                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data
                    // 获取列表的总记录数
                    _this.total = res.total
                    this.tableloading = false;
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {

                    // 关闭加载
                    _this.$message.error(error.toString())
                    this.tableloading = false;

                })
            },
            handleClick(tab, event){
                if (tab.index == 0) {
                    this.getList();
                } else if (tab.index == 1) {
                    this.getAllList();
                } else {
                    this.getMyList();
                }
            },
            getMyList(){

            },
            //查询
            getAllList() {
                const _this = this
                this.tableloading = true;
                allTaskHistory(this.queryinfo).then((response) => {
                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data
                    // 获取列表的总记录数
                    _this.total = res.total
                    this.tableloading = false;
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {

                    // 关闭加载
                    _this.$message.error(error.toString())
                    this.tableloading = false;

                })
            },
        }

    }
</script>

<style scoped>

</style>