<template>
    <el-container>
        <el-main>
            <!--检索条件-->
            <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                <el-col :span="6">
                    <el-input v-model="queryinfo.name" placeholder="名称" style="width: 200px" clearable>
                        <template slot="prepend">名称</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="queryinfo.key" placeholder="部署关键字" style="width: 200px" clearable>
                        <template slot="prepend">部署关键字</template>
                    </el-input>
                </el-col>

                <el-col :span="8">
                    <el-button type="primary" v-on:click="getList">查询</el-button>
<!--                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
                </el-col>
            </el-row>
            <el-row>
                <el-table
                        v-loading="tableloading"
                        :data="tableData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="right" label-width="120px" style="text-align: left">
                                <el-row>
                                        <el-form-item label="id：">
                                            <span>{{ props.row.id}}</span>
                                        </el-form-item>
                                </el-row>
                                <el-row>
                                        <el-form-item label="关联部署id：">
                                            <span>{{ props.row.deploymentId}}</span>
                                        </el-form-item>
                                </el-row>
                                <el-row>
                                        <el-form-item label="类别：">
                                            <span>{{ props.row.category}}</span>
                                        </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-form-item label="租户：">
                                        <span>{{ props.row.tenantId}}</span>
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                        <el-form-item label="定义流程xml：">
                                            <span>{{ props.row.resourceName}}</span>
                                        </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-form-item label="定义图像：">
                                        <span>{{ props.row.diagramResourceName}}</span>
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                        <el-form-item label="根据form启动：">
                                            <span>{{ props.row.hasStartFormKey}}</span>
                                        </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-form-item label="修订版本：">
                                        <span>{{ props.row.revision}}</span>
                                    </el-form-item>
                                </el-row>
<!--                                <el-row>-->
<!--                                    <el-form-item label="瞬时变量：">-->
<!--                                        <span>{{ JSON.stringify(props.row.transientVariables) }}</span>-->
<!--                                    </el-form-item>-->
<!--                                </el-row>-->
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="名称"
                            prop="name"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            label="描述"
                            prop="description"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            label="关键字"
                            prop="key">
                    </el-table-column>
                    <el-table-column
                            label="版本"
                            prop="version">
                    </el-table-column>
                    <el-table-column
                            label="已升级"
                            prop="isUpdated">
                    </el-table-column>
                    <el-table-column
                            label="删除状态"
                            prop="isDeleted">
<!--                        <template slot-scope="scope">-->
<!--                            <span  v-if="scope.row.suspensionState ==='1'">活跃</span>-->
<!--                            <span  v-if="scope.row.suspensionState ==='2'">中断</span>-->
<!--                        </template>-->
                    </el-table-column>
                </el-table>
            </el-row>
            <!--分页模块-->
            <el-row style="float: right;margin-top: 20px">
                <el-col>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryinfo.pageNum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="queryinfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {definitions} from "../../api/technological";

    export default {
        name: "definition",
        data() {
            return {
                queryinfo:{
                    name:'',
                    key:'',
                    pageNum:1,
                    pageSize:10,
                },
                total:0,
                tableData: [],
                tableloading:false,
            }
        },
        mounted() {
            this.getList();
        },
        methods:{
            handleSizeChange(val) {
                this.queryinfo.pageSize= val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryinfo.pageNum  = val
                this.getList()
            },
            getList() {
                const _this = this
                this.tableloading = true;
                definitions(this.queryinfo).then((response) => {
                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data;
                    // 获取列表的总记录数

                    _this.total = res.total
                    this.tableloading = false;
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {

                    // 关闭加载
                    _this.$message.error(error.toString())
                    this.tableloading = false;

                })
            },
        }
    }
</script>

<style scoped>
</style>