<!--
 * @Author: Jason Liu
 * @Date: 2022-05-26 16:09:27
 * @Desc: 流程设计器
-->

<template>
  <a-drawer
    width="100%"
    :visible="show"
    :loading="loading"
    @close="backSet()"
    :keyboard="false"
    :closable="false"
    :destroy-on-close="true"
    class="processDesignerCard"
  >
    <a-layout>
      <a-layout-header class="tool_bar">
        <a-row>
          <a-col :span="4">
            <a-button @click="backSet()" icon="caret-left" class="a_back">
            </a-button>
            &nbsp;

            <span v-if="activeJob.data.jobType == 'job'">
              <svg-icon type="SubJob" /> &nbsp;
              {{ debuggerProcess.show ? "作业调试" : "作业设计" }}
            </span>
            <span v-else-if="activeJob.data.jobType == 'flow'">
              <svg-icon type="SubJob" /> &nbsp; 调度流程设计
            </span>
            <span v-else>
              <svg-icon type="SubTransform" /> &nbsp;
              {{ debuggerProcess.show ? "转换调试" : "转换设计" }}
            </span>
            <a-icon
              type="sync"
              :style="{ color: '#2d5afa' }"
              spin
              v-if="running"
            />
          </a-col>
          <a-col :span="8" class="api_tool">
            <template
              v-if="
                activeJob.data.jobType != 'flow' &&
                activeJob.data.id &&
                activeJob.data.id.indexOf('new') < 0
              "
            >
              <a-button
                type="link"
                class="a_danger"
                @click="deleteJob"
                icon="delete"
              >
                删除
              </a-button>
              <a-button type="link" icon="copy" @click="copyJob">
                复制
              </a-button>
            </template>
          </a-col>
          <a-col :span="12" class="api_tool">
            <a-button
              type="link"
              icon="form"
              @click="
                putawayNode = true;
                setBase = false;
              "
            >
              基础设置
            </a-button>
            <a-button
              type="link"
              :loading="loading"
              icon="cloud-server"
              @click="saveThis"
            >
              保存
            </a-button>
            <a-button
              type="link"
              :loading="allLoading"
              icon="snippets"
              v-if="false"
              @click="saveAll"
            >
              全部保存
            </a-button>
            <a-button type="link" icon="close" @click="backSet()">
              关闭页面
            </a-button>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout>
        <a-layout-sider class="design_controls" :collapsed-width="0">
          <a-row>
            <a-col :span="1"></a-col>
            <a-col :span="22">
              <a-input-search
                placeholder="请输入关键字"
                v-model="control_str"
                @search="searchControlsList"
            /></a-col>
            <a-col :span="1"></a-col>
          </a-row>

          <div class="controls_List">
            <vxe-table
              show-overflow
              :show-header="false"
              resizable
              :row-config="{ isHover: true }"
              :loading="loading"
              :data="controlsJobList"
              border="none"
              height="100%"
              ref="controlsJobList"
              :tree-config="{
                reserve: true,
                transform: true,
                rowField: 'id',
                indent: 4,
                lazy: true,
                trigger: 'row',
                hasChild: 'hasChild',
                expandAll: true,
                loadMethod: loadToolChildrenMethod,
              }"
            >
              <vxe-column
                field="title"
                tree-node
                :filters="[{ data: '' }]"
                :filter-method="filterName"
              >
                <template #default="{ row }">
                  <template v-if="row.isGroup">
                    <!-- <svg-icon
                      type="icon_topic"
                      v-if="row.type != 'sys'"
                      class="tree_iFcon"
                    /> -->
                    <span> {{ row.name }}</span>
                  </template>
                  <span
                    v-else
                    :data-id="row.id"
                    :data-type="row.type"
                    @mousedown="startDrag"
                    class="start_drag"
                  >
                    <svg-icon
                      v-if="row.type == 'WinningJob'"
                      class="icon_controls"
                      :type="row.scheduleType"
                    />
                    <svg-icon v-else class="icon_controls" :type="row.type" />
                    {{ row.name }}
                  </span>
                </template>
              </vxe-column>

              <template #empty>
                <a-empty
                  :image-style="{
                    display: 'flex',
                    height: '80px',
                  }"
                >
                  <span slot="description"> 暂无数据 </span>
                </a-empty>
              </template>
            </vxe-table>
          </div>
        </a-layout-sider>
        <a-layout-content class="design_content">
          <drag-zone
            class="zone"
            ref="drag"
            :options="{ direction: 'vertical' }"
          >
            <drag-content class="content setBody" ref="setBody">
              <a-tabs
                size="small"
                v-model="activeJob.id"
                @change="initCanvas()"
              >
                <template slot="tabBarExtraContent">
                  <a-dropdown :disabled="debuggerProcess.show">
                    <a-button icon="plus" type=""></a-button>
                    <a-menu slot="overlay" @click="addProcess">
                      <template v-if="activeJob.data.jobType == 'flow'">
                        <a-menu-item key="flow">
                          <svg-icon type="SubTransform" /> 新增流程
                        </a-menu-item>
                      </template>
                      <template v-else>
                        <!-- <a-menu-item key="transform">
                          <svg-icon type="SubTransform" /> 新增转换
                        </a-menu-item>
                        <a-menu-item key="job">
                          <svg-icon type="SubJob" /> 新增作业
                        </a-menu-item> -->
                        <template v-if="activeJob.data.jobType == 'job'">
                          <a-menu-item key="subtransform">
                            <svg-icon type="SubTransform" /> 添加转换
                          </a-menu-item>
                          <a-menu-item key="subjob">
                            <svg-icon type="SubJob" /> 添加作业
                          </a-menu-item>
                        </template>
                      </template>
                    </a-menu>
                  </a-dropdown>
                </template>
                <template v-for="(item, i) in jobs">
                  <a-tab-pane
                    :key="item.id"
                    :loading="item.loading"
                    :disabled="debuggerProcess.show"
                  >
                    <span slot="tab">
                      <svg-icon
                        class="icon_controls"
                        v-if="item.data.parentId"
                        :type="
                          item.data.jobType == 'sub' ? 'SubJob' : 'SubTransform'
                        "
                      />
                      {{ item.data.jobName || "未设置" }}
                      <template v-if="item.change">
                        &nbsp;
                        <a-icon type="sync" v-if="item.loading" spin />
                        <a-icon type="cloud-upload" v-else />
                      </template>
                      &nbsp;
                      <a-popconfirm
                        v-if="!debuggerProcess.show"
                        overlayClassName="btn_l"
                        title="您确定要关闭当前页面嘛？"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="disposeJobs(i)"
                      >
                        <a-icon type="close" v-if="i != 0" />
                      </a-popconfirm>
                    </span>
                    <div class="tool__container">
                      <a-input-number
                        v-model="zoom"
                        :min="0.5"
                        :step="0.1"
                        :max="3"
                        @change="activeJob.graph.zoomTo(zoom)"
                      >
                      </a-input-number>
                      &nbsp;
                      <a-button-group>
                        <a-button
                          type=""
                          @click="runProcessTest"
                          icon="caret-right"
                          v-if="
                            !debuggerProcess.show &&
                            activeJob.data.jobType !== 'flow'
                          "
                        >
                          调试
                        </a-button>
                        <a-button
                          type=""
                          @click="clearProcessTest"
                          icon="apartment"
                          v-if="debuggerProcess.show"
                        >
                          设计
                        </a-button>
                        <a-button
                          icon="form"
                          @click="
                            putawayNode = true;
                            setBase = false;
                          "
                        >
                          基础设置
                        </a-button>
                        <!-- <a-button icon="cluster"
                          v-if="activeJob.data.jobType != 'job' && activeJob.data.jobType != 'flow'"
                          @click="setNodeDataSourceInfo"
                        >
                          数据源信息
                        </a-button> -->
                        <a-button
                          :loading="loading"
                          icon="cloud-server"
                          @click="saveThis"
                        >
                          保存
                        </a-button>
                      </a-button-group>
                    </div>
                    <div
                      :id="item.id"
                      class="designer_container"
                      :ref="item.id"
                    ></div>
                  </a-tab-pane>
                </template>
              </a-tabs>
            </drag-content>
            <drag-handle class="handle" v-if="debuggerProcess.show">
              <a-icon type="small-dash" />
            </drag-handle>
            <drag-content
              class="content testBody"
              v-if="debuggerProcess.show"
              ref="testBody"
            >
              <a-tabs size="small">
                <a-tab-pane key="1" tab="调试参数">
                  <a-row :gutter="[6, 16]">
                    <a-col :span="6" class="a_label">测试量级：</a-col>
                    <a-col :span="12">
                      <a-select
                        :disabled="running"
                        v-model="debuggerProcess.limit"
                      >
                        <a-select-option :value="100">100条</a-select-option>
                        <a-select-option :value="1000">1000条</a-select-option>
                        <a-select-option :value="10000"
                          >10000条</a-select-option
                        >
                        <a-select-option :value="100000"
                          >100000条</a-select-option
                        >
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-row :gutter="[6, 6]">
                    <a-col :span="6" class="a_label">集群类别：</a-col>
                    <a-col :span="12">
                      <a-select
                        :disabled="running"
                        v-model="debuggerProcess.category"
                      >
                        <a-select-option value="1">中心端</a-select-option>
                        <a-select-option value="2">前置机</a-select-option>
                        <a-select-option value="3">院端</a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-row :gutter="[6, 6]">
                    <a-col :span="6" class="a_label">测试集群：</a-col>
                    <a-col :span="12">
                      <a-select
                        :disabled="running"
                        v-model="debuggerProcess.clusterId"
                        :options="clusters"
                      >
                      </a-select>
                    </a-col>
                  </a-row>
                </a-tab-pane>
                <a-tab-pane key="2" tab="调试记录">
                  <div class="log_body">
                    <vxe-table
                      :row-config="{ isHover: true }"
                      stripe
                      :show-header="false"
                      height="100%"
                      :data="logList"
                      class="node_mapping_table"
                    >
                      <vxe-column title="输出内容">
                        <template #default="{ row }">
                          <span class="log_time">{{ row.time.toJSON() }}</span>
                          <p class="log_message">
                            {{ row.message }}
                          </p>
                        </template>
                      </vxe-column>
                      <template #empty>
                        <a-empty
                          :image-style="{
                            height: '80px',
                          }"
                        >
                          <span slot="description"> 暂无调试记录 </span>
                        </a-empty>
                      </template>
                    </vxe-table>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="调试结果">
                  <div class="log_body">
                    <vxe-table
                      :row-config="{ isHover: true }"
                      stripe
                      height="100%"
                      :data="debugSummarys"
                      class="node_mapping_table"
                    >
                      <vxe-column title="任务名称" field="stepName">
                      </vxe-column>
                      <vxe-column title="类型" field="stepType">
                        <template #default="{ row }">
                          {{ row == "TRANSFER" ? "转换" : "作业" }}
                        </template>
                      </vxe-column>
                      <vxe-column title="状态" field="nodeState"> </vxe-column>
                      <vxe-column title="影响条数" field="record.insertedCount">
                      </vxe-column>

                      <vxe-column title="耗时" field="duration"> </vxe-column>

                      <vxe-column title="开始时间" field="startTime">
                      </vxe-column>

                      <vxe-column title="结束时间" field="endTime">
                      </vxe-column>
                      <template #empty>
                        <a-empty
                          :image-style="{
                            height: '50px',
                          }"
                        >
                          <span slot="description"> 暂无调试记录 </span>
                        </a-empty>
                      </template>
                    </vxe-table>
                  </div>
                </a-tab-pane>
                <template slot="tabBarExtraContent">
                  <a-button-group>
                    <a-button @click="reductionTest"> 还原 </a-button>
                    <a-button
                      type="primary"
                      @click="runTest"
                      :loading="running"
                    >
                      调试
                    </a-button>
                  </a-button-group>
                  &nbsp;
                  <a-button icon="close" @click="clearProcessTest" />
                </template>
              </a-tabs>
            </drag-content>
          </drag-zone>
        </a-layout-content>
        <a-layout-sider
          class="base_from"
          width="400"
          v-model="setBase"
          :collapsed-width="0"
        >
          <a-card
            size="small"
            title="基础信息"
            class="no_border"
            :loading="loading"
          >
            <template slot="extra">
              <a-button icon="close" @click="setBase = true" />
            </template>
            <a-form-model
              layout="horizontal"
              v-bind="{
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
              }"
              :rules="rules"
              ref="baseForm"
              :model="activeJob.data"
            >
              <a-form-model-item label="流程名称" prop="jobName">
                <a-input
                  placeholder="请输入流程名称"
                  v-model.lazy="activeJob.data.jobName"
                />
              </a-form-model-item>
              <template v-if="activeJob.data.jobType == 'flow'">
                <a-form-model-item label="流程组" prop="jobGroupId">
                  <a-select
                    placeholder="请选择流程组"
                    v-model.lazy="activeJob.data.jobGroupId"
                    :options="flowGroups"
                  >
                  </a-select>
                </a-form-model-item>
              </template>
              <template v-else>
                <a-form-model-item label="作业组" prop="jobGroupId">
                  <a-select
                    placeholder="请选择作业组"
                    v-model.lazy="activeJob.data.jobGroupId"
                    :options="
                      groupList.map((item) => {
                        return {
                          value: item.id,
                          label: item.jobGroupName,
                        };
                      })
                    "
                  >
                  </a-select>
                </a-form-model-item>
                <a-form-model-item
                  label="上级作业"
                  prop="parentId"
                  v-if="false"
                >
                  <a-select
                    placeholder="请选择作业名称"
                    v-model.lazy="activeJob.data.parentId"
                    :options="parentList"
                  >
                  </a-select>
                </a-form-model-item>
              </template>
              <a-form-model-item label="流程简介" prop="jobDesc">
                <a-input
                  placeholder="请输入流程简介"
                  v-model="activeJob.data.jobDesc"
                />
              </a-form-model-item>
              <!-- 入口作业,也就是父级作业为空, 才能不全这些字段-->
              <template v-if="!activeJob.data.parentId">
                <a-form-model-item label="源厂商名称" prop="sourceFactoryName">
                  <a-input
                    placeholder="请输入源厂商名称"
                    v-model="jobExtraList.sourceFactoryName"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="源业务系统名称"
                  prop="sourceBusinessName"
                >
                  <a-input
                    placeholder="请输入源业务系统名称"
                    v-model="jobExtraList.sourceBusinessName"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="源业务系统版本"
                  prop="sourceBusinessVersion"
                >
                  <a-input
                    placeholder="请输入源业务系统版本"
                    v-model="jobExtraList.sourceBusinessVersion"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="目标厂商名称"
                  prop="targetFactoryName"
                >
                  <a-input
                    placeholder="请输入目标厂商名称"
                    v-model="jobExtraList.targetFactoryName"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="目标业务系统名称"
                  prop="targetBusinessName"
                >
                  <a-input
                    placeholder="请输入目标业务系统名称"
                    v-model="jobExtraList.targetBusinessName"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="目标业务系统版本"
                  prop="targetBusinessVersion"
                >
                  <a-input
                    placeholder="请输入目标业务系统版本"
                    v-model="jobExtraList.targetBusinessVersion"
                  />
                </a-form-model-item>
              </template>
            </a-form-model>
          </a-card>
        </a-layout-sider>
        <a-layout-sider
          class="set_body"
          width="400"
          v-model="putawayNode"
          :collapsed-width="0"
          v-if="!debuggerProcess.show"
        >
          <a-tabs v-model="activeKey">
            <a-tab-pane key="1" tab="参数设置">
              <div class="set_detail">
                <a-row :gutter="[0, 10]">
                  <a-col :span="6" class="a_label">组件名称：</a-col>
                  <a-col :span="17">
                    <a-input
                      placeholder="请输入组件名称"
                      v-model.lazy="activeNode.data.name"
                      @change="
                        changeEndJob();
                        updataNode(false);
                      "
                    />
                  </a-col>
                </a-row>

                <template v-if="activeNode.data.type == 'SubJob'">
                  <!-- 作业编排控件 -->
                  <a-row :gutter="[0, 10]">
                    <a-col :span="6" class="a_label">作业列表：</a-col>
                    <a-col :span="17">
                      <a-select
                        placeholder="请选择要作业列表"
                        v-model="activeNode.data.jobId"
                        :show-search="true"
                        :filter-option="filterOption"
                        @change="
                          changeEndJob();
                          changeSubJobList();
                        "
                        :options="
                          setSubJobConfig.jobs.map((item) => {
                            return {
                              value: item.id,
                              label: item.jobName,
                            };
                          })
                        "
                      >
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-row
                    :gutter="[0, 10]"
                    v-if="activeJob.data.jobType == 'flow'"
                  >
                    <a-col :span="6" class="a_label">集群列表：</a-col>
                    <a-col :span="17">
                      <a-select
                        placeholder="请配置集群信息"
                        v-model="activeNode.data.clusterId"
                        :show-search="true"
                        :filter-option="filterOption"
                        @change="
                          changeEndJob();
                          updataNode();
                        "
                        :options="clusters"
                      >
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                      <a-card class="no_border" size="small">
                        <template slot="title">
                          作业节点概览:{{ activeNode.data.steps.length }}
                        </template>
                        <a-alert
                          v-if="!activeNode.data.jobId"
                          message="请选择编排作业"
                          type="warning"
                        />
                        <template v-else>
                          <template slot="extra">
                            <a-button
                              type="link"
                              @click="setSubJob(activeNode.data.jobId)"
                            >
                              编辑
                            </a-button>
                          </template>
                          <vxe-table
                            show-overflow
                            show-header-overflow
                            :row-config="{ isHover: true }"
                            :show-header="false"
                            stripe
                            height="570"
                            :data="activeNode.data.steps"
                          >
                            <vxe-column title="作业节点">
                              <template #default="{ row }">
                                <svg-icon
                                  class="icon_controls"
                                  :type="row.data.type"
                                  v-if="row.data.type"
                                />
                                <span>
                                  {{ row.data.name }}
                                </span>
                              </template>
                            </vxe-column>

                            <template #empty>
                              <a-empty
                                :image-style="{
                                  width: '100%',
                                  height: '80px',
                                }"
                              >
                                <span slot="description"> 暂无数据 </span>
                              </a-empty>
                            </template>
                          </vxe-table>
                        </template>
                      </a-card>
                    </a-col>
                  </a-row>
                </template>

                <template v-else-if="activeNode.data.type == 'SubTransform'">
                  <!-- 作业编排控件 -->
                  <a-row :gutter="[0, 10]">
                    <a-col :span="6" class="a_label">
                      <a-dropdown>
                        <span
                          ><a-icon type="caret-down" />{{
                            activeNode.data.sourceType == 1
                              ? "公共转换"
                              : "转换列表"
                          }}：
                        </span>
                        <a-menu
                          slot="overlay"
                          @click="
                            (e) => {
                              activeNode.data.sourceType = e.key;
                              getJobList();
                            }
                          "
                        >
                          <a-menu-item :key="0">
                            <a href="javascript:;">转换列表</a>
                          </a-menu-item>
                          <a-menu-item :key="1">
                            <a href="javascript:;">公共转换</a>
                          </a-menu-item>
                        </a-menu>
                      </a-dropdown>
                    </a-col>
                    <a-col :span="17">
                      <a-select
                        placeholder="请选择转换"
                        v-model="activeNode.data.jobId"
                        :show-search="true"
                        :filter-option="filterOption"
                        @change="updataNode()"
                        :options="
                          setSubJobConfig.transforms.map((item) => {
                            return {
                              value: item.id,
                              label: item.jobName,
                            };
                          })
                        "
                      >
                      </a-select>
                    </a-col>
                  </a-row>
                  <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                      <a-card class="no_border" size="small">
                        <template slot="title">
                          转换节点概览:{{ activeNode.data.steps.length }}
                        </template>
                        <a-alert
                          v-if="!activeNode.data.jobId"
                          message="请选择编排作业"
                          type="warning"
                        />
                        <template v-else>
                          <template slot="extra">
                            <a-button
                              type="link"
                              @click="setSubJob(activeNode.data.jobId)"
                            >
                              编辑
                            </a-button>
                          </template>
                          <vxe-table
                            show-overflow
                            show-header-overflow
                            :row-config="{ isHover: true }"
                            :show-header="false"
                            stripe
                            height="570"
                            :data="activeNode.data.steps"
                          >
                            <vxe-column title="作业节点">
                              <template #default="{ row }">
                                <svg-icon
                                  class="icon_controls"
                                  :type="row.data.type"
                                  v-if="row.data.type"
                                />
                                <span>
                                  {{ row.data.name }}
                                </span>
                              </template>
                            </vxe-column>

                            <template #empty>
                              <a-empty
                                :image-style="{
                                  width: '100%',
                                  height: '80px',
                                }"
                              >
                                <span slot="description"> 暂无数据 </span>
                              </a-empty>
                            </template>
                          </vxe-table>
                        </template>
                      </a-card>
                    </a-col>
                  </a-row>
                </template>
                <template v-else-if="activeNode.data.type == 'IntegrationJob'">
                  <!-- 作业编排控件 -->
                  <a-row :gutter="[0, 10]">
                    <a-col :span="6" class="a_label">集成作业：</a-col>
                    <a-col :span="17">
                      <a-select
                        placeholder="请选择基集成作业"
                        v-model="activeNode.data.jobId"
                        :show-search="true"
                        :filter-option="filterOption"
                        @change="
                          changeEndJob();
                          changeSubJobList();
                        "
                        :options="
                          integrationJobList.map((item) => {
                            return {
                              value: item.id,
                              label: item.name,
                            };
                          })
                        "
                      >
                      </a-select>
                    </a-col>
                    <a-col :span="6" class="a_label">作业集群：</a-col>
                    <a-col :span="17">
                      <a-select
                        placeholder="请选择作业集群"
                        v-model="activeNode.data.clusterId"
                        :options="clusters"
                        @change="updataNode()"
                      >
                      </a-select>
                    </a-col>
                    <a-col :span="6" class="a_label">超时时间：</a-col>
                    <a-col :span="17">
                      <a-input-group compact>
                        <a-input
                          v-model="activeNode.data.timeout"
                          style="width: 70%"
                          placeholder="请设置超时时间"
                          @change="updataNode()"
                        />
                        <a-select
                          style="width: 30%"
                          v-model="activeNode.data.timeoutUnit"
                          @change="updataNode()"
                        >
                          <a-select-option value="s"> 秒 </a-select-option>
                          <a-select-option value="m"> 分钟 </a-select-option>
                          <a-select-option value="h"> 小时 </a-select-option>
                        </a-select>
                      </a-input-group>
                    </a-col>
                  </a-row>
                </template>
                <template v-else-if="activeNode.data.type == 'TableInput'">
                  <table-input-optoin
                    v-model="activeNode.data"
                    :get-source="getSourceNode"
                    @change="updataNode"
                  />
                </template>
                <template v-else-if="activeNode.data.type == 'TableOutput'">
                  <table-output-optoin
                    v-model="activeNode.data"
                    :get-source="getSourceNode"
                    @change="updataNode"
                  />
                </template>
                <template v-else-if="activeNode.data.type == 'TableMigrate'">
                  <table-migrate-optoin
                    v-model="activeNode.data"
                    :get-source="getSourceNode"
                    @change="updataNode"
                  />
                </template>
                <template v-else-if="activeNode.data.type == 'TableJoin'">
                  <table-join-optoin
                    v-model="activeNode.data"
                    :get-source="getSourceNode"
                    @change="updataNode"
                  />
                </template>
                <template v-else-if="activeNode.data.type == 'EsOutput'">
                  <es-output-optoin
                    v-model="activeNode.data"
                    @change="changeEsOutput"
                    :get-source="getSourceNode"
                  />
                </template>
                <template v-else-if="activeNode.data.type == 'SqlInput'">
                  <sql-input-optoin
                    v-model="activeNode.data"
                    @change="changeSqlInput"
                  />
                </template>
                <template  v-else-if="activeNode.data.type == 'kafaInput'">
                  <kafa-input-optoin
                    v-model="activeNode.data"
                    @change="changeOption"
                  />
                </template>
                <template
                  v-else-if="['Messages'].indexOf(activeNode.data.type) > -1"
                >
                  <messages-optoin
                    v-model="activeNode.data"
                    :get-source="getSourceNode"
                    @change="updataNode"
                  />
                </template>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="基础设置" force-render>
              <div class="set_detail">
                <a-row :gutter="[0, 10]">
                  <a-col :span="6" class="a_label">大小：</a-col>
                  <a-col :span="8">
                    <a-input-number
                      placeholder="宽度"
                      :min="0"
                      :precision="0"
                      :step="1"
                      v-model.lazy="activeNode.size.width"
                      @change="
                        changeEndJob();
                        updataNode(true);
                      "
                  /></a-col>
                  <a-col :span="1"></a-col>
                  <a-col :span="8">
                    <a-input-number
                      placeholder="高度"
                      :min="0"
                      :precision="0"
                      :step="1"
                      v-model.lazy="activeNode.size.height"
                      @change="
                        changeEndJob();
                        updataNode(true);
                      "
                    />
                  </a-col>
                </a-row>
                <a-row :gutter="[0, 10]">
                  <a-col :span="6" class="a_label">位置：</a-col>
                  <a-col :span="8">
                    <a-input-number
                      placeholder="X"
                      v-model.lazy="activeNode.position.x"
                      :step="1"
                      :precision="0"
                      @change="
                        changeEndJob();
                        updataNode(true);
                      "
                  /></a-col>
                  <a-col :span="1"></a-col>
                  <a-col :span="8">
                    <a-input-number
                      placeholder="Y"
                      :step="1"
                      :precision="0"
                      v-model.lazy="activeNode.position.x"
                      @change="
                        changeEndJob();
                        updataNode(true);
                      "
                    />
                  </a-col>
                </a-row>
                <a-row :gutter="[0, 10]">
                  <a-col :span="6" class="a_label">介绍：</a-col>
                  <a-col :span="17">
                    <a-textarea
                      v-model.lazy="activeNode.data.description"
                      placeholder="请输入组件介绍信息"
                      :auto-size="{ minRows: 3, maxRows: 6 }"
                      @change="
                        changeEndJob();
                        updataNode();
                      "
                    />
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-button
              slot="tabBarExtraContent"
              @click="reduction"
              icon="close"
            ></a-button>
          </a-tabs>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </a-drawer>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less">
