<template>
  <div class="start-event">
    <a-form
      ref="formRef"
      :model="node"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :disabled="data.componentDisabled"
    >
      <a-form-item label="节点标识">
        <a-input v-model:value="node.id" placeholder="请输入" readonly />
      </a-form-item>
      <a-divider plain="true">执行操作</a-divider>
      <a-tabs v-model:activeKey="node.executeType" type="card" size="small" centered="true">
        <a-tab-pane key="1" tab="执行SQL">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-alert
              message="sql参数说明"
              description="参数有 @processId流程进程主键 @code上一步执行码 @userId流程发起人Id @userAccount流程发起人账号 @companyId流程发起人公司 @departmentId流程发起人部门;
              @userId2上一步审核人Id @userAccount2上一步审核人账号 @companyId2上一步审核人公司 @departmentId2上一步审核人部门;
              "
              type="info"
              show-icon
            />
            <a-space-compact block>
              <a-select
                v-model:value="node.sqlDb"
                placeholder="请选择执行SQL数据库"
                :options="sqlOptions"
                :field-names="{ label: 'text', value: 'id', options: 'childNodes' }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="node.sqlStr"
                placeholder="请填写SQL语句"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="node.sqlStrRevoke"
                placeholder="请填写SQL语句(撤销)"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="2" tab=".NET方法">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-alert
              message="IOC说明"
              description="注意：编写一个继承IWorkFlowMethod的类
              "
              type="info"
              show-icon
            />
            <a-space-compact block>
              <a-textarea
                v-model:value="node.ioc"
                placeholder="IOC名称"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="node.iocRevoke"
                placeholder="IOC名称(撤销)"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="3" tab="第三方接口">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-alert
              message="接口参数说明"
              description="注意：配置支持Post方法的接口,json数据格式。{
                processId:'流程发起实例主键',userId:'流程发起人Id',userAccount:'流程发起人账号',companyId:'流程发起人公司',departmentId:'流程发起人部门',code:'上一步执行码',
                userId2:'上一步审核人Id',userAccount2:'上一步审核人账号',companyId2:'上一步审核人公司',departmentId2:'上一步审核人部门'
                }
              "
              type="info"
              show-icon
            />
            <a-space-compact block>
              <a-textarea
                v-model:value="node.apiUrl"
                placeholder="接口地址"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="node.apiUrlRevoke"
                placeholder="接口地址(撤销)"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, defineProps, ref, watch, onMounted } from 'vue';
  import { flowStore } from '@/store/modules/flow';
  import { getLoadDataBaseLinkTree } from '@/api/demo/system';

  const flowWfDataStore = flowStore();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  // 表单选择声明
  const props = defineProps({
    element: {
      type: Object,
      default: () => {
        return {};
      },
    },
    pageType: String,
  });
  interface dataType {
    columns: any;
    formRelations: any;
    elementData: any;
    componentDisabled: boolean;
    formOpen: boolean;
    formVerisons: any;
    formName: string;
  }
  const data: dataType = reactive({
    columns: [
      {
        title: '名称',
        dataIndex: 'label',
      },
      {
        title: '字段',
        dataIndex: 'field',
      },
      {
        title: '必填',
        dataIndex: 'required',
      },
      {
        title: '编辑',
        dataIndex: 'disabled',
      },
      {
        title: '查看',
        dataIndex: 'ifShow',
      },
    ],
    formRelations: [],
    elementData: props.element,
    componentDisabled: props.pageType == 'detail' ? true : false,
    formOpen: false,
    formVerisons: [],
    formName: '',
  });
  let node: any = ref({});
  watch(
    () => props.element,
    (newVal) => {
      if (newVal.type == 'bpmn:ScriptTask') {
        const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
        if (currentNode) {
          node.value = currentNode;
        } else {
          node.value = newVal;
        }
      }
    },
  );
  const sqlOptions = ref([]);
  async function getSQL() {
    const data = await getLoadDataBaseLinkTree();
    let res: any = [];
    data.forEach((element) => {
      if (element.childNodes == null) {
        element.childNodes = [];
      }
      let point = {};
      if (element.id == 'hcsystemdb') {
        point = {
          id: '1',
          text: '常用数据库',
          childNodes: [
            {
              id: element.id,
              text: element.text,
            },
          ],
        };
        res.push(point);
      } else {
        res.push(element);
      }
    });
    sqlOptions.value = res;
  }
  onMounted(() => {
    getSQL();
    if (props.element.type == 'bpmn:ScriptTask') {
      const currentNode = flowWfDataStore.getWfDataNode(props.element.id);
      if (currentNode) {
        node.value = currentNode;
      } else {
        node.value = props.element;
      }
    }
  });
</script>
<style lang="less" scoped>
  .site-space-compact-wrapper {
    width: 100%;

    .ant-select {
      width: 100%;
    }
  }

  ::v-deep .ant-tabs {
    padding: 0 !important;
  }

  ::v-deep .ant-space {
    width: 90%;
    margin-left: 5%;

    .ant-space-item {
      width: 100%;

      button {
        width: 20%;
      }
      .ant-btn-dangerous {
        width: 100%;
      }
    }
  }
  .l-rblock {
    width: 100%;
    height: 100%;
    background: #f0f2f5;
  }
  .l-page-pane {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 794px;
    overflow: hidden auto;
    background: #fff;
    border-radius: 4px;
    margin: auto;
    padding: 24px;
  }
  .addDataBaseTableBox {
    border: 1px dashed #f0f0f0;
    text-align: center;
    cursor: pointer;
    margin-top: -20px;
    &:hover {
      border-color: #409eff;
    }
  }
  .connectTableTitle {
    padding-top: 20px;
  }
  .formLine {
    height: 50px;
  }
</style>
