<!--
 * @Author: Jason Liu
 * @Date: 2022-05-27 10:45:32
 * @Desc: 流程设计器工具
-->
<template>
  <div class="designer_main_container">
    <a-tabs
      size="small"
      v-model="tool"
      class="stencil_tool"
      v-if="['flow', 'job'].indexOf(jobType) > -1"
    >
      <a-tab-pane key="1" tab="设计控件"></a-tab-pane>
      <a-tab-pane key="2" tab="数据控件"></a-tab-pane>
    </a-tabs>
    <div
      id="stencil"
      v-show="tool == '1'"
      ref="stencil_container"
      :class="[
        'stencil_container',
        ['flow', 'job'].indexOf(jobType) > -1 ? '' : 'stencil_max',
      ]"
    ></div>
    <div v-if="tool == '2'" class="stencil_container">
      <a-input-search placeholder="请输入关键字" />
      <div class="controls_List">
        <vxe-table
          show-overflow
          :show-header="false"
          resizable
          :row-config="{ isHover: true }"
          :data="controlsList"
          border="none"
          height="100%"
          ref="controlsList"
          :tree-config="{
            reserve: true,
            transform: true,
            rowField: 'id',
            indent: 2,
            lazy: true,
            trigger: 'row',
            hasChild: 'hasChild',
            loadMethod: loadToolChildrenMethod,
          }"
        >
          <vxe-column field="title" tree-node>
            <template #default="{ row }">
              <template v-if="row.isGroup">
                <svg-icon type="icon_topic" class="tree_iFcon" />
                <span> {{ row.name }}</span>
              </template>
              <span
                v-else
                :data-id="row.id"
                :data-type="row.type"
                @mousedown="startDrag"
              >
                <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="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
    </div>
    <div
      id="designer_container"
      class="designer_container"
      ref="designer_container"
    ></div>
    <div class="set_body" v-if="isSet">
      <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="updataNode(false)"
                />
              </a-col>
            </a-row>
            <template
              v-if="
                ['TableInput', 'TableOutput'].indexOf(activeNode.data.type) > -1
              "
            >
              <!-- 表库输入控件 -->
              <!-- 表库输出控件 -->
              <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.dbId"
                    @change="changeDbsDatas"
                  >
                    <a-select-option
                      :value="item.dbId"
                      :key="item.dbId"
                      v-for="item in metadatas.dataSource"
                    >
                      {{ item.dbName }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">Schema：</a-col>
                <a-col :span="17">
                  <a-select
                    :placeholder="
                      !activeNode.data.dbId
                        ? '请选择数据源信息'
                        : '请选择schema'
                    "
                    v-model="activeNode.data.schemaId"
                    @change="changeSchema"
                    :options="
                      metadatas.schema.map((item) => {
                        return {
                          value: item.schemaId,
                          label: item.schemaCode,
                        };
                      })
                    "
                  >
                  </a-select>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">数据表：</a-col>
                <a-col :span="17">
                  <a-select
                    :placeholder="
                      !activeNode.data.dbId
                        ? '请选择数据源信息'
                        : '请选择数据表'
                    "
                    v-model="activeNode.data.tableCode"
                    @change="chaneDataTables"
                    :show-search="true"
                    :options="
                      metadatas.dataTables.map((item) => {
                        return {
                          value: item.tableCode,
                          label: item.tableCode,
                        };
                      })
                    "
                  >
                  </a-select>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">事件时间：</a-col>
                <a-col :span="17">
                  <a-select
                    :placeholder="
                      !activeNode.data.tableCode
                        ? '请选择数据表'
                        : '请选择事件执行事件时间字段'
                    "
                    v-model="activeNode.data.eventTimeColumn"
                    @change="changeEventTimeColumn"
                    :show-search="true"
                    :allow-clear="true"
                    :options="
                      activeNode.data.tableColumns
                        .filter((item) => {
                          return ['timestamp'].indexOf(item.columnType) > -1;
                        })
                        .map((item) => {
                          return {
                            value: item.columnName,
                            label: item.columnName,
                          };
                        })
                    "
                  >
                  </a-select>
                </a-col>
              </a-row>
              <template v-if="activeNode.data.type == 'TableOutput'">
                <a-row :gutter="[0, 10]">
                  <a-col :span="6" class="a_label">映射关系：</a-col>
                  <a-col :span="17">
                    <a-alert
                      v-if="!activeNode.data.dbId"
                      message="请选择数据源"
                      type="warning"
                    />
                    <a-alert
                      v-else-if="!activeNode.data.tableCode"
                      message="请选择数据表"
                      type="warning"
                    />
                    <a-alert
                      v-else-if="!activeNode.data.inputTable.columns.length"
                      message="请选择连接输入来源"
                      type="warning"
                    />
                    <a-button
                      type="link"
                      v-else
                      @click.native="
                        () => {
                          setOutTables.setMap = true;
                          setOutTables.str = undefined;
                          setOutTables.overlay = false;
                        }
                      "
                      >点击设置关系</a-button
                    >
                    <a-modal
                      cancelText="关闭"
                      okText="完成"
                      :width="'80%'"
                      :destroy-on-close="true"
                      v-model="setOutTables.setMap"
                      :centered="true"
                      class="body_container"
                      size="small"
                    >
                      <template slot="title">
                        设置映射关系
                        {{
                          activeNode.data.mapping.filter((item) => {
                            return !!item.source.columnName;
                          }).length
                        }}
                        / {{ activeNode.data.mapping.length }}</template
                      >
                      <a-row :gutter="[16, 16]">
                        <a-col :span="20">
                          <span class="search_label">输出列名：</span>
                          <a-input-search
                            placeholder="请输入输出列名"
                            v-model="setOutTables.str"
                            @search="searchOutPutList"
                          />
                          &nbsp;
                          <a-checkbox
                            v-model="setOutTables.overlay"
                            @change="searchOutPutList"
                          >
                            显示未映射输入列
                          </a-checkbox>
                        </a-col>
                        <a-col :span="4" class="api_tool">
                          <a-button type="primary" @click="searchOutPutList">
                            搜索
                          </a-button>
                        </a-col>
                      </a-row>
                      <br />
                      <vxe-table
                        show-overflow
                        :row-config="{ isHover: true }"
                        stripe
                        height="520"
                        :data="activeNode.data.mapping"
                        ref="outputtable"
                        class="node_mapping_table"
                        :edit-config="{ trigger: 'click', mode: 'cell' }"
                        :row-class-name="setRowDataClass"
                        :filter-config="{ showIcon: false }"
                        :sort-config="{ trigger: 'cell' }"
                      >
                        <vxe-column
                          title="输出列名"
                          field="target.columnName"
                          sortable
                          :filters="[{ data: '' }]"
                          :filter-method="filterOutTableName"
                        >
                          <template #default="{ row }">
                            <svg-icon
                              class="icon_primary_key"
                              type="icon_primary_key"
                              v-if="row.target.pk"
                            />

                            <span
                              :class="[
                                row.target.notNull
                                  ? 'ant-form-item-required'
                                  : '',
                              ]"
                            >
                              {{
                                row.target.description
                                  ? `${row.target.description}(${row.target.columnName})`
                                  : row.target.columnName
                              }}
                            </span>
                          </template>
                        </vxe-column>
                        <vxe-column
                          title="输出列类型"
                          width="120"
                          field="target.columnType"
                          sortable
                        >
                          <template #default="{ row }">
                            <span> {{ row.target.columnType }}</span>
                          </template>
                        </vxe-column>
                        <vxe-column
                          title="输入列名"
                          field="source.columnName"
                          :edit-render="{}"
                          sortable
                          :filters="[{ data: '' }]"
                          :filter-method="filterOutTableSource"
                        >
                          <template #default="{ row }">
                            <span v-if="row.source.columnName">
                              <svg-icon
                                v-if="row.source.type == 'fun'"
                                type="icon_function"
                              />
                              <span
                                class="span_as"
                                v-if="row.source.tableAsName && false"
                              >
                                {{ row.source.tableAsName }}.
                              </span>
                              {{
                                row.source.description
                                  ? `${row.source.description}(${
                                      row.source.asName || row.source.columnName
                                    })`
                                  : row.source.asName || row.source.columnName
                              }}
                            </span>
                          </template>
                          <template #edit="{ row }">
                            <a-input-group>
                              <a-row>
                                <a-col :span="20">
                                  <a-input
                                    v-if="row.source.type == 'fun'"
                                    v-model.lazy="row.source.columnName"
                                    placeholder="请输出映射内容"
                                    @change="setTableOutMapping(row)"
                                  ></a-input>
                                  <template v-else>
                                    <a-select
                                      placeholder="请选择映射字段"
                                      v-model="row.source.select"
                                      @change="setTableOutMapping(row)"
                                      style="width: 100%"
                                      show-search
                                      :allow-clear="true"
                                      :options="
                                        activeNode.data.inputTable.columns.map(
                                          (item) => {
                                            return {
                                              value: item.tableAsName
                                                ? `${item.tableAsName}.${item.columnName}`
                                                : item.columnName,
                                              label:
                                                item.asName || item.columnName,
                                            };
                                          }
                                        )
                                      "
                                    >
                                    </a-select>
                                  </template>
                                </a-col>
                                <a-col :span="4">
                                  <a-dropdown>
                                    <a-menu
                                      slot="overlay"
                                      @click="
                                        (e) => {
                                          $set(row.source, 'type', e.key);
                                        }
                                      "
                                    >
                                      <a-menu-item key="field">
                                        <svg-icon type="icon_field" /> 字段
                                      </a-menu-item>
                                      <a-menu-item key="fun">
                                        <svg-icon type="icon_function" /> 函数
                                      </a-menu-item>
                                    </a-menu>
                                    <a-button>
                                      <svg-icon
                                        v-if="row.source.type == 'fun'"
                                        type="icon_function"
                                      />
                                      <svg-icon v-else type="icon_field" />
                                    </a-button>
                                  </a-dropdown>
                                </a-col>
                              </a-row>
                            </a-input-group>
                          </template>
                        </vxe-column>
                        <vxe-column title="输入列类型" width="120">
                          <template #default="{ row }">
                            <span> {{ row.source.columnType || "-" }}</span>
                          </template>
                        </vxe-column>
                        <template #empty>
                          <a-empty
                            :image-style="{
                              height: '80px',
                            }"
                          >
                            <span slot="description"> 暂无数据 </span>
                          </a-empty>
                        </template>
                      </vxe-table>
                      <template slot="footer">
                        <a-button @click="setOutTables.setMap = false">
                          取消
                        </a-button>
                        <a-button
                          type="primary"
                          @click="outTablesSmartFill"
                          icon="android"
                        >
                          智能填充
                        </a-button>
                        <a-button
                          type="primary"
                          @click="
                            () => {
                              let index = activeNode.data.mapping.filter(
                                (item) => {
                                  return (
                                    item.target.notNull &&
                                    !item.source.columnName
                                  );
                                }
                              ).length;
                              if (index > 0) {
                                this.$message.error(
                                  '存在非空列为设置输入列名信息！'
                                );
                              } else {
                                setOutTables.setMap = false;
                              }
                            }
                          "
                        >
                          确定
                        </a-button>
                      </template>
                    </a-modal>
                  </a-col>
                </a-row>
                <a-row :gutter="[0, 10]" v-if="false">
                  <a-col :span="24">
                    <a-card class="no_border" size="small">
                      <template slot="title">
                        输入来源:{{ activeNode.data.inputTable.columns.length }}
                      </template>
                      <a-alert
                        v-if="!activeNode.data.inputTable.tableCode"
                        message="请选择连接输入来源"
                        type="warning"
                      />
                      <template v-else>
                        <vxe-table
                          show-overflow
                          :row-config="{ isHover: true }"
                          stripe
                          height="160"
                          :data="activeNode.data.inputTable.columns"
                        >
                          <vxe-column
                            :title="activeNode.data.inputTable.tableName"
                          >
                            <template #default="{ row }">
                              <svg-icon
                                class="icon_primary_key"
                                type="icon_primary_key"
                                v-if="row.pk"
                              />
                              <span> {{ row.columnName }}</span>
                            </template>
                          </vxe-column>

                          <template #empty>
                            <a-empty
                              :image-style="{
                                height: '80px',
                              }"
                            >
                              <span slot="description"> 暂无数据 </span>
                            </a-empty>
                          </template>
                        </vxe-table>
                      </template>
                    </a-card>
                  </a-col>
                </a-row>
              </template>
              <a-row :gutter="[0, 10]">
                <a-col :span="24">
                  <out-columns
                    v-model="activeNode.data"
                    @reload="chaneDataTables(true)"
                  />
                </a-col>
              </a-row>
            </template>
            <template v-else-if="activeNode.data.type == 'SubJob'">
              <!-- 作业编排控件 -->
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">集成作业：</a-col>
                <a-col :span="15">
                  <a-select
                    placeholder="请选择要作业列表"
                    v-model="activeNode.data.jobId"
                    :show-search="true"
                    :filter-option="filterOption"
                    @change="changeSubJobList"
                    :options="
                      setSubJobConfig.jobs.map((item) => {
                        return {
                          value: item.id,
                          label: item.jobName,
                        };
                      })
                    "
                  >
                  </a-select>
                </a-col>
                <a-col :span="2">
                  <a-button
                    icon="plus"
                    @click="setSubJobConfig.subEdit = true"
                  ></a-button>
                  <processDesigner
                    v-model="setSubJobConfig.subEdit"
                    @update="changeSubJobList"
                    :job-type="'job'"
                  />
                </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="
                            () => {
                              setSubJobConfig.subEdit = true;
                            }
                          "
                        >
                          编辑
                        </a-button>

                        <processDesigner
                          v-model="setSubJobConfig.subEdit"
                          @update="changeSubJobList"
                          :job-type="activeNode.data.jobType"
                          :process-id="activeNode.data.jobId"
                        />
                      </template>
                      <vxe-table
                        show-overflow
                        show-header-overflow
                        :row-config="{ isHover: true }"
                        :show-header="false"
                        stripe
                        height="260"
                        :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="{
                              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-col>
                <a-col :span="15">
                  <a-select
                    placeholder="请选择要第一例作业"
                    v-model="activeNode.data.jobId"
                    :show-search="true"
                    :filter-option="filterOption"
                    @change="changeSubJobList"
                    :options="
                      setSubJobConfig.transforms.map((item) => {
                        return {
                          value: item.id,
                          label: item.jobName,
                        };
                      })
                    "
                  >
                  </a-select>
                </a-col>
                <a-col :span="2">
                  <a-button
                    icon="plus"
                    @click="setSubJobConfig.subEdit = true"
                  ></a-button>
                  <processDesigner
                    v-model="setSubJobConfig.subEdit"
                    @update="changeSubJobList"
                    :job-type="'transform'"
                  />
                </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="
                            () => {
                              setSubJobConfig.subEdit = true;
                            }
                          "
                        >
                          编辑
                        </a-button>

                        <processDesigner
                          v-model="setSubJobConfig.subEdit"
                          @update="changeSubJobList"
                          :process-id="activeNode.data.jobId"
                          :job-type="activeNode.data.jobType"
                        />
                      </template>
                      <vxe-table
                        show-overflow
                        show-header-overflow
                        :row-config="{ isHover: true }"
                        :show-header="false"
                        stripe
                        height="260"
                        :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="{
                              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 == 'TableJoin'">
              <!-- 表库连接控件 -->
              <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.tableCode"
                    @change="changeTableJoinCode()"
                  />
                </a-col>
              </a-row>
              <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.tableName"
                    @change="updataNode()"
                  />
                </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.tables.length }}
                    </template>
                    <a-alert
                      v-if="activeNode.data.tables.length == 0"
                      message="请选择连接输入来源"
                      type="warning"
                    />
                    <template v-else>
                      <template slot="extra">
                        <a-button
                          type="link"
                          @click="setTableJoinConfig.setJoin = true"
                        >
                          设置关联关系
                        </a-button>
                        <set-table-join v-model="setTableJoinConfig.setJoin" />
                      </template>
                      <vxe-table
                        show-overflow
                        show-header-overflow
                        :row-config="{ isHover: true }"
                        stripe
                        height="200"
                        :data="activeNode.data.tables"
                      >
                        <vxe-column
                          :title="
                            activeNode.data.tableCode || activeNode.data.name
                          "
                        >
                          <template #default="{ row }">
                            <span>
                              <svg-icon
                                v-if="row.isMain"
                                type="icon_table_main"
                              />
                              {{
                                row.tableName && row.tableCode
                                  ? `${row.tableName}(${row.tableCode})`
                                  : row.tableCode
                              }}
                              <template v-if="row.tableCode != row.asName">
                                <span class="span_as"> as </span>
                                {{ row.asName }}
                              </template>
                            </span>
                          </template>
                        </vxe-column>
                        <template #empty>
                          <a-empty
                            :image-style="{
                              height: '80px',
                            }"
                          >
                            <span slot="description"> 暂无数据 </span>
                          </a-empty>
                        </template>
                      </vxe-table>
                    </template>
                  </a-card>
                </a-col>
              </a-row>

              <a-row>
                <a-col :span="24">
                  <a-card class="no_border" size="small">
                    <template slot="title">
                      输出字段:{{ activeNode.data.columns.length }}
                    </template>
                    <a-alert
                      v-if="activeNode.data.tables.length == 0"
                      message="请选择连接输入来源"
                      type="warning"
                    />
                    <template v-else>
                      <template slot="extra">
                        <a-button
                          type="link"
                          @click="setTableJoinConfig.setColumns = true"
                        >
                          高级设置
                        </a-button>
                        <set-tables-outs
                          v-model="setTableJoinConfig.setColumns"
                        />
                      </template>
                      <vxe-table
                        show-overflow
                        :row-config="{ isHover: true }"
                        stripe
                        height="260"
                        :data="activeNode.data.columns"
                        :row-class-name="setRowDataClass"
                      >
                        <vxe-column
                          :title="
                            activeNode.data.tableCode || activeNode.data.name
                          "
                          field="columnName"
                          sortable
                        >
                          <template #default="{ row }">
                            <svg-icon
                              class="icon_primary_key"
                              type="icon_primary_key"
                              v-if="row.pk"
                            />
                            <span>
                              <span
                                class="span_as"
                                v-if="row.tableAsName != row.tableCode"
                              >
                                {{ row.tableAsName }}.
                              </span>

                              {{
                                row.description
                                  ? `${row.description}(${row.columnName})`
                                  : row.columnName
                              }}
                              <span v-if="row.columnName != row.asName">
                                <span class="span_as"> as </span>
                                {{ row.asName }}
                              </span>
                            </span>
                          </template>
                        </vxe-column>

                        <template #empty>
                          <a-empty
                            :image-style="{
                              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 == 'TableOutputSql'">
              <!-- SQL输入 -->
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">输入类型：</a-col>
                <a-col :span="17">
                  <a-radio-group
                    v-model="activeNode.data.modelType"
                    button-style="solid"
                    @change="changeDwsAndAdsModelType"
                  >
                    <a-radio-button value="dws">DWS</a-radio-button>
                    <a-radio-button value="ads">ADS</a-radio-button>
                  </a-radio-group>
                </a-col>
              </a-row>
              <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.tableCode"
                    :show-search="true"
                    @change="changeDwsAndAdsTables"
                    :options="
                      metadatas.dwsAndads[activeNode.data.modelType].map(
                        (item) => {
                          return {
                            value: item.tableName,
                            label: item.tableName,
                          };
                        }
                      )
                    "
                  >
                  </a-select>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">事件时间：</a-col>
                <a-col :span="17">
                  <a-select
                    :placeholder="
                      !activeNode.data.tableCode
                        ? '请选择数据表'
                        : '请选择事件执行事件时间字段'
                    "
                    v-model="activeNode.data.eventTimeColumn"
                    :show-search="true"
                    :allow-clear="true"
                    @change="updataNode"
                    :options="
                      activeNode.data.columns
                        .filter((item) => {
                          return ['timestamp'].indexOf(item.columnType) > -1;
                        })
                        .map((item) => {
                          return {
                            value: item.columnName,
                            label: item.columnName,
                          };
                        })
                    "
                  >
                  </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.columns.length }}
                    </template>
                    <a-alert
                      v-if="!activeNode.data.tableCode"
                      message="请选择连接输入来源"
                      type="warning"
                    />
                    <template v-else>
                      <vxe-table
                        show-overflow
                        show-header-overflow
                        :row-config="{ isHover: true }"
                        stripe
                        height="260"
                        :row-class-name="setRowDataClass"
                        :data="activeNode.data.columns"
                      >
                        <vxe-column :title="activeNode.data.tableCode">
                          <template #default="{ row }">
                            <svg-icon
                              class="icon_primary_key"
                              type="icon_primary_key"
                              v-if="row.pk"
                            />
                            <span>
                              {{
                                row.description
                                  ? `${row.description}(${row.columnName})`
                                  : row.columnName
                              }}
                            </span>
                          </template>
                        </vxe-column>

                        <template #empty>
                          <a-empty
                            :image-style="{
                              height: '80px',
                            }"
                          >
                            <span slot="description"> 暂无数据 </span>
                          </a-empty>
                        </template>
                      </vxe-table>
                    </template>
                  </a-card>
                </a-col>
              </a-row>
            </template>
            <template
              v-else-if="
                ['PerlConfig', 'perlConfig'].indexOf(activeNode.data.type) > -1
              "
            >
              <!-- 表库连接控件 -->
              <a-row :gutter="[0, 10]">
                <a-col :span="24">
                  <a-card class="no_border" title="配置内容" size="small">
                    <template #extra>
                      <a-button type="link" @click="setPerlConfig.show = true">
                        设置
                      </a-button>
                    </template>
                    <json-view :data="activeNode.data.config" />
                  </a-card>
                  <a-modal
                    title="设置"
                    cancelText="关闭"
                    okText="完成"
                    :width="'72%'"
                    :destroy-on-close="true"
                    v-model="setPerlConfig.show"
                    :centered="true"
                    @ok="
                      () => {
                        this.setPerlConfig.show = false;
                        this.activeNode.data.config = this.setPerlConfig.config;
                        this.updataNode();
                      }
                    "
                  >
                    <jsonEditor
                      v-model="setPerlConfig.config"
                      :show-btns="false"
                      :mode="'code'"
                      lang="zh"
                    />
                  </a-modal>
                </a-col>
              </a-row>
            </template>
            <template v-else-if="activeNode.data.type == 'WinningJob'">
              <!-- 任务调度 -->
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">任务类型：</a-col>
                <a-col :span="18">
                  <a-radio-group
                    v-model="activeNode.data.scheduleType"
                    button-style="solid"
                    @change="changeWinningJobMain"
                  >
                    <a-radio-button value="CRON">周期任务</a-radio-button>
                    <a-radio-button value="REALTIME">实时任务</a-radio-button>
                    <a-radio-button value="MANUAL">手动任务</a-radio-button>
                  </a-radio-group>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">执行器：</a-col>
                <a-col :span="17">
                  <a-select
                    v-model="activeNode.data.groupId"
                    placeholder="请选择执行器"
                    :options="executorList"
                    :show-search="true"
                    @change="changeWinningJobMain"
                  >
                  </a-select>
                </a-col>
              </a-row>
              <a-row :gutter="[0, 10]">
                <a-col :span="6" class="a_label">调度任务：</a-col>
                <a-col :span="17">
                  <a-select
                    :placeholder="
                      activeNode.data.groupId
                        ? '请选择执行器'
                        : '请选择调度任务'
                    "
                    v-model="activeNode.data.winningJobId"
                    :show-search="true"
                    :filter-option="filterOption"
                    :options="executorTaskList"
                    @change="changeWinningJobList()"
                  >
                  </a-select>
                </a-col>
              </a-row>
            </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="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="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="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="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="updataNode"
                />
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="结果" v-if="false">
          <div class="set_detail">
            <json-view :data="activeNode.data" />
          </div>
        </a-tab-pane>
        <a-button
          slot="tabBarExtraContent"
          @click="isSet = false"
          icon="close"
        ></a-button>
      </a-tabs>
    </div>
  </div>
