<template>
    <div>
        <div class="filters-container">
            <el-select class="filter-item" v-model="selectedProcessDefinitionId" size="small">
                <el-option v-for="item in processDefinitions" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
            <el-button @click="startProcess" type="primary" size="small" class="filter-item">发起
            </el-button>
        </div>
        <el-table :data="tableData" :height="tableHeight" 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="processDefinitionName" label="名称">
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="{row}">
                    <el-tag size="mini" type="info" v-if="row.endTime">已完成</el-tag>
                    <el-tag size="mini" type="success" v-else>运行中</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="创建时间" :formatter="datetimeFormatter">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" :formatter="datetimeFormatter">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="view(row)" type="primary" size="mini" plain>查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
            <el-pagination background @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNumber">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="发起流程">
            <dynamic-form ref="startForm" :formProps="startForm" v-model="startFormModel"></dynamic-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click="confirmStartProcess" :loading="loading" size="small">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import DynamicForm from '../components/DynamicForm'
import axios from 'axios'

export default {
    created() {
        this.getData();
    },
    data() {
        return {
            totalNumber: 0,
            totalPage: 0,
            currentPage: 1,
            pageSize: 20,
            tableData: [],
            multipleMode: false,
            loading: false,
            processDefinitions: [],
            selectedProcessDefinitionId: '',
            dialogVisible: false,
            startForm: [],
            startFormModel: {},
        }
    },
    computed: {
        ...mapState(['tableHeight', '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/repository/process-definitions',
                data: {
                    suspended: false
                }
            }).then(res => {
                this.processDefinitions = res.data;
            });
            this.$http.get({
                url: `/activiti/process/history`,
                data: {
                }
            }).then(res => {
                this.tableData = res.data;
            })
        },
        startProcess() {
            this.loading = true
            this.$http.get({
                url: '/rest/form/form-data',
                data: {
                    processDefinitionId: this.selectedProcessDefinitionId
                }
            }).then(res => {
                this.loading = false
                this.startForm = res.formProperties;
                this.startFormModel = {};
                this.dialogVisible = true;
                setTimeout(() => {
                    this.$refs.startForm.clearValidate()
                }, 50);
            })
        },
        confirmStartProcess() {
            this.$refs.startForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    axios.post('/rest/form/form-data', {
                        processDefinitionId: this.selectedProcessDefinitionId,
                        businessKey: null,
                        properties: this.$refs.startForm.getData()
                    }).then(res => {                    this.loading = false
                        this.dialogVisible = false;
                        this.$message.success('成功');
                        this.getData()
                    }).catch(e => {
                        this.loading = false
                        this.$message.error('失败');
                    })
                }
            })
        },
        view(row) {
            window.open(this.$baseUrl + `/diagram-viewer/index.html?processDefinitionId=${row.processDefinitionId}&processInstanceId=${row.processInstanceId}`);
        }
    },
    components: {
        DynamicForm
    }
}
</script>
<style lang="less" scoped>
</style>