.processDesignerCard {
  .ant-drawer-body {
    padding: 0;
    height: 100%;
    .ant-layout {
      height: 100%;
      .api_tool {
        text-align: right;
      }
      .tool_bar {
        background: #fff;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #e9e9e9;
        position: relative;
        padding: 0;
        .a_back {
          width: 48px;
          height: 48px;
          border: 0;
          font-size: 20px;
          color: rgba(0, 0, 0, 0.7);
          border-radius: 0;
          border-right: 1px solid #e9e9e9;
          border-bottom: 1px solid #e9e9e9;
          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }

      .base_from {
        padding: 0;
        width: 400px;
        height: 100%;
      }

      .design_controls {
        height: 100%;
        .controls_List {
          height: calc(100% - 34px);
          .start_drag {
            width: 100%;
            display: inline-block;
          }
          .vxe-body--row {
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .design_content {
        padding: 6px;
        height: 100%;
        .ant-tabs {
          height: 100%;
          .ant-tabs-bar {
            border: 0;
          }
          .ant-tabs-nav {
            height: 100%;
            .ant-tabs-tab {
              background: #eff2fd;
              font-weight: 400;
              position: relative;
              text-align: center;
              i {
                font-size: 12px;
              }
              &::before {
                content: "";
                position: absolute;
                border-right: 1px solid #dedede;
                right: 0;
                top: 8px;
                bottom: 8px;
                z-index: 0;
              }

              &:last-child {
                &::before {
                  display: none;
                }
              }
              &.ant-tabs-tab-active {
                background: #ffffff;
                border-radius: 4px;
                margin-left: -1px;
                z-index: 1;
                &::before {
                  display: none;
                }
              }
            }
          }
          .ant-tabs-content {
            height: 100%;

            margin-top: -15px;
            .ant-tabs-tabpane {
              background: #fff;
              padding: 12px;
              position: relative;
              .tool__container {
                position: absolute;
                z-index: 1;
                padding: 3px 10px;
                top: 10px;
                right: 20px;
                .ant-input-number {
                  width: 65px;
                  color: #2d5afa;
                  font-size: 12px;
                }
                .ant-btn {
                  padding: 0 10px;
                  font-weight: inherit;
                  color: #2d5afa;
                  font-size: 12px;
                  i {
                    font-size: 14px;
                  }
                  span {
                    margin-left: 2px !important;
                  }
                }
              }
            }
          }
        }

        .drag-zone {
          height: 100%;
          .drag-content {
            overflow: auto;
          }

          .setBody {
            height: 100%;
          }
          .testBody {
            height: 200px;

            .log_body {
              width: 100%;
              height: calc(100% - 40px);
            }
          }
          .handle {
            height: 10px;
            text-align: center;
            font-size: 20px;
            line-height: 0px;
            background: #f1f3f4;
            i {
              margin-top: -5px;
            }
          }
        }
      }

      .spin {
        width: 100%;
        height: 100%;
      }
      .designer_container {
        width: 100%;
        height: 100%;
        min-height: 700px;
        position: relative;

        .x6-node foreignObject > body {
          display: initial;
        }
        .x6-widget-stencil {
          background-color: #fff;
        }
        .x6-widget-stencil-title {
          background-color: #fff;
          display: none;
        }
        .x6-widget-stencil-group-title {
          background-color: #fff !important;
        }
        .x6-widget-transform {
          margin: -1px 0 0 -1px;
          padding: 0px;
          border: 1px dashed #239edd;
        }
        .x6-widget-transform > div {
          border: 1px solid #239edd;
        }
        .x6-widget-transform > div:hover {
          background-color: #3dafe4;
        }
        .x6-widget-transform-active-handle {
          background-color: #3dafe4;
        }
        .x6-widget-transform-resize {
          border-radius: 0;
        }
        .x6-widget-selection-inner {
          border: 1px solid #239edd;
        }
        .x6-widget-selection-box {
          opacity: 0;
        }
      }

      .set_body {
        width: 400px;
        height: 100%;
        padding: 0;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
        .ant-tabs {
          height: 100%;
          .ant-tabs-content {
            height: 100%;
            .ant-tabs-tabpane {
              height: calc(100% - 70px);
            }
          }
        }
        .set_test_detail {
          padding-top: 10px;
          .ant-select {
            margin-top: 10px;
            width: 100%;
          }
          .a_label {
            margin-top: 10px;
            line-height: 32px;
            font-size: 14px;
            font-weight: 400;
            text-align: right;
            color: #000000;
          }
        }
        .set_detail {
          height: 100%;
          overflow: auto;
          .ant-select {
            width: 100%;
          }
          .a_label {
            line-height: 32px;
            font-size: 12px;
            font-weight: 500;
            text-align: right;
            color: #000000;
          }
          .db_source_search {
            font-size: 14px;
            padding: 0;
          }
          .ant-card-head-title {
            font-size: 12px;
          }
        }
        .ant-btn.ant-btn-link {
          font-size: 12px;
        }
      }
    }
  }
}
.ant-popover.btn_l .ant-btn-sm {
  padding: 2px 12px;
}

.set_mapping_table_body {
  height: calc(100vh - 190px);
}
</style>
