<template>
    <div>
        <div class="filters-container">
            <el-input placeholder="输入关键字" size="small" v-model="name" clearable class="filter-item"></el-input>
            <el-button @click="getData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
            </el-button>
            <el-button @click="showCreateModelDialog" type="primary" size="small" icon="el-icon-edit"
                       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="newModel" ref="newModelForm" label-position="top" size="small">
                <el-form-item label="名称" prop="name" :rules="[{required: true, message: '请填写名称', trigger: 'blur'}]">
                    <el-input v-model="newModel.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description"
                              :rules="[{required: true, message: '请填写描述', trigger: 'blur'}]">
                    <el-input v-model="newModel.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click="createModel" :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: [],
                name: '',
                multipleMode: false,
                dialogVisible: false,
                newModel: {
                    name: '',
                    description: ''
                },
                loading: false
            }
        },
        computed: {
            ...mapState(['tableHeight']),
            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() {
                var data = {};
                if (this.name) {
                    data.name = this.name;
                }
                this.$http.get({
                    url: '/activiti/processList',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.totalNumber = res.data.length;
                        let i = this.currentPage - 1;
                        this.tableData = res.data.splice((i < 0 ? 0 : i) * this.pageSize, this.pageSize);
                    }
                })
            },
            toggleMultipleMode(multipleMode) {
                this.multipleMode = multipleMode;
                if (!multipleMode) {
                    this.$refs.table.clearSelection();
                }
            },
            editRow(row) {
                window.open(`${this.$baseUrl}/modeler.html?modelId=${row.id}`);
            },
            operation1() {
                this.$notify({
                    title: '提示',
                    message: this.selection
                });
            },
            operation2() {
                this.$message('操作2');
            },
            showCreateModelDialog() {
                this.newModel = {
                    name: '',
                    description: ''
                };
                this.dialogVisible = true;
            },
            createModel() {
                this.$refs.newModelForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http.get({
                            url: '/activiti/createModel',
                            data: this.newModel
                        }).then(res => {
                            this.loading = false;
                            if (res.success) {
                                this.dialogVisible = false;
                                this.$message.success('创建成功');
                                this.getData();
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            },
            publishModel(row) {
                this.$http.get({
                    url: '/activiti/publishModel',
                    data: {
                        id: row.id
                    }
                }).then(res => {
                    if (res.success) {
                        this.$message.success('发布成功');
                    }
                })
            },
            deleteModel(row) {
                this.$alert('确认删除？', '警告', {type: 'error'}).then(() => {
                    return axios.delete(`/rest/repository/models/${row.id}`)
                }).then(() => {
                    this.$message.success("删除成功");
                    this.getData();
                }).catch(() => {
                    if (res === 'cancel') {

                    } else {
                        this.$message.error("删除失败");
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>

</style>
