<template>
    <div>
        <el-toolbar>
            <el-button icon="plus" @click="newStep">新建步骤</el-button>
            <el-button icon="plus" @click="newAction">新建动作</el-button>
            <el-button icon="plus" @click="newTransferConditions">新建转移条件</el-button>
            <el-button icon="minus" @click="removeSelected">删除选中</el-button>
            <el-button icon="setting" @click="autoArrange">自动排列</el-button>
            <el-button icon="circle-check" @click="check">检查</el-button>
            <el-button icon="setting" @click="graphicOptions">图形选项</el-button>
            <el-button icon="circle-check" @click="save">保存</el-button>
        </el-toolbar>

        <div style="padding:20px;" v-loading="dataLoading">
            <el-row :gutter="16">
                <el-col :sm="24" :lg="12" class="info-col" v-for="item in info" :key="item.id">
                    <h3 class="info-title">{{item.title}}</h3>
                    <el-table :data="item.data" style="width: 100%">
                        <el-table-column prop="item" align="right" label="项"></el-table-column>
                        <el-table-column prop="value" label="值"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>

        <el-row>
            <el-col :span="16" style="padding-left:20px">
                <div>
                    <el-input type="textarea"></el-input>
                </div>
            </el-col>
            <el-col :span="6" style="padding-left:20px">

                <div class="form-wrap">
                    <h5 class="info-title">流程属性</h5>
                    <el-form class="form-wrap" label-width="100px">
                        <el-form-item label="流程名称">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="流程类型">
                            <el-select placeholder="请选择流程类型">
                                <el-option label="审核工作流" value="ContentWorkflow"></el-option>
                                <el-option label="快速工作流" value="FastWorkflow"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="流程选项">
                            <el-checkbox-group>
                                <el-checkbox label="无需申请即处理"></el-checkbox>
                                <el-checkbox label="通知下一步处理人"></el-checkbox>
                                <el-checkbox label="允许撤销"></el-checkbox>
                                <el-checkbox label="允许驳回"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <div>
                    <h5 class="info-title"> 转移条件属性</h5>
                    <el-form label-width="100px">
                        <el-form-item label="条件名称">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="条件方法">
                            <el-select placeholder="请选择流程类型">
                                <el-option label="方法1" value="method1"></el-option>
                                <el-option label="方法2" value="method2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="条件脚本">
                            <el-input type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <div>
                    <h5 class="info-title"> 节点属性</h5>
                    <el-form label-width="100px">
                        <el-form-item label="名称">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="模式选择">
                            <el-checkbox-group>
                                <el-checkbox label="会签模式"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox-group>
                                <el-checkbox label="无需申请即处理"></el-checkbox>
                                <el-checkbox label="通知下一步处理人"></el-checkbox>
                                <el-checkbox label="允许撤销"></el-checkbox>
                                <el-checkbox label="允许驳回"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="权限">
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-select placeholder="请选择部门">
                            </el-select>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select placeholder="请选择角色">
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户">
                            <el-select placeholder="请选择用户">
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>

                <div>
                    <h5 class="info-title"> 节点动作</h5>
                    <el-form label-width="100px">
                        <el-form-item label="前置脚本">
                            <el-input type="textarea"></el-input>
                        </el-form-item>
                        <el-form-item label="前置方法">
                            <el-select placeholder="请选择方法">
                                <el-option label="方法1" value="method1"></el-option>
                                <el-option label="方法2" value="method2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="后置脚本">
                            <el-input type="textarea"></el-input>
                        </el-form-item>
                        <el-form-item label="后置方法">
                            <el-select placeholder="请选择方法">
                                <el-option label="方法1" value="method1"></el-option>
                                <el-option label="方法2" value="method2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.page-wrap {
    margin-top: 20px;
}

.page-wrap .page {
    float: right;
}

.items-dialog-wrap {
    margin-left: -20px;
    margin-right: -20px;
}

.form-wrap{
    border: 2px;
}
</style>

<script>
export default {
  data() {

  },
  methods: {

  }
}
</script>
