<template>
    <div>
        <div class="filters-container"></div>
        <el-table :data="tableData" :height="tableHeight" row-key="id" ref="table" v-loading="$store.state.fetchingData">
            <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="description" label="描述">
            </el-table-column>
            <el-table-column prop="version" label="版本" align="center">
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="{row}">
                    <el-tag size="mini" type="info" v-if="row.suspended">已挂起</el-tag>
                    <el-tag size="mini" type="success" v-else>已激活</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="{row}">
                    <el-button @click="changeState(row, true)" type="primary" size="mini" plain v-if="row.suspended">激活
                    </el-button>
                    <el-button @click="changeState(row, false)" type="warning" size="mini" plain v-else>挂起</el-button>
                    <el-button @click="deleteDeployment(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>
    </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,
            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: '/rest/repository/process-definitions',
                data: data
            }).then(res => {
                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');
        },
        changeState(row, state) {
            this.$alert(`确认${state ? '激活' : '挂起'}？`, '警告', { type: 'warning' }).then(() => {
                return axios.put(`/rest/repository/process-definitions/${row.id}`, {
                    action: state ? 'activate' : 'suspend',
                    includeProcessInstances: false
                })
            }).then(() => {
                this.$message.success("操作成功");
                this.getData();
            }).catch(res => {
                if (res === 'cancel') {

                } else {
                    this.$message.error("操作失败");
                }
            })
        },
        deleteDeployment(row) {
            this.$alert('确认删除？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/activiti/process/deleteDeployment',
                    data: {
                        deploymentId: row.deploymentId
                    }
                })
            }).then((res) => {
                if (res.success) {
                    this.$message.success("删除成功");
                    this.getData();
                } else {
                    this.$message.error("删除失败");
                }
            }).catch(() => {
                this.$message.error("删除失败");
            })
        }
    }
}
</script>
<style lang="less" scoped>
</style>
