<template>
    <div class="container">
        <div class="mod-role" style="height:100%;overflow:auto;">
            <el-form :inline="true" @submit.native.prevent @keyup.enter.native="loadProcessDefList(1)" style="margin:20px 0px 0px 10px">
                <el-form-item>
                    <el-input v-model="form.searchKey" placeholder="流程定义key" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="search" @click="loadProcessDefList(1)">查询</el-button>
                    <!-- <el-button icon="el-icon-search" type="search" @click="loadProcessDefList(1)">流程导入</el-button> -->
                    <!-- <el-button icon="el-icon-upload2" type="primary" @click="doImport()">导入</el-button> -->
                </el-form-item>
            </el-form>
            <el-table  @selection-change="handleSelectionChange" :data="list" border v-loading="loading">
                <el-table-column align="center" prop="key" label="流程定义key"></el-table-column>
                <el-table-column align="center" prop="name" label="流程名称"></el-table-column>

                <el-table-column align="center" prop="deploymentTime" :formatter="$util.YYMM" label="部署时间"></el-table-column>
                <el-table-column align="center" prop="diagramResourceName" label="资源名称"></el-table-column>

                <el-table-column align="center" prop="version" label="版本" width="55"></el-table-column>
                <el-table-column align="center" prop="deploymentId" label="部署ID"></el-table-column>
                <el-table-column align="center" prop="id" label="流程定义ID"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" width="250">
                    <template slot-scope="scope">
                        <!-- <el-button @click="doStart(scope)" type="text" size="small">启动</el-button> -->
                        <el-button @click="doView(scope)" type="text" size="small">查看流程图</el-button>
                        <el-button @click="doDistribution(scope.row)" type="text" size="small">分配权限</el-button>
                        <el-button @click="doEexport(scope.row)" type="text" size="small">流程导出</el-button>
                        <!-- <el-button @click="doCopy(scope)" type="text" size="small"></el-button> -->
                        <!-- <el-button @click="doDesign(scope)" type="text" size="small">待办</el-button>
            <el-button @click="doDeploy(scope)" type="text" size="small">跳转</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin:10px 10px 0px 10px;float:right" @current-change="loadProcessDefList"  :page-size="form.rows" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>

            <so-distribution v-if="soDistributionVisible" ref="soDistribution"  ></so-distribution>
            <el-dialog title="查看" v-if="editFormVisible" :visible.sync="editFormVisible" width="80%" style="text-align:center"  append-to-body>
                <div>
                    <img :src="viewImg" alt />
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editFormVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
// import UserOpenDialog from '@/page/components/userOpenDialog'
import WfActivitySelect from './wfActivitySelect'
import SoDistribution from './doDistribution'
export default {
    data() {
        return {
            multipleSelection: [],
            loading:false,
            editFormVisible: false,
            soDistributionVisible: false,
            checkededRows: [],
            list: null,
            viewImg: null,
            processDefinationlist: [{}, {}],
            startDateRange: null,
            total: 0,
            form: {
                page: 1,
                rows: 10,
                searchKey: ''
            },
            importFormVisible: false
        }
    },
    components: {
        SoDistribution,
        WfActivitySelect,
    },
    mounted() {
        this.loadProcessDefList(1)
    },
    methods: {
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        onGotoDialogSelect(){

        },
        loadProcessDefList(value) {
            this.importFormVisible = false
            let self = this
            this.form.page = value
            console.log(this.form)
            var obj = {
                url: this.$url.processinst.getList,
                data: this.form,
                type: 'post'
            }
            this.common.httpPost(obj, success)
            function success(data) {
                self.list = data.data.rows
                self.total = data.data.total
            }
            // tapp.services.wf_Model.getMadelList().then(function(result) {
            //   self.processDefinationlist = result;
            // })
        },
        onStartDateRangeChanged(val) {
            this.form.startDateBegin = val[0]
            this.form.startDateEnd = val[1]
        },
        //  流程导出
        doEexport(row) {
            console.log(`${this.$url.processinst.getExportFile}/${row.id}`)
            window.location.href = `${this.$url.processinst.getExportFile}/${row.id}`
        },
        doTask(key, row) {
            if (row.taskAssignee != null && row.taskAssignee.length > 0) {
                //办理
                this.$router.push({
                    path: row.taskFormUrl
                })
                return
            } else if (row.taskCandidate != null && row.taskCandidate.length > 0) {
            } else {
            }
        },

        doDistribution(row) {
            this.soDistributionVisible = true
            this.$nextTick(() => {
                this.$refs.soDistribution.init(row.key, row.id)
            })
        },

        doView(scope) {
            this.editFormVisible = true
            let row = scope.row
            let self = this
            this.viewImg = this.$url.processinst.view + '?resourceType=png&processDefinitionId=' + row.id
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table td, .el-table th{
    padding: 3px 0px;
}
</style>