<template>
    <el-container>
        <el-main>
            <el-row>
                <el-tabs type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="执行中">
                        <!--检索条件-->
                        <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                            <el-col :span="6">
                                <el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
                                    <template slot="prepend">实例ID</template>
                                </el-input>
                            </el-col>
                            <el-col :span="7">
                                <el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
                                    <template slot="prepend">实例关键字</template>
                                </el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" v-on:click="getList">查询</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.variableCount}}</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-row>
                                                <el-form-item label="流程定义ID：">
                                                    <span>{{ props.row.processDefinitionId}}</span>
                                                </el-form-item>
                                            </el-row>
                                            <el-row>
                                                <el-form-item label="流程实例ID：">
                                                    <span>{{ props.row.processInstanceId}}</span>
                                                </el-form-item>
                                            </el-row>
                                            <el-row>
                                                <el-form-item label="流程定义版本：">
                                                    <span>{{ props.row.processDefinitionVersion}}</span>
                                                </el-form-item>
                                            </el-row>
                                        </el-form>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed="left"
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
                                        <el-button type="warning" size="mini" @click="jobsCancel(scope.$index,scope.row)">停&nbsp;&nbsp;止</el-button>
                                        <!--                            <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
                                        <!--                            <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="实例名称"
                                        prop="name"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        label="发起人"
                                        prop="startUserId"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        label="开始时间"
                                        prop="startTime"
                                        width="160">
                                </el-table-column>
<!--                                <el-table-column-->
<!--                                        label="结束时间"-->
<!--                                        prop="endTime"-->
<!--                                        width="160">-->
<!--                                </el-table-column>-->
                                <el-table-column
                                        label="执行中"
                                        prop="isActive">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.isActive ===true">是</span>
                                        <span  v-else>否</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="是否结束"
                                        prop="isEnded">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.isEnded ===true">是</span>
                                        <span  v-else>否</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="流程状态"
                                        prop="suspensionState">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.suspensionState ===1">活跃</span>
                                        <span  v-else>中断</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="实例关键字"
                                        prop="processDefinitionKey">
                                </el-table-column>
<!--                                <el-table-column-->
<!--                                        label="用时"-->
<!--                                        prop="durationInMillis">-->
<!--                                    <template slot-scope="scope">-->
<!--                                       <span>-->
<!--                                        {{ scope.row.durationInMillis | formatSeconds }}-->
<!--                                    </span>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
                                <el-table-column
                                        label="流程定义名称"
                                        prop="processDefinitionName"
                                        width="140">
                                </el-table-column>
                                <el-table-column
                                        label="isDeleted"
                                        prop="isDeleted">
                                </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-tab-pane>
                    <el-tab-pane label="已完成">
                        <!--检索条件-->
                        <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                            <el-col :span="6">
                                <el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
                                    <template slot="prepend">实例ID</template>
                                </el-input>
                            </el-col>
                            <el-col :span="7">
                                <el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
                                    <template slot="prepend">实例关键字</template>
                                </el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" v-on:click="getHistroyList">查询</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.variableCount}}</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-row>
                                                <el-form-item label="流程定义ID：">
                                                    <span>{{ props.row.processDefinitionId}}</span>
                                                </el-form-item>
                                            </el-row>
                                            <el-row>
                                                <el-form-item label="流程实例ID：">
                                                    <span>{{ props.row.processInstanceId}}</span>
                                                </el-form-item>
                                            </el-row>
                                            <el-row>
                                                <el-form-item label="流程定义版本：">
                                                    <span>{{ props.row.processDefinitionVersion}}</span>
                                                </el-form-item>
                                            </el-row>
                                        </el-form>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed="left"
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
                                        <!--                            <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
                                        <!--                            <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="实例名称"
                                        prop="name"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        label="发起人"
                                        prop="startUserId"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        label="开始时间"
                                        prop="startTime"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        label="结束时间"
                                        prop="endTime"
                                        width="160">
                                </el-table-column>
                                <el-table-column
                                        label="执行中"
                                        prop="isActive">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.isActive ===true">是</span>
                                        <span  v-else>否</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="是否结束"
                                        prop="isEnded">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.isEnded ===true">是</span>
                                        <span  v-else>否</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="流程状态"
                                        prop="suspensionState">
                                    <template slot-scope="scope">
                                        <span  v-if="scope.row.suspensionState ===1">活跃</span>
                                        <span  v-else>中断</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="实例关键字"
                                        prop="processDefinitionKey">
                                </el-table-column>
                                <el-table-column
                                        prop="durationInMillis"
                                        label="用时"
                                        width="140">
                                    <template slot-scope="scope">
                                       <span>
                                        {{ scope.row.durationInMillis | formatSeconds }}
                                    </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="流程定义名称"
                                        prop="processDefinitionName"
                                        width="140">
                                </el-table-column>
                                <el-table-column
                                        label="isDeleted"
                                        prop="isDeleted">
                                </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-tab-pane>

                </el-tabs>
            </el-row>
