<template>
    <div>
        <el-tabs v-model="tab" type="card">
            <el-tab-pane label="待签收" name="toClaim">
                <el-table :data="toClaim" row-key="id" ref="table">
                    <el-table-column v-if="multipleMode" align="center" type="selection" min-width="50">
                    </el-table-column>
                    <el-table-column prop="id" label="id" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" :formatter="datetimeFormatter">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="{row}">
                            <el-button v-if="row.assignee" @click="handle(row)" type="primary" size="mini" plain>办理</el-button>
                            <el-button v-else @click="claim(row)" type="primary" size="mini" plain>签收</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="待办" name="todo">
                <el-table :data="todo" row-key="id" ref="table">
                    <el-table-column v-if="multipleMode" align="center" type="selection" min-width="50">
                    </el-table-column>
                    <el-table-column prop="id" label="id" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" :formatter="datetimeFormatter">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="{row}">
                            <el-button v-if="row.assignee" @click="handle(row)" type="primary" size="mini" plain>办理</el-button>
                            <el-button v-else @click="claim(row)" type="primary" size="mini" plain>签收</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="dialogVisible" title="办理">
            <dynamic-form ref="taskForm" :formProps="taskForm" v-model="taskFormData"></dynamic-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click="completeTask" :loading="loading" size="small">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
import DynamicForm from '../components/DynamicForm'

export default {
    created() {
        this.getData();
    },
    data() {
        return {
            tab: 'toClaim',
            tableData: [],
            name: '',
            multipleMode: false,
            loading: false,
            taskForm: [],
            taskFormData: {},
            dialogVisible: false,
            selectedTaskId: null,
            toClaim: [],
            todo: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
        selection() {
            return this.$refs.table.selection.map(i => i.id);
        }
    },
    methods: {
        pageSizeChange(size) {
            this.pageSize = size;
            this.getData();
        },
        currentPageChange(page) {
            this.currentPage = page;
            this.getData();
        },
        getData() {
            // this.$http.get({
            //     url: '/rest/runtime/tasks',
            //     data: {
            //         assignee: this.userInfo.id
            //     }
            // }).then(res => {
            //     this.tableData = res.data;
            // })
            axios.post('/rest/query/tasks', {
                candidateUser: this.userInfo.id,
            }).then(res => {
                this.toClaim = res.data.data;
            })
            axios.post('/rest/query/tasks', {
                assignee: this.userInfo.id
            }).then(res => {
                this.todo = res.data.data;
            })
        },
        handle(row) {
            this.$router.push({
                name: 'CompleteTaskDynamic',
                query: {
                    id: row.id
                }
            })
            // this.$http.get({
            //     url: '/rest/form/form-data',
            //     data: {
            //         taskId: row.id
            //     }
            // }).then(res => {
            //     this.selectedTaskId = row.id;
            //     this.taskForm = res.formProperties;
            //     this.taskFormData = {};
            //     this.dialogVisible = true;
            //     setTimeout(() => {
            //         this.$refs.taskForm.clearValidate()
            //     }, 50);
            // })
        },
        claim(row) {
            axios.post(`/rest/runtime/tasks/${row.id}`, {
                action: 'claim',
                assignee: this.userInfo.id
            }).then(res => {
                this.$message.success('签收成功')
                this.getData()
            }).catch(e => {
                this.$message.error('签收失败')
            })
        },
        completeTask() {
            this.$refs.taskForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    axios.post('rest/form/form-data', {
                        taskId: this.selectedTaskId,
                        properties: this.$refs.taskForm.getData()
                    }).then(res => {
                        this.loading = false
                        this.dialogVisible = false;
                        this.$message.success('成功');
                        this.getData()
                    }).catch(e => {
                        this.loading = false
                        this.$message.error('失败');
                    })
                }
            })
        },
        toggleMultipleMode(multipleMode) {
            this.multipleMode = multipleMode;
            if (!multipleMode) {
                this.$refs.table.clearSelection();
            }
        },
        operation1() {
            this.$notify({
                title: '提示',
                message: this.selection
            });
        },
        operation2() {
            this.$message('操作2');
        }
    },
    components: {
        DynamicForm
    }
}
</script>
<style lang="less" scoped>
</style>