</template>

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

<style lang="less">
.designer_main_container {
  width: 100%;
  height: 100%;
  display: flex;
  border: 1px solid #dfe3e8;
  position: relative;
  .designer_container {
    width: calc(100% - 180px);
    height: 100%;
  }
  .stencil_tool {
    position: absolute;
    width: 180px;
    height: 42px;
    display: initial;
    border-right: 1px solid #dfe3e8;
    z-index: 1;
    background: #fff;
    .ant-tabs-nav {
      width: 100%;
      .ant-tabs-tab {
        font-size: 13px;
        text-align: center;
        width: 50%;
      }
    }
  }

  .stencil_container {
    width: 180px;
    height: calc(100% - 42px);
    border-right: 1px solid #dfe3e8;
    float: left;
    position: relative;
    margin-top: 42px;
    &.stencil_max {
      margin-top: 0;
      height: 100%;
    }
    .ant-input-search {
      margin: 0 5px;
      width: calc(100% - 10px);
    }
    .controls_List {
      height: calc(100% - 34px);
      .vxe-body--row {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .set_body {
    width: 400px;
    height: 100%;
    border-left: 1px solid #dfe3e8;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
    padding: 0 10px;
    .ant-tabs {
      height: 100%;
      .ant-tabs-content {
        height: 100%;
        .ant-tabs-tabpane {
          height: 100%;
          .set_detail {
            height: 85%;
            padding-bottom: 30px;
            overflow: auto;
            .ant-select {
              width: 100%;
            }
            .a_label {
              line-height: 32px;
              font-size: 12px;
              font-weight: 500;
              text-align: right;
              color: #000000;
            }
            .ant-card-head-title {
              font-size: 12px;
            }
          }
          .ant-btn.ant-btn-link {
            font-size: 12px;
          }
        }
      }
    }
  }

  .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 solid #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;
  }
}

.jsoneditor-poweredBy {
  display: none;
}

.jsoneditor-vue {
  height: 600px;
}
</style>
