<template>
    <div>
        <div class="filters-container">
            <el-select class="filter-item" v-model="selectedDeploymentId" 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="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                :formatter="datetimeFormatter">
            </el-table-column>
            <el-table-column
                prop="lastUpdateTime"
                label="更新时间"
                :formatter="datetimeFormatter">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="300">
                <template slot-scope="{row}">
                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
                    <el-button @click="publishModel(row)" type="success" size="mini" plain>发布</el-button>
                    <el-button @click="editRow(row)" size="mini" plain>导出</el-button>
                    <el-button @click="deleteModel(row)" type="danger" 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="发起流程">
            <el-form :model="startFormModel" ref="startForm" label-position="top" size="small" :rules="rules">
                <el-form-item
                    v-for="item in startForm"
                    :prop="item.id"
                    :label="item.name"
                    :key="item.id">
                    <el-input v-if="item.type === 'string'" v-model="startFormModel[item.id]"></el-input>
                    <el-select
                        v-else-if="item.type === 'enum'"
                        v-model="startFormModel[item.id]">
                        <el-option
                            v-for="option in item.enumValues"
                            :label="option.name"
                            :value="option.id">
                        </el-option>
                    </el-select>
                    <el-date-picker
                        v-else-if="item.type === 'date'"
                        v-model="startFormModel[item.id]"
                        type="datetime"
                        :format="item.datePattern"
                        :value-format="item.datePattern">
                    </el-date-picker>
                    <el-switch
                        v-else-if="item.type === 'boolean'"
                        v-model="startFormModel[item.id]">
                    </el-switch>
                </el-form-item>
            </el-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 axios from 'axios'

    export default {
        created() {
            this.getData();
        },
        data() {
            return {
                totalNumber: 0,
                totalPage: 0,
                currentPage: 1,
                pageSize: 20,
                tableData: [],
                multipleMode: false,
                loading: false,
                processDefinitions: [],
                selectedDeploymentId: '',
                dialogVisible: false,
                startForm: [],
                startFormModel: {},
                enumValues: {}
            }
        },
        computed: {
            ...mapState(['tableHeight']),
            selection() {
                return this.$refs.table.selection.map(i => i.id);
            },
            rules() {
                let rules = {};
                this.startForm.forEach(item => {
                    rules[item.id] = [{required: true, message: `请填写${item.name}`, trigger: 'blur'}]
                });
                return rules;
            }
        },
        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;
                })
            },
            startProcess() {
                this.$http.get({
                    url: '/rest/form/form-data',
                    data: {
                        processDefinitionId: this.selectedDeploymentId
                    }
                }).then(res => {
                    this.startForm = res.formProperties;
                    this.startFormModel = {};
                    this.dialogVisible = true;
                })
            },
            confirmStartProcess() {
                this.$refs.startForm.validate(valid => {
                    if (valid) {
                        this.$http.post({
                            url: '/activiti/startProcess',
                            data: this.startFormModel
                        }).then(res => {
                            if (res.success) {
                                this.dialogVisible = false;
                                this.$message.success('成功');
                            }
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>

</style>