<!--            流程图弹框-->
            <el-row>
                <el-dialog title="流程图" :visible.sync="dialogFormVisible" v-loading="dialogloading">
                    <el-form :model="form">
                        <el-form-item>
                            <div class="demo-image__preview">
                                <el-image

                                        :src="form.url">
                                </el-image>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {instanceList,processDiagram,histroyList,jobsCancelApi} from "../../api/technological";

    export default {
        name: "example",
        data(){
            return{
                queryinfo: {
                    processInstanceId:'',
                    processDefinitionKey:'',
                    pageNum:1,
                    pageSize:10,
                },
                total:0,
                tableData: [],
                tableloading:false,
                dialogloading:false,
                dialogFormVisible: false,
                form: {
                    url: ''
                }
            }
        },
        filters: {
            formatSeconds(value) {
                console.log(value)
                let result = parseInt(value);

                let y =
                    Math.floor(result / 86400000) < 10
                        ? "0" + Math.floor(result / 86400000)
                        : Math.floor(result / 86400000);

                let h =
                    Math.floor((result / 3600000) % 24) < 10
                        ? "0" + Math.floor((result / 3600000) % 24)
                        : Math.floor((result / 3600000) % 24);

                let m =
                    Math.floor((result / 60000) % 60) < 10
                        ? "0" + Math.floor((result / 60000) % 60)
                        : Math.floor((result / 60000) % 60);

                let s =
                    Math.floor(result % 60) < 10
                        ? "0" + Math.floor(result % 60)
                        : Math.floor(result % 60);

                let res = "";
                if (y !== "00") res += `${y}天`;

                if (h !== "00") res += `${h}时`;

                if (m !== "00") res += `${m}分`;

                res += `${s}秒`;

                return res;
            },
        },
        mounted() {
            this.getList();
        },
        methods: {
            jobsCancel(index,row){
                let _this = this
                let para = {
                    processInstanceId: row.processInstanceId,
                    reason: "工单作废"
                }
                jobsCancelApi(para).then(response =>{
                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('作废失败！')
                    }
                    _this.$message.success('作废成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            handleClick(tab){
                if (tab.index == 0) {
                    this.getList();
                } else {
                    this.getHistroyList();
                }
            },
// 分页
            handleSizeChange(val) {
                this.queryinfo.pageSize= val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryinfo.pageNum  = val
                this.getList()
            },
            getList() {
                const _this = this
                this.tableloading = true;
                instanceList(this.queryinfo).then((response) => {
                    console.log(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;
                })
            },
            getHistroyList() {
                const _this = this
                this.tableloading = true;
                histroyList(this.queryinfo).then((response) => {
                    console.log(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;

                })
            },
            // 打开流程图
            chart(index, row) {
                this.dialogFormVisible = true
                this.dialogloading = true;
                processDiagram({processId:row.processInstanceId}).then(res =>{
                    // eslint-disable-next-line no-console
                        this.form.url=window.URL.createObjectURL(res.data);
                    this.dialogloading = false;
                });
            },
        },

    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>