<template>
  <div id="icore-flow-chart-componets">
    <div ref="hiddenArea" style="height: 100%;width: 100%;position: absolute;z-index: 9999;top: 0;display: none;"
        @mouseup="mouseupSet($event)"
        @mousemove="mousemoveSet($event)"
        @mouseleave="mouseleaveSet($event)">
        <div ref="setPos" :style="setPos" style="position: absolute;z-index:999;">
        </div>
    </div>
    <div class="operating" v-if="design !== 'show'">
        <div class="btn-group">
            <div class="btn" @click="changeMode('edit')" title="编辑模式">
                <i class="el-icon-edit"></i>
            </div>
            <div class="btn" @click="changeMode('drag')" title="拖拽模式">
                <i class="el-icon-rank"></i>
            </div>
        </div>
        <div class="btn-group">
            <div class="btn" @click="del" style="margin-top: 5px;" title="删除">
                <i class="el-icon-delete"></i>
            </div>
            <!-- <div class="btn" @click="save" title="保存">
                <i class="el-icon-document"></i>
            </div> -->
        </div>
    </div>
    <div class="modeldata" v-if="design !== 'show'">
        <div class="charts-title">
            <span>选择工具</span>
        </div>
        <!-- <div style="width: 70px;height: 24px;border-radius: 5px; background: #409eff; color: white; margin: 20px 0px 10px 5px; text-align: center;">选择模板</div> -->
        <div class="charts-content">
            <el-row><div style="width: 65px; height: 24px;border-radius: 5px; background: #409eff; color: white; margin: 20px 0px 0px 5px; text-align: center;">事件节点</div></el-row>
            <el-row>
                <el-col :span="24">
                    <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="_circle dragItem"><img class="_circle" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/start.png" title="开始"/>开始</div>
                    </div>
                </el-col>
                <el-col :span="24">
                     <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="_end-circle dragItem"><img class="_end-circle" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/end.png" title="结束"/>结束</div>
                    </div>
                </el-col>
            </el-row>
            <el-row><div style="width: 65px; height: 24px;border-radius: 5px; background: #409eff; color: white; margin: 10px 0px 0px 5px; text-align: center;">活动节点</div></el-row>
            <el-row>
                <el-col :span="24">
                    <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="approver dragItem"><img class="approver" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/user.png" title="审批人"/>审批人</div>
                    </div>
                </el-col>
            </el-row>
            <el-row><div style="width: 65px; height: 24px;border-radius: 5px; background: #409eff; color: white; margin: 10px 0px 0px 5px; text-align: center;">网关节点</div></el-row>
            <el-row>
                <el-col :span="24">
                    <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="exclusiveGateway dragItem"><img class="exclusiveGateway" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/eclGateway.png" title="排他网关"/>排他网关</div>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="parallelGateway dragItem"><img class="parallelGateway" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/pllGateway.png" title="并行网关"/>并行网关</div>
                    </div>
                </el-col>
            </el-row>
            <el-row><div style="width: 65px; height: 24px;border-radius: 5px; background: #409eff; color: white; margin: 10px 0px 0px 5px; text-align: center;">其他&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></el-row>
            <el-row>
                <el-col :span="24">
                    <div class="dragEvent" @mousedown="mousedownSet($event)" style="margin-left: 5px;">
                        <div class="item dragItem"><img class="item" style="width: 14px;height: 14px; vertical-align: text-top; margin-right: 5px;" src="../../../assets/img/gateway/item.png" title="子流程"/>子流程</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="charts-info" v-if="design !== 'show'">
      <div class="charts-title">
        <span>{{infoTitle}}属性</span>
      </div>
      <div class="charts-content">
        <el-checkbox v-if="isBlank === true" v-model="checked">网格对齐</el-checkbox>
        <el-form v-else label-position="left" label-width="68px" :model="form" ref="nodeForm" :rules="itemRules" show-message :inline-message="true" style="height: calc(100% - 40px)">
            <el-checkbox
                v-if="form.type == '审批人'"
                v-model="form.isCount"
                style="margin-bottom: 5px;"
                :disabled="design === 'show'"
            >是否会签任务
            </el-checkbox>
            <el-form-item
                prop="id"
                label="ID"
            >
                <el-input
                    v-model="form.id"
                    :disabled="true"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="name"
                label="名称"
            >
                <el-input
                    v-model="form.name"
                    :disabled="design === 'show'"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="model"
                label="Model"
                v-if="false"
            >
                <el-input
                    v-model="form.model"
                    :disabled="true"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="type"
                :label="form.model === 'node' ? '节点类型' : '连接线类型'"
            >
                <el-input
                    v-model="form.type"
                    :disabled="true"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="rules"
                label="条件"
                v-if="form.model === 'edge'"
            >
                <el-input
                    v-model="form.rules"
                    :disabled="design === 'show'"
                    size="small"
                    type="textarea"
                    :rows="4"
                ></el-input>
            </el-form-item>
            <!-- <el-form-item prop="time" label="审核时长" v-if="form.model === 'task' && form.model !== 'line'">
                <el-input v-model="form.time" size="small" placeholder="单位：小时"></el-input>
            </el-form-item> -->
            <el-form-item
                prop="mulInsType"
                label="会签类型"
                v-if="form.type == '审批人' && form.isCount"
            >
                <el-select
                    v-model="form.mulInsType"
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                >
                    <el-option
                        v-for="item in mulInsTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                prop="variableUser"
                label="审批人员"
                v-if="form.type == '审批人' && form.isCount"
            >
                <el-input
                    v-model="form.variableUser"
                    placeholder="请输入审批人参数"
                    :disabled="design === 'show'"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="collection"
                label="会签人员"
                v-if="form.type == '审批人' && form.isCount"
            >
                <el-input
                    v-model="form.collection"
                    placeholder="请输入会签人员参数"
                    :disabled="design === 'show'"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="completeCondition"
                label="结束条件"
                v-if="form.type == '审批人' && form.isCount"
            >
                <el-input
                    v-model="form.completeCondition"
                    placeholder="请输入结束条件"
                    :disabled="design === 'show'"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="group"
                label="审批职务"
                v-if="form.type == '审批人' && !form.isCount"
                v-show="isgroupDuty"
            >
                <el-select
                    v-model="form.group"
                    filterable
                    allow-create
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                >
                    <el-option
                        v-for="item in dutyList"
                        :key="item.id"
                        :label="item.dutyName ? item.dutyName : form.group"
                        :value="item.dutyId ? item.dutyId : form.group"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                prop="group"
                label="审批角色"
                v-if="form.type == '审批人' && !form.isCount"
                v-show="isgroup"
            >
                <el-select
                    v-model="form.group"
                    filterable
                    allow-create
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.roleName ? item.roleName : form.group"
                        :value="item.roleId ? item.roleId : form.group"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                prop="user"
                label="审批用户"
                v-if="form.type == '审批人' && !form.isCount"
            >
                <el-select
                    v-model="form.user"
                    filterable
                    allow-create
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                    @change="selectChange"
                >
                    <el-option
                        v-if="form.group === ''"
                        v-for="item in userList"
                        :key="item.id"
                        :label="item.userName ? item.userName : form.user"
                        :value="item.userId ? item.userId : form.user"
                    >
                    </el-option>
                    <el-option
                        v-else
                        v-for="item in []"
                        :key="item.id"
                        :label="item.userName ? item.userName : form.user"
                        :value="item.userId ? item.userId : form.user"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-button v-if="form.type == '审批人'" size="mini" plain style="color: rgb(64, 158, 255);margin-bottom: 10px;" @click="addWatchTask" :loading="addTaskLoading">新增监听任务</el-button>
            <el-form-item
                v-if="form.type == '审批人' && form.watchTaskParams.length > 0"
                v-for="(task, index) in form.watchTaskParams"
                :key="index"
                :label="'监听任务' + (index + 1)">
                <el-col :span="16" style="margin-bottom: 10px;">
                    <el-form-item
                        label-width="0"
                        :prop="'watchTaskParams.' + index + '.taskEvent'"
                        :rules="{
                          required: true, message: '监听事件不能为空', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="task.taskEvent"
                            filterable
                            placeholder="监听事件"
                            size="small"
                            clearable
                            @change="selectChange"
                            :disabled="design === 'show'"
                        >
                            <el-option
                                v-for="(item, index) in taskEventList"
                                :key="index"
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button size="mini" type="danger" plain @click="removeWatchTask(task)" style="padding: 6px 11px;margin-left: 5px;" :loading="removeTaskLoading">删除</el-button>
                </el-col>
                <el-col :span="24">
                    <el-form-item
                        label-width="0"
                        :prop="'watchTaskParams.' + index + '.taskClass'"
                        :rules="{
                        required: true, message: '任务监听器不能为空', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="task.taskClass"
                            filterable
                            allow-create
                            placeholder="任务监听器"
                            size="small"
                            clearable
                            @change="selectChange"
                            :disabled="design === 'show'"
                        >
                            <el-option
                                v-for="(item, index) in taskClassList"
                                :key="index"
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <!-- 单个监听任务 -->
            <!-- <el-form-item
                prop="taskEvent"
                label="监听事件"
                v-if="form.type == '审批人'"
            >
                <el-select
                    v-model="form.taskEvent"
                    filterable
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                >
                    <el-option
                        v-for="(item, index) in taskEventList"
                        :key="index"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                prop="taskClass"
                label="任务监听器"
                v-if="form.type == '审批人'"
            >
                <el-select
                    v-model="form.taskClass"
                    filterable
                    allow-create
                    placeholder="请选择"
                    size="small"
                    clearable
                    :disabled="design === 'show'"
                >
                    <el-option
                        v-for="(item, index) in taskClassList"
                        :key="index"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-row :gutter="3">
                <el-col :span="18">
                    <el-form-item
                        prop="itemName"
                        label="选择流程"
                        v-if="form.type === '子流程'"
                    >
                        <el-select
                            v-model="form.itemName"
                            filterable
                            clearable
                            placeholder="请选择已有流程"
                            size="small"
                            :disabled="design === 'show'"
                            @change="selectChange"
                        >
                            <el-option
                                v-for="item in processList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.key"
                            >
                                <span style="float: left">{{ item.name }}</span>
                                <span style="padding-left: 30px; float: right; color: #8492a6; font-size: 12px">v{{ item.version }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        style="text-align:center; margin-left: 0px;"
                        label-width="0px"
                        class="itemBtn"
                        v-if="form.type === '子流程'"
                    >
                        <el-button
                            type="primary"
                            plain
                            size="mini"
                            :disabled="design === 'show' && (!form.itemName || form.itemName === '')"
                            @click="childProcessAdd()"
                        >{{title}}</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item
                prop="from"
                label="From"
                v-if="form.model === 'edge'"
            >
                <el-input
                    v-model="form.from"
                    :disabled="true"
                    size="small"
                ></el-input>
            </el-form-item>
            <el-form-item
                prop="to"
                label="To"
                v-if="form.model === 'edge'"
            >
                <el-input
                    v-model="form.to"
                    :disabled="true"
                    size="small"
                ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="字体样式" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                <el-select
                    v-model="form.fontFamily"
                    filterable
                    placeholder="请选择字体样式"
                    size="small"
                    :disabled="design === 'show'">
                    <el-option
                        v-for="item in fontFamilyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字体大小" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                <el-select
                    v-model="form.fontSize"
                    filterable
                    placeholder="请选择字体大小"
                    size="small"
                    :disabled="design === 'show'">
                    <el-option
                        v-for="item in fontSizeList"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                <el-color-picker v-model="form.color" :disabled="design === 'show'"></el-color-picker>
            </el-form-item> -->
            <el-collapse style="margin-bottom: 15px" v-if="form.type == '子流程' && paramsShow === true">
                <el-collapse-item title="Input Parameters" name="1">
                    <el-form-item
                        prop="inSource"
                        label="Source"
                    >
                        <el-input
                            v-model="form.inSource"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="inTarget"
                        label="Target"
                    >
                        <el-input
                            v-model="form.inTarget"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="inSourceExpression"
                        label="SouExp"
                    >
                        <el-input
                            v-model="form.inSourceExpression"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="inTargetExpression"
                        label="TarExp"
                    >
                        <el-input
                            v-model="form.inTargetExpression"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="Output Parameters" name="2">
                    <el-form-item
                        prop="outSource"
                        label="Source"
                    >
                        <el-input
                            v-model="form.outSource"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="outTarget"
                        label="Target"
                    >
                        <el-input
                            v-model="form.outTarget"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="outSourceExpression"
                        label="SouExp"
                    >
                        <el-input
                            v-model="form.outSourceExpression"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="outTargetExpression"
                        label="TarExp"
                    >
                        <el-input
                            v-model="form.outTargetExpression"
                            :disabled="design === 'show'"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
            <el-form-item
                style="text-align:center"
                v-if="form.id && design !== 'show'"
            >
                <el-button
                    type="primary"
                    size="small"
                    @click="saveProperties"
                >保存</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="_charts-info" v-if="design === 'show' && isBlank !== true && itemShow === false">
        <el-collapse @change="handleChange">
            <el-collapse-item style="padding-left: 5px">
                <template slot="title"><i class="header-icon el-icon-info"></i>&nbsp;&nbsp;点击{{showTitle === true ? '查看':'收起'}}{{infoTitle}}详情</template>
            <!-- <div class="charts-title">
                <span>{{infoTitle}}属性</span>
            </div> -->
                <div class="charts-content">
                    <el-form label-position="left" label-width="68px" :model="form" ref="nodeForm" :rules="itemRules" show-message :inline-message="true" style="height: calc(100% - 40px)">
                        <el-checkbox
                            v-if="form.type == '审批人'"
                            v-model="form.isCount"
                            style="margin-bottom: 5px;"
                            :disabled="design === 'show'"
                        >是否会签任务
                        </el-checkbox>
                        <el-form-item
                            prop="id"
                            label="ID"
                        >
                            <el-input
                                v-model="form.id"
                                :disabled="true"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="name"
                            label="名称"
                        >
                            <el-input
                                v-model="form.name"
                                :disabled="design === 'show'"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="model"
                            label="Model"
                            v-if="false"
                        >
                            <el-input
                                v-model="form.model"
                                :disabled="true"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="type"
                            :label="form.model === 'node' ? '节点类型' : '连接线类型'"
                        >
                            <el-input
                                v-model="form.type"
                                :disabled="true"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="rules"
                            label="条件"
                            v-if="form.model === 'edge'"
                        >
                            <el-input
                                v-model="form.rules"
                                :disabled="design === 'show'"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <!-- <el-form-item prop="time" label="审核时长" v-if="form.model === 'task' && form.model !== 'line'">
                            <el-input v-model="form.time" size="small" placeholder="单位：小时"></el-input>
                        </el-form-item> -->
                        <el-form-item
                            prop="mulInsType"
                            label="会签类型"
                            v-if="form.type == '审批人' && form.isCount"
                        >
                            <el-select
                                v-model="form.mulInsType"
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                            >
                                <el-option
                                    v-for="item in mulInsTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="variableUser"
                            label="审批人员"
                            v-if="form.type == '审批人' && form.isCount"
                        >
                            <el-input
                                v-model="form.variableUser"
                                placeholder="请输入审批人参数"
                                :disabled="design === 'show'"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="collection"
                            label="会签人员"
                            v-if="form.type == '审批人' && form.isCount"
                        >
                            <el-input
                                v-model="form.collection"
                                placeholder="请输入会签人员参数"
                                :disabled="design === 'show'"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="completeCondition"
                            label="结束条件"
                            v-if="form.type == '审批人' && form.isCount"
                        >
                            <el-input
                                v-model="form.completeCondition"
                                placeholder="请输入结束条件"
                                :disabled="design === 'show'"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="group"
                            label="审批职务"
                            v-if="form.type == '审批人' && !form.isCount"
                            v-show="isgroupDuty"
                        >
                            <el-select
                                v-model="form.group"
                                filterable
                                allow-create
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                            >
                                <el-option
                                    v-for="item in dutyList"
                                    :key="item.id"
                                    :label="item.dutyName ? item.dutyName : form.group"
                                    :value="item.dutyId ? item.dutyId : form.group"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="group"
                            label="审批角色"
                            v-if="form.type == '审批人' && !form.isCount"
                            v-show="isgroup"
                        >
                            <el-select
                                v-model="form.group"
                                filterable
                                allow-create
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.roleName ? item.roleName : form.group"
                                    :value="item.roleId ? item.roleId : form.group"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="user"
                            label="审批用户"
                            v-if="form.type == '审批人' && !form.isCount"
                        >
                            <el-select
                                v-model="form.user"
                                filterable
                                allow-create
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                                @change="selectChange"
                            >
                                <el-option
                                    v-if="form.group === ''"
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.userName ? item.userName : form.user"
                                    :value="item.userId ? item.userId : form.user"
                                >
                                </el-option>
                                <el-option
                                    v-else
                                    v-for="item in []"
                                    :key="item.id"
                                    :label="item.userName ? item.userName : form.user"
                                    :value="item.userId ? item.userId : form.user"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            v-if="form.type == '审批人' && form.watchTaskParams.length > 0"
                            v-for="(task, index) in form.watchTaskParams"
                            :key="index"
                            :label="'监听任务' + (index + 1)">
                            <el-col :span="24" style="margin-bottom: 10px;">
                                <el-form-item
                                    label-width="0"
                                    :prop="'watchTaskParams.' + index + '.taskEvent'"
                                    :rules="{
                                      required: true, message: '监听事件不能为空', trigger: 'blur'
                                    }"
                                    >
                                    <el-select
                                        v-model="task.taskEvent"
                                        filterable
                                        placeholder="监听事件"
                                        size="small"
                                        clearable
                                        @change="selectChange"
                                        :disabled="design === 'show'"
                                    >
                                        <el-option
                                            v-for="(item, index) in taskEventList"
                                            :key="index"
                                            :label="item"
                                            :value="item"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item
                                    label-width="0"
                                    :prop="'watchTaskParams.' + index + '.taskClass'"
                                    :rules="{
                                    required: true, message: '任务监听器不能为空', trigger: 'blur'
                                    }"
                                    >
                                    <el-select
                                        v-model="task.taskClass"
                                        filterable
                                        allow-create
                                        placeholder="任务监听器"
                                        size="small"
                                        clearable
                                        @change="selectChange"
                                        :disabled="design === 'show'"
                                    >
                                        <el-option
                                            v-for="(item, index) in taskClassList"
                                            :key="index"
                                            :label="item"
                                            :value="item"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <!-- <el-form-item
                            prop="taskClass"
                            label="任务监听器"
                            v-if="form.type == '审批人'"
                        >
                            <el-select
                                v-model="form.taskClass"
                                filterable
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                            >
                                <el-option
                                    v-for="(item, index) in taskClassList"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="taskEvent"
                            label="监听事件"
                            v-if="form.type == '审批人'"
                        >
                            <el-select
                                v-model="form.taskEvent"
                                filterable
                                placeholder="请选择"
                                size="small"
                                clearable
                                :disabled="design === 'show'"
                            >
                                <el-option
                                    v-for="(item, index) in taskEventList"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-row :gutter="3">
                            <el-col :span="18">
                                <el-form-item
                                    prop="itemName"
                                    label="选择流程"
                                    v-if="form.type === '子流程'"
                                >
                                    <el-select
                                        v-model="form.itemName"
                                        filterable
                                        clearable
                                        placeholder="请选择已有流程"
                                        size="small"
                                        :disabled="design === 'show'"
                                        @change="selectChange"
                                    >
                                        <el-option
                                            v-for="item in processList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.key"
                                        >
                                            <span style="float: left">{{ item.name }}</span>
                                            <span style="padding-left: 30px; float: right; color: #8492a6; font-size: 12px">v{{ item.version }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item
                                    style="text-align:center; margin-left: 0px;"
                                    label-width="0px"
                                    class="itemBtn"
                                    v-if="form.type === '子流程'"
                                >
                                    <el-button
                                        type="primary"
                                        plain
                                        size="mini"
                                        :disabled="design === 'show' && (!form.itemName || form.itemName === '')"
                                        @click="childProcessAdd()"
                                    >{{title}}</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- <el-form-item
                            prop="from"
                            label="From"
                            v-if="form.model === 'edge'"
                        >
                            <el-input
                                v-model="form.from"
                                :disabled="true"
                                size="small"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            prop="to"
                            label="To"
                            v-if="form.model === 'edge'"
                        >
                            <el-input
                                v-model="form.to"
                                :disabled="true"
                                size="small"
                            ></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item label="字体样式" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                            <el-select
                                v-model="form.fontFamily"
                                filterable
                                placeholder="请选择字体样式"
                                size="small"
                                :disabled="design === 'show'">
                                <el-option
                                    v-for="item in fontFamilyList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="字体大小" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                            <el-select
                                v-model="form.fontSize"
                                filterable
                                placeholder="请选择字体大小"
                                size="small"
                                :disabled="design === 'show'">
                                <el-option
                                    v-for="item in fontSizeList"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="颜色" v-if="form.model === 'node' && (form.type.search('审批人') !== -1 || form.type.search('子流程') !== -1)">
                            <el-color-picker v-model="form.color" :disabled="design === 'show'"></el-color-picker>
                        </el-form-item> -->
                        <el-collapse style="margin-bottom: 15px" v-if="form.type == '子流程' && paramsShow === true">
                            <el-collapse-item title="Input Parameters" name="1">
                                <el-form-item
                                    prop="inSource"
                                    label="Source"
                                >
                                    <el-input
                                        v-model="form.inSource"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="inTarget"
                                    label="Target"
                                >
                                    <el-input
                                        v-model="form.inTarget"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="inSourceExpression"
                                    label="SouExp"
                                >
                                    <el-input
                                        v-model="form.inSourceExpression"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="inTargetExpression"
                                    label="TarExp"
                                >
                                    <el-input
                                        v-model="form.inTargetExpression"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-collapse-item>
                            <el-collapse-item title="Output Parameters" name="2">
                                <el-form-item
                                    prop="outSource"
                                    label="Source"
                                >
                                    <el-input
                                        v-model="form.outSource"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="outTarget"
                                    label="Target"
                                >
                                    <el-input
                                        v-model="form.outTarget"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="outSourceExpression"
                                    label="SouExp"
                                >
                                    <el-input
                                        v-model="form.outSourceExpression"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop="outTargetExpression"
                                    label="TarExp"
                                >
                                    <el-input
                                        v-model="form.outTargetExpression"
                                        :disabled="design === 'show'"
                                        size="small"
                                    ></el-input>
                                </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                        <!-- <el-form-item
                            style="text-align:center"
                            v-if="form.id && design !== 'show'"
                        >
                            <el-button
                                type="primary"
                                size="small"
                                @click="saveProperties"
                            >保存</el-button>
                        </el-form-item> -->
                    </el-form>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import { checkChar, checkCharLength, checkCharNoChinese } from '@/utils/validator.js';
export default {
    name: 'index',
    mounted () {
    },
    props: {
        companyId: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 700
        },
        design: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: function () {
                return [];
            }
        },
        flowChartId: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        jsonData: {
            type: Object,
            default: () => {}
        },
        itemData: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            showTitle: true, // 展开隐藏区分
            itemShow: false, // 区分子流程显示
            addRectModel: '',
            setPos: {
                left: '10px',
                top: '100px'
            },
            action: '',
            func: '',
            account: '',
            workflow: '',
            nodeType: 0,
            color: '',
            net: '',
            Util: '',
            workflowName: '',
            activation: '', // 当前激活的节点
            isNode: false, // 当前是节点
            isBlank: true, // 当前是空白区
            checked: true, // 网格对齐
            infoTitle: '画布', // 属性标题
            oldColor: '', // 获取节点本身颜色
            type: '', // 有值为编辑状态
            itemDialogVisible: false,
            paramsShow: false,
            title: '新增',
            mulInsTypeList: [
                {
                    label: '并行会签',
                    value: 'Parallel'
                },
                {
                    label: '串行会签',
                    value: 'Sequential'
                },
                {
                    label: '无',
                    value: 'None'
                }
            ],
            form: {
                id: '',
                name: '',
                type: '',
                model: '',
                rules: '',
                itemName: '',
                isCount: false, // 是否会签任务
                mulInsType: 'Parallel',
                collection: '${userList}',
                completeCondition: '${countersignatureservice.complete(execution)}',
                variableUser: 'user',
                group: '',
                roles: '',
                user: '',
                taskClass: '',
                taskEvent: '',
                watchTaskParams: [],
                inSource: '',
                inTarget: '',
                inSourceExpression: '',
                inTargetExpression: '',
                outSource: '',
                outTarget: '',
                outSourceExpression: '',
                outTargetExpression: '',
                from: '',
                to: '',
                fontFamily: '',
                fontSize: null,
                color: ''
            },
            addTaskLoading: false, // 防止重复添加任务
            removeTaskLoading: false, // 方式重复删除任务
            userList: [],
            processList: [],
            taskClassList: [
                'com.steerinfo.act.listner.UserTaskCreateListner',
                'com.steerinfo.act.listner.UserTaskAssignmentListner',
                'com.steerinfo.act.listner.UserTaskCompleteListner',
                'com.steerinfo.act.listner.UserTaskDeleteListner'
            ],
            taskEventList: ['create', 'assignment', 'complete', 'delete'],
            fontFamilyList: [
                {
                    label: '黑体',
                    value: 'SimHei'
                },
                {
                    label: '宋体',
                    value: 'SimSun'
                },
                {
                    label: '楷体',
                    value: 'KaiTi'
                },
                {
                    label: '华文楷体',
                    value: 'STKaiti'
                },
                {
                    label: '仿宋',
                    value: 'FangSong'
                },
                {
                    label: '微软正黑体',
                    value: 'Microsoft JhengHei'
                },
                {
                    label: '微软雅黑',
                    value: 'STHeMicrosoft YaHeiiti'
                }
            ],
            fontSizeList: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
            itemRules: {
                name: [
                    { validator: checkChar, trigger: 'change' },
                    { validator: checkCharLength, max: 48, trigger: 'change' }
                ]
            },
            dutyList: [],
            isgroupDuty: true,
            isgroup: true
        }
    },
    watch: {
        companyId: {
            immediate: false,
            handler: function (n, o) {
                if (n !== '') {
                    this.initG6();
                    this.getProcessList();
                    this.getUserList();
                    this.getDutyList();
                }
            }
        },
        design: {
            immediate: false,
            handler: function (n, o) {
                if (n === 'show') {
                    this.changeMode('drag');
                }
            }
        },
        isBlank: {
            immediate: false,
            handler: function (n, o) {
                if (n === true) {
                    this.showTitle = true;
                }
            }
        },
        'form.itemName': {
            immediate: true,
            handler: function (n, o) {
                if (this.design === 'show') {
                    this.title = '查看';
                    this.paramsShow = (n && n !== '');
                } else {
                    if (n && n !== '') {
                        this.paramsShow = true;
                        this.title = '编辑';
                    } else {
                        this.paramsShow = false;
                        this.title = '新增';
                    }
                }
                // 子流程名转换key值显示
                let iNameList = [];
                for (let sitem of this.processList) {
                    if (sitem.key === this.form.itemName) {
                        iNameList.push(sitem);
                    }
                }
                // 获取最大版本
                let version = Math.max.apply(Math, iNameList.map((item) => { return item.version }));
                if (version > 0) {
                    this.itemData.id = iNameList.find((x) => x.version === version).id;
                }
                // if (n) {
                //     let item = this.processList.find((x) => x.key === n)
                //     this.itemData.id = item.id;
                // }
                
            }
        },
        // 'form.id': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        'form.group': {
            immediate: true,
            handler: function (n, o) {
                if (n === '') {
                    this.isgroup = true;
                    this.isgroupDuty = true;
                } else {
                    let groupIndex = this.options.findIndex(item => item.roleId === n);
                    if (groupIndex > -1) {
                        this.isgroup = true;
                        this.isgroupDuty = false;
                    } else {
                       this.isgroup = false; 
                    }
                    let dutyIndex = this.dutyList.findIndex(item => item.dutyId === n);
                    if (dutyIndex > -1) {
                        this.isgroup = false;
                        this.isgroupDuty = true;
                    } else {
                        this.isgroupDuty = false;
                    }
                    if (this.isgroup === false && this.isgroupDuty === false) {
                        this.isgroup = true;
                    }
                }
            }
        },
        // 'form.name': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        // 'form.rules': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        // 'form.color': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        // 'form.fontSize': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        // 'form.fontFamily': {
        //     immediate: true,
        //     handler: function () {
        //         this.saveProperties()
        //     }
        // },
        'jsonData': {
            immediate: false,
            handler: function () {
                this.editInitial();
            }
        },
        /**
         * 网格切换
         */
        checked: function () {
            let _saveData = this.net.save();
            this.net.destroy(); // 销毁画布
            this.initG6();
            this.net.read(_saveData);
            this.net.render()
        }
    },
    methods: {
        // getPath () {
        //     if (this.$route.path === '/processDdesign2') {
        //         this.getItemParams()
        //     }
        // },
        // getItemParams () {
        //     this.getProcessList();
        //     this.form.itemName = this.$route.params.id;
        //     this.paramsShow = true;
        // },
        // 获取职务
        getDutyList () {
            let form = {
                pageNum: 1,
                pageSize: 100000,
                companyId: this.companyId
            }
            this.axios.get('pass/v1/sysdutys/', {params: form}).then((res) => {
                if (res.code === '0') {
                    this.dutyList = res.data.list;
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        // 添加监听任务
        addWatchTask () {
            this.addTaskLoading = true;
            this.form.watchTaskParams.push({
                taskEvent: '',
                taskClass: '',
                key: Date.now()
            });
            this.addTaskLoading = false;
        },
        // 删减监听任务
        removeWatchTask (item) {
            this.removeTaskLoading = true;
            var index = this.form.watchTaskParams.indexOf(item)
            if (index !== -1) {
              this.form.watchTaskParams.splice(index, 1);
              this.removeTaskLoading = false;
            }
        },
        handleChange () {
            this.showTitle = !this.showTitle;
        },
        selectChange () {
            this.$forceUpdate()
        },
        // 获取用户列表
        getUserList (id) {
            let that = this;
            that.axios.get('pass/v1/sysusers/?pageSize=1000000&companyId=' + that.companyId).then((res) => {
                if (res.code === '0') {
                    that.userList = res.data.list;
                    // // 切换角色后判断用户是否存在
                    // if (that.userList.find(item => item.id === that.form.user)) {
                    //     that.form.user = that.userList.find(item => item.id === that.form.user).id;
                    // } else {
                    //     that.form.user = '';
                    // }
                } else {
                    this.$message.error(res.message);
                }
            }).catch(() => {
                that.$message.error('请求失败')
            })
        },
        // 获取子流程列表
        getProcessList () {
            this.axios.get('pass/act/v1/actinformations/?companyId=' + this.companyId).then(res => {
                if (res.code === '0') {
                    this.processList = res.data.list;
                } else {
                    this.$message.error(res.message);
                }
            }).catch((error) => {
                this.$message.error(error);
            })
        },
        // 新建子流程
        // goItemAdd (status) {
        //     this.$router.push({ name: 'processDdesign3', params: { type: status, data: '' } });
        // },
        childProcessAdd () {
            this.itemShow = true;
            this.$parent.childProcessAdd();
        },
        /**
         * 拖拽事件
         */
        mouseleaveSet (event) {
            let that = this;
            that.$refs.hiddenArea.style.display = 'none';
            that.$refs.setPos.style.display = 'none';
        },
        mousemoveSet (event) {
            let that = this;
            that.setPos = {
                left: event.pageX + 'px',
                top: event.pageY + 'px'
            }
        },
        mousedownSet (event) {
            let that = this;
            if (event.button === 0) {
                document.body.appendChild(that.$refs.setPos);
                that.$refs.hiddenArea.style.display = 'block';
                let activeDiv = event.target.classList.contains('dragEvent') ? event.target.children[0] : event.target;
                that.setPos = {
                    left: event.pageX + 'px',
                    top: event.pageY + 'px'
                }
                switch (activeDiv.classList[0]) {
                    case '_circle':
                        // that.$refs.setPos.innerHTML = '<div style="width: 26px;height: 26px;border-radius: 13px;border: 3px solid #606266; margin: 0 auto;text-align: center;line-height: 50px;"></div>';
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/start.png"/>';
                        that.addRectModel = '_circle';
                        break;
                    case 'approver':
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/user.png"/>';
                        that.addRectModel = 'approver';
                        break;
                    case 'exclusiveGateway':
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/eclGateway.png"/>';
                        that.addRectModel = 'exclusiveGateway';
                        break;
                    case 'parallelGateway':
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/pllGateway.png"/>';
                        that.addRectModel = 'parallelGateway';
                        break;
                    case '_end-circle':
                        // that.$refs.setPos.innerHTML = '<div style="width: 26px;height: 26px;border-radius: 13px;border: 2px solid #ddd;background-color: #606266;margin: 0 auto;text-align: center;line-height: 50px;"></div>';
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/end.png"/>';
                        that.addRectModel = '_end-circle';
                        break;
                    case 'item':
                        that.$refs.setPos.innerHTML = '<img style="width: 26px;height: 26px;" src="../static/img/workflow/item.png"/>';
                        // that.$refs.setPos.innerHTML = '<div style="width: 26px;height: 14px;border-radius: 3px;border: 1px solid #000;"></div>'
                        that.addRectModel = 'item';
                        break;
                    default:
                        break;
                };
                that.$refs.setPos.style.display = 'block';
            }
        },
        mouseupSet (event) {
            let that = this
            that.$refs.hiddenArea.style.display = 'none';
            that.$refs.setPos.style.display = 'none';
            let minX = that.net.getViewPortBox().minX ? that.net.getViewPortBox().minX : 0;
            let minY = that.net.getViewPortBox().minY ? that.net.getViewPortBox().minY : 0;
            let x = minX + (event.layerX / that.net.getScale());
            let y = minY + (event.layerY / that.net.getScale());
            let o = document.getElementById('icore-flow-chart-componets');
            const w = o.offsetWidth; // 画布宽度
            if (event.layerX > 136 && event.layerX < w - 240 && event.layerY > 50) {
                switch (that.addRectModel) {
                    case '_circle':
                        that.net.add('node', {
                            shape: 'icore-circle',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: 'start',
                                type: '开始节点',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000'
                            }
                        })
                        break;
                    case 'approver':
                        that.net.add('node', {
                            shape: 'icore-approver',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: '',
                                type: '审批人',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000',
                                group: '',
                                user: '',
                                isCount: false,
                                mulInsType: 'Parallel',
                                collection: '${userList}',
                                completeCondition: '${countersignatureservice.complete(execution)}',
                                variableUser: 'user'
                            }
                        })
                        break;
                    case 'exclusiveGateway':
                        that.net.add('node', {
                            shape: 'icore-exclusiveGateway',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: '排他网关',
                                type: '排他网关',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000'
                            }
                        })
                        break;
                    case 'parallelGateway':
                        that.net.add('node', {
                            shape: 'icore-parallelGateway',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: '并行网关',
                                type: '并行网关',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000'
                            }
                        })
                        break;
                    case '_end-circle':
                        that.net.add('node', {
                            shape: 'icore-end-circle',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: 'end',
                                type: '结束节点',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000'
                            }
                        })
                        break;
                     case 'item':
                        that.net.add('node', {
                            shape: 'icore-item',
                            x,
                            y,
                            color: '#000000',
                            data: {
                                id: '',
                                name: '',
                                type: '子流程',
                                fontSize: 14,
                                fontFamily: 'STHeMicrosoft YaHeiiti',
                                color: '#000000'
                            }
                        })
                        break;
                    default:
                        break;
                };
            }
        },
        // 注册审批节点
        drawApproverCard (cfg, group) {
            var model = cfg.model;
            var data = model.data;
            var width = model.width ? model.width : 120;
            var height = model.height ? model.height : 65;
            var upRectHeight = 25;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : 'white';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('rect', {
                attrs: {
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                    stroke: color,
                    radius: 10,
                    fill: color2
                }
            });
            group.addShape('image', {
                attrs: {
                    x: x + 5,
                    y: y + 5,
                    width: 20,
                    height: 20,
                    img: '../static/img/workflow/approver.png' // 图片路径需要http请求模式 放置在static目录下
                }
            });
            // group.addShape('text', {
            //     attrs: {
            //         x: cfg.x,
            //         y: y + padding,
            //         text: data.name ? data.name : '', // 通过参数传入
            //         textBaseline: 'top',
            //         textAlign: 'center',
            //         fontFamily: data.fontFamily ? data.fontFamily : 'STHeMicrosoft YaHeiiti',
            //         fontSize: data.fontSize ? data.fontSize : 14,
            //         fill: data.color ? data.color : 'black'
            //     }
            // });
            // 实际数据
            group.addShape('text', {
                attrs: {
                    x: cfg.x,
                    y: y + upRectHeight + padding,
                    text: data.name ? (data.name.split('').splice(0, 8).join('') + '\n' + data.name.split('').splice(8).join('')) : '', // 通过参数传入
                    textBaseline: 'top',
                    textAlign: 'center',
                    fontFamily: data.fontFamily ? data.fontFamily : 'STHeMicrosoft YaHeiiti',
                    fontSize: data.fontSize ? data.fontSize - 2 : 12,
                    fill: data.color ? data.color : 'black'
                }
            });
            return keyShape;
        },
        // 注册排他网关节点
        drawEclGateWayCard (cfg, group) {
            // 注冊节点内容
            var model = cfg.model;
            // var data = model.data;
            var width = 50;
            var height = 50;
            var upRectHeight = 30;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : '';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('polygon', {
                attrs: {
                    points: [[x, cfg.y], [cfg.x, cfg.y + height / 2], [cfg.x + width / 2, cfg.y], [cfg.x, cfg.y - height / 2]],
                    stroke: color,
                    fill: color2
                }
            });
            // 图片
            group.addShape('image', {
                attrs: {
                    x: x + 5,
                    y: y + 5,
                    width: 40,
                    height: 40,
                    img: '../static/img/workflow/clavis.svg' // 图片路径需要http请求模式 放置在static目录下
                }
            });
            return keyShape;
        },
        // 注册并行网关节点
        drawPllGateWayCard (cfg, group) {
            // 注冊节点内容
            var model = cfg.model;
            // var data = model.data;
            var width = 50;
            var height = 50;
            var upRectHeight = 30;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : '';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('polygon', {
                attrs: {
                    points: [[x, cfg.y], [cfg.x, cfg.y + height / 2], [cfg.x + width / 2, cfg.y], [cfg.x, cfg.y - height / 2]],
                    stroke: color,
                    fill: color2
                }
            });
            // 图片
            group.addShape('image', {
                attrs: {
                    x: x + 5,
                    y: y + 5,
                    width: 40,
                    height: 40,
                    img: '../static/img/workflow/add.svg' // 图片路径需要http请求模式 放置在static目录下
                }
            });
            return keyShape;
        },
        drawEndCircleCard (cfg, group) {
            // 注冊节点内容
            var model = cfg.model;
            var data = model.data;
            var width = 40;
            var height = 40;
            var upRectHeight = 30;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : 'white';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('rect', {
                attrs: {
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                    stroke: color,
                    radius: 20,
                    fill: '#606266'
                }
            });
            group.addShape('rect', {
                attrs: {
                    x: x + 4,
                    y: y + 4,
                    width: width - 8,
                    height: height - 8,
                    stroke: color,
                    radius: 16,
                    fill: color2
                }
            });
            return keyShape;
        },
        drawCircleCard (cfg, group) {
            // 注冊节点内容
            var model = cfg.model;
            var data = model.data;
            var width = 40;
            var height = 40;
            var upRectHeight = 30;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : 'white';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('rect', {
                attrs: {
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                    stroke: color,
                    radius: 20,
                    fill: color2
                }
            });
            //  group.addShape('text', {
            //     attrs: {
            //         x: cfg.x,
            //         y: cfg.y - 6,
            //         text: 'start', // 通过参数传入
            //         textBaseline: 'top',
            //         textAlign: 'center',
            //         fontFamily: data.fontFamily ? data.fontFamily : 'STHeMicrosoft YaHeiiti',
            //         fontSize: data.fontSize ? data.fontSize : 14,
            //         fill: data.color ? data.color : 'black'
            //     }
            // });
            return keyShape;
        },
        // 注册子流程节点
        drawItemCard (cfg, group) {
            var model = cfg.model;
            var data = model.data;
            var width = model.width ? model.width : 120;
            var height = model.height ? model.height : 70;
            var upRectHeight = 25;
            var x = cfg.x - width / 2; // 左上角x
            var y = cfg.y - height / 2; // 左上角y
            var color = cfg.color ? cfg.color : '#000000';
            var color2 = cfg.color === '#356E8B' ? '#D2EAF7' : 'white';
            var padding = 10;
            var count = model.count;
            var keyShape;
            keyShape = group.addShape('rect', {
                attrs: {
                    x: x,
                    y: y,
                    width: width,
                    height: height,
                    stroke: color,
                    radius: 10,
                    fill: color2
                }
            });
            group.addShape('text', {
                attrs: {
                    x: cfg.x,
                    y: y + padding,
                    text: '子流程',
                    textBaseline: 'top',
                    textAlign: 'center',
                    fontFamily: data.fontFamily ? data.fontFamily : 'STHeMicrosoft YaHeiiti',
                    fontSize: data.fontSize ? data.fontSize : 14,
                    fill: data.color ? data.color : 'black'
                }
            });
            // 实际数据
            group.addShape('text', {
                attrs: {
                    x: cfg.x,
                    y: y + upRectHeight + padding,
                    text: data.name ? (data.name.split('').splice(0, 8).join('') + '\n' + data.name.split('').splice(8).join('')) : '',
                    textBaseline: 'top',
                    textAlign: 'center',
                    fontFamily: data.fontFamily ? data.fontFamily : 'STHeMicrosoft YaHeiiti',
                    fontSize: data.fontSize ? data.fontSize - 2 : 12,
                    fill: data.color ? data.color : 'black'
                }
            });
            return keyShape;
        },
        // handleNodeClick () {
        //     let that = this;
        //     that.addRect();
        // },
        initG6 () {
            let that = this;
            that.Util = G6.Util;
            // 注册节点
            G6.registNode('icore-circle', {
                draw: function (cfg, group) {
                    return that.drawCircleCard(cfg, group);
                }
            });
            G6.registNode('icore-end-circle', {
                draw: function (cfg, group) {
                    return that.drawEndCircleCard(cfg, group);
                }
            });
            G6.registNode('icore-approver', {
                draw: function (cfg, group) {
                    return that.drawApproverCard(cfg, group);
                }
            });
            G6.registNode('icore-parallelGateway', {
                draw: function (cfg, group) {
                    return that.drawPllGateWayCard(cfg, group);
                }
            });
            G6.registNode('icore-exclusiveGateway', {
                draw: function (cfg, group) {
                    return that.drawEclGateWayCard(cfg, group);
                }
            });
            G6.registNode('icore-item', {
                draw: function (cfg, group) {
                    return that.drawItemCard(cfg, group);
                }
            });
            let grid;
            if (that.checked) {
                grid = {
                    forceAlign: true, // 是否支持网格对齐
                    cell: 15 // 网格大小
                };
            } else {
                grid = null;
            }
            that.net = new G6.Net({
                id: 'icore-flow-chart-componets', // 容器ID
                mode: 'edit',
                clipboard: true,
                rollback: true,
                grid: grid,
                /* width: 500, // 画布宽 */
                height: that.height // 画布高
            });
            /**
             *点击空白处
            */
            that.net.on('click', (ev) => {
                if (!that.Util.isNull(ev.item)) {
                    that.isBlank = false
                } else {
                    that.isBlank = true;
                    that.infoTitle = '画布'
                }
            });
            /**
             *点击节点
                */
            that.net.on('itemclick', function (ev) {
                that.isNode = that.Util.isNode(ev.item); // 是否为Node
                if (that.isNode) {
                    that.infoTitle = '节点';
                } else {
                    that.infoTitle = '连接线';
                }
                ev.item._attrs.model.data.id = ev.item._attrs.id;
                that.form = ev.item.get('model').data;
                // 子流程名转换key值显示
                if (that.form.type === '子流程') {
                    let iNameList = [];
                    for (let sitem of that.processList) {
                        if (sitem.key === that.form.itemName) {
                            iNameList.push(sitem);
                        }
                    }
                    // 获取最大版本
                    let version = Math.max.apply(Math, iNameList.map((item) => { return item.version }));
                    if (version > 0) {
                        that.form.itemName = iNameList.find((x) => x.version === version).key;
                    }
                }
                // that.form.from = ev.item.get('model').source;
                // that.form.to = ev.item.get('model').target;
                that.form.model = ev.item._attrs.type;
                if (that.form.watchTaskParams === undefined) {
                    that.form.watchTaskParams = [];
                }
                that.activation = ev.item;
                that.isBlank = false;
                that.color = that.oldColor;
            });
            /**
             * 键盘操作
             */
            that.net.on('keydown', function (ev) {
                console.log(ev)
                const k = window.event ? ev.keyCode : ev.which;
                if (k === 8 || k === 46) { // backspace 或 delete键
                    that.isBlank = true;
                    that.infoTitle = '画布';
                }
            });
            /**
             * 鼠标移入移出事件改变颜色
             */
            that.net.on('itemmouseenter', ev => {
                let item = ev.item;
                that.oldColor = item.get('model').color; // 获取节点颜色
                that.net.update(item, {
                    color: '#356E8B'
                });
                that.net.refresh();
            });
            that.net.on('itemmouseleave', ev => {
                let item = ev.item;
                that.net.update(item, {
                    color: that.oldColor
                });
                that.net.refresh();
            });
            var dragging = false;
            that.net.on('dragstart', function (ev) {
                dragging = true;
            });
            that.net.on('dragend', function (ev) {
                dragging = false;
            });
            // 进入锚点切换到曲线添加模式
            that.net.on('mouseenter', function (ev) {
                var shape = ev.shape;
                if (shape && shape.hasClass('anchor-point') && !dragging) {
                    that.net.beginAdd('edge', {
                        shape: 'polyLineFlow',
                        color: '#000000',
                        data: {
                            id: '',
                            name: '',
                            type: '箭头折线',
                            rules: '',
                            color: '#000000'
                        }
                    });
                }
            });
            // 离开锚点切换回编辑模式
            that.net.on('mouseleave', function (ev) {
                var shape = ev.shape;
                if (shape && shape.hasClass('anchor-point') && !dragging) {
                    that.net.changeMode('edit');
                }
            });
            /**
             * 提示信息
             */
            // that.net.node().tooltip(['label', 'func', 'role', 'color']);
            // that.net.edge().tooltip(['label', 'color']);
            /**
             * 渲染
             */
            // that.net.source(that.data.nodes, that.data.edges); // 加载资源数据
            that.net.render();
        },

        addCircle () {
            this.net.beginAdd('node', {
                shape: 'circle',
                nodeType: 0
            })
        }, // 添加起始节点
        addRect () {
            this.net.beginAdd('node', {
                shape: 'customNode',
                nodeType: 0
            })
        }, // 添加常规节点
        addRhombus () {
            this.net.beginAdd('node', {
                shape: 'rhombus',
                nodeType: 0
            })
        }, // 添加条件节点
        addLine () {
            this.net.beginAdd('edge', {
                shape: 'line'
            });
        }, // 添加直线
        addSmooth () {
            this.net.beginAdd('edge', {
                shape: 'smooth'
            })
        }, // 添加曲线
        addArrowSmooth () {
            this.net.beginAdd('edge', {
                shape: 'smoothArrow'
            })
        }, // 添加箭头曲线
        addArrowLine () {
            this.net.beginAdd('edge', {
                shape: 'arrow',
                data: {
                    id: '',
                    name: '',
                    type: '箭头直线',
                    color: '#000000'
                }
            });
        }, // 添加箭头直线
        addPolyLine (cfg) {
            var model = cfg.model;
            var data = model.data;
            this.net.beginAdd('edge', {
                shape: 'polyLineFlow',
                color: '#000000',
                data: {
                    id: data.id,
                    name: data.name ? data.name : '',
                    type: '箭头折线',
                    rules: data.rules ? data.rules : '',
                    color: '#000000'
                }
            });
        }, // 添加折线
        changeMode (mode) {
            if (this.design !== 'show') {
                this.net.updateRollback();
            }
            this.net.changeMode(mode)
        }, // 拖拽与编辑模式的切换
        del () {
            this.isBlank = true;
            this.infoTitle = '画布';
            this.net.del()
        }, // 删除
        // 节点信息保存
        saveProperties () {
            let that = this;
            if (that.activation !== '' && that.activation.get('type') === 'node') {
                delete that.form['from'];
                delete that.form['to'];
                delete that.form['rules'];
                if (that.form.type !== '审批人') {
                    delete that.form['group'];
                    delete that.form['user'];
                    delete that.form['taskClass'];
                    delete that.form['taskEvent'];
                    delete that.form['isCount'];
                    delete that.form['watchTaskParams'];
                } else {
                    if (that.form.isCount === true) {
                        that.form.group = '';
                        that.form.user = '';
                    } else {
                        that.form.mulInsType = '';
                        that.form.collection = '';
                        that.form.completeCondition = '';
                        that.form.variableUser = '';
                    }
                }
                if (that.form.type !== '子流程') {
                    delete that.form['itemName'];
                    delete that.form['inSource'];
                    delete that.form['inSourceExpression'];
                    delete that.form['inTarget'];
                    delete that.form['inTargetExpression'];
                    delete that.form['outSource'];
                    delete that.form['outSourceExpression'];
                    delete that.form['outTarget'];
                    delete that.form['outTargetExpression'];
                }
            } else if (that.activation !== '' && that.activation.get('type') === 'edge') {
                delete that.form['group'];
                delete that.form['itemName'];
            }
            switch (that.form.type) {
                case '子流程':
                    that.form.inSource = that.form.inSource ? that.form.inSource : '';
                    that.form.inTarget = that.form.inTarget ? that.form.inTarget : '';
                    that.form.inSourceExpression = that.form.inSourceExpression ? that.form.inSourceExpression : '';
                    that.form.inTargetExpression = that.form.inTargetExpression ? that.form.inTargetExpression : '';
                    that.form.outSource = that.form.outSource ? that.form.outSource : '';
                    that.form.outTarget = that.form.outTarget ? that.form.outTarget : '';
                    that.form.outSourceExpression = that.form.outSourceExpression ? that.form.outSourceExpression : '';
                    that.form.outTargetExpression = that.form.outTargetExpression ? that.form.outTargetExpression : '';
                    if (that.form.inSource.split(',').length === that.form.inTarget.split(',').length) {
                        if (that.form.inSourceExpression.split(',').length === that.form.inTargetExpression.split(',').length) {
                            if (that.form.outSource.split(',').length === that.form.outTarget.split(',').length) {
                                if (that.form.outSourceExpression.split(',').length === that.form.outTargetExpression.split(',').length) {
                                    if (that.net) {
                                        that.net.update(that.activation, {
                                            label: that.form.name,
                                            func: that.func,
                                            action: that.action,
                                            account: that.account,
                                            workflow: that.workflow,
                                            color: that.color,
                                            data: that.form
                                        });
                                    }
                                } else {
                                    this.$message.error('请检查Input Parameters中SouExp与TarExp参数个数是否一致');
                                }
                            } else {
                                this.$message.error('请检查Output Parameters中Source与Target参数个数是否一致');
                            }
                        } else {
                            this.$message.error('请检查Input Parameters中SouExp与TarExp参数个数是否一致');
                        }
                    } else {
                        this.$message.error('请检查Input Parameters中Source与Target参数个数是否一致');
                    }
                    break
                case '审批人':
                that.form.taskClass = that.form.taskClass ? that.form.taskClass : '';
                that.form.taskEvent = that.form.taskEvent ? that.form.taskEvent : '';
                    if ((that.form.taskClass === '' && that.form.taskEvent === '') || (that.form.taskClass !== '' && that.form.taskEvent !== '')) {
                        that.net.update(that.activation, {
                            label: that.form.name,
                            func: that.func,
                            action: that.action,
                            account: that.account,
                            workflow: that.workflow,
                            color: that.color,
                            data: that.form
                        });
                    } else {
                        that.form.taskClass = '';
                        that.form.taskEvent = '';
                        that.$message.error('监听事件需要同时选择监听器与监听事件！');
                    }
                    break
                default:
                    that.net.update(that.activation, {
                        label: that.form.name,
                        func: that.func,
                        action: that.action,
                        account: that.account,
                        workflow: that.workflow,
                        color: that.color,
                        data: that.form
                    });
                    break
            }
        },
        save () {
            /* 验证流图名称 */
            if (this.name !== '' || this.flowChartId !== '') {
                let data = this.net.save();
                if (data.source.nodes.length === 0) {
                    this.$message({type: 'error', message: '流图内容不能为空'});
                    return false
                } else {
                    let startCount = 0;
                    for (let item of data.source.nodes) {
                        if (item.shape === 'icore-circle') {
                            startCount++;
                        }
                    }
                    if (startCount > 1) {
                        this.$message({type: 'error', message: '不允许多个开始节点'});
                    } else {
                        data.source['name'] = this.name;
                        data.source['id'] = this.flowChartId;
                        let json = JSON.stringify(data, null, 2);
                        this.$emit('saveData', data.source, this.type);
                    }
                }
            } else {
                this.$message({type: 'error', message: '流图名称与流程ID不能为空'})
            }
            /* console.log(saveData, json); */
        }, // 保存
        clearView () {
            this.type = '';
            this.workflowName = '';
            this.net.changeData();
        }, // 清空视图
        source (nodes, edges, name, type) {
            this.type = type;
            this.workflowName = name;
            this.net.source(nodes, edges)
            this.net.render();
        }, // 更新数据
        // 编辑数据初始化加载
        editInitial () {
            if (this.name !== '' || this.flowChartId !== '') {
                this.source(this.jsonData.nodes, this.jsonData.edges, this.jsonData.name, this.type);
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #icore-flow-chart-componets {
    height: 710px;
    border: 1px solid #ebeef5;
    position: relative;
    overflow: hidden;
    .el-tree-node__label {
        border-bottom: 0;
    }
  }

  .operating {
    position: absolute;
    z-index: 98;
    background-color: #ffffff;
    padding: 10px 10px;
    box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    width: 100%;
    text-align: center;
  }

  .charts-info {
    position: absolute;
    height: 100%;
    right: 0;
    z-index: 99;
    box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    background: #ffffff;
    .charts-title {
      height: 60px;
      padding-left: 10px;
      border-top: 1px solid #DCE3E8;
      border-bottom: 1px solid #DCE3E8;
      border-left: 1px solid #DCE3E8;
      background: rgba(247, 249, 251, 1);
      line-height: 60px;
      span {
        font-size: 14px;
      }
    }
    .charts-content {
        overflow-y: scroll;
        background: #ffffff;
        width: 250px;
        height: calc(100% - 40px);
        border-left: 1px solid #E6E9ED;
        padding: 10px;
    }
  }
  ._charts-info {
    position: absolute;
    right: 0;
    z-index: 99;
    box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    background: #ffffff;
    .charts-content {
      background: #ffffff;
      width: 250px;
      padding: 10px;
    }
  }

  .modeldata {
    position: absolute;
    height: 100%;
    left: 0;
    z-index: 99;
    box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    background: #ffffff;
    .charts-title {
      height: 60px;
      padding-left: 10px;
      border-top: 1px solid #DCE3E8;
      border-left: 1px solid #DCE3E8;
      border-bottom: 1px solid #DCE3E8;
      background:rgba(247, 249, 251, 1);
      line-height: 60px;
      span {
        font-size: 14px;
      }
    }
    .charts-content {
        background: #ffffff;
        width: 140px;
        border-left: 1px solid #E6E9ED;
        padding: 0px;
        .dragEvent {
            text-align: center;
            cursor: pointer;
            height: 30px;
            width: 90%;
            background-color: #3a8ee624;
            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 0px;
            .dragItem {
                margin: 0px 5px;
                height: 30px;
                line-height:30px;
            }
        }
    }
  }
  .btn-group {
    border-right: 1px solid #efefef;
    display: inline-block;
    padding-left: 10px;
    padding-right: 14px;
    &:last-of-type {
      border-right: 0;
    }
    .btn {
      display: inline-block;
      margin: 2px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      border: 1px solid rgba(233, 233, 233, 0);
      i {
        font-size: 20px;
      }
      &:hover {
        border: 1px solid #E9E9E9;
        color: #767A85;
        border-radius: 2px;
        background: #FAFAFE;
      }
    }
    .el-form-item {
      margin-bottom: 0 !important;
    }
  }
</style>
