<!-- 开始节点配置 -->
<template>
  <div class="user-task">
    <a-form
      ref="formRef"
      :model="node"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :disabled="data.componentDisabled"
    >
      <a-collapse v-model:activeKey="activeKey" accordion ghost>
        <a-collapse-panel key="1" header="基础配置">
          <a-form-item label="节点标识">
            <a-input v-model:value="node.id" placeholder="请输入" readonly />
          </a-form-item>
          <a-form-item label="继承表单">
            <a-switch v-model:checked="node.isInherit" @change="updateWfData('isInherit')" />
          </a-form-item>
          <a-form-item label="允许加签">
            <a-switch v-model:checked="node.isAddSign" @change="updateWfData('isAddSign')" />
          </a-form-item>
          <a-form-item label="允许转移">
            <a-switch v-model:checked="node.isTransfer" @change="updateWfData('isTransfer')" />
          </a-form-item>
          <a-form-item label="允许批量审核">
            <a-switch v-model:checked="node.isBatchAudit" @change="updateWfData('isBatchAudit')" />
          </a-form-item>
          <a-form-item label="自动同意规则">
            <a-select
              v-model:value="node.autoAgree"
              :options="data.atuoAgreeOptions"
              @change="updateWfData('autoAgree')"
            />
          </a-form-item>
          <a-form-item label="无对应处理人">
            <a-select
              v-model:value="node.noAuditor"
              @change="updateWfData('noAuditor')"
              :options="data.noAuditorOptions"
            />
          </a-form-item>
          <a-form-item label="驳回策略">
            <a-radio-group
              v-model:value="node.rejectType"
              name="checkboxgroup"
              @change="updateWfData('rejectType')"
              :options="[
                { value: '1', label: '驳回节点固定' },
                { value: '2', label: '能驳回到任何执行过节点' },
              ]"
            />
          </a-form-item>
          <a-form-item label="通知策略">
            <a-checkbox-group
              v-model:value="node.messageType"
              name="checkboxgroup"
              @change="updateWfData('messageType')"
              :options="[
                { value: '1', label: '短信' },
                { value: '2', label: '邮箱' },
                { value: '3', label: '微信' },
                { value: '4', label: '站内消息' },
              ]"
            />
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="审核人员设置">
          <a-space>
            <a-radio-group size="small">
              <a-radio-button value="1" @click="handlePostClick(false)">岗位</a-radio-button>
              <a-radio-button value="2" @click="handleRoleClick(false)">角色</a-radio-button>
              <a-radio-button value="3" @click="handleAccountClick(false)">用户</a-radio-button>
              <a-radio-button value="3" @click="handleLevelClick(false)">上下级</a-radio-button>
              <a-radio-button value="3" @click="handleNodeAuditorClick(false)"
                >节点执行人</a-radio-button
              >
              <a-radio-button value="3" @click="handleAuditorSqlClick(false)"
                >表字段</a-radio-button
              >
            </a-radio-group>
          </a-space>
          <a-table
            size="small"
            :columns="data.userColumns"
            :data-source="node.auditUsers"
            bordered
            @change="updateWfData('auditUsers')"
            :pagination="false"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="['name'].includes(column.dataIndex)">
                <div>
                  {{ text }}
                </div>
              </template>
              <template v-else-if="['type'].includes(column.dataIndex)">
                <div>
                  {{ typeFormat(text) }}
                </div>
              </template>
              <template v-else-if="['condition'].includes(column.dataIndex)">
                <div>
                  <a-select
                    v-model:value="record[column.dataIndex]"
                    :options="data.conditionOptions"
                    v-if="record.type == '2'"
                  />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name, false)">
                  <delete-outlined two-tone-color="#eb2f96" />
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="传阅人员设置">
          <a-space>
            <a-radio-group size="small">
              <a-radio-button value="1" @click="handlePostClick(true)">岗位</a-radio-button>
              <a-radio-button value="2" @click="handleRoleClick(true)">角色</a-radio-button>
              <a-radio-button value="3" @click="handleAccountClick(true)">用户</a-radio-button>
              <a-radio-button value="3" @click="handleLevelClick(true)">上下级</a-radio-button>
              <a-radio-button value="3" @click="handleNodeAuditorClick(true)"
                >节点执行人</a-radio-button
              >
              <a-radio-button value="3" @click="handleAuditorSqlClick(true)">表字段</a-radio-button>
            </a-radio-group>
          </a-space>
          <a-table
            size="small"
            :columns="data.userColumns"
            :data-source="node.lookUsers"
            bordered
            :pagination="false"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="['name'].includes(column.dataIndex)">
                <div>
                  {{ text }}
                </div>
              </template>
              <template v-else-if="['type'].includes(column.dataIndex)">
                <div>
                  {{ typeFormat(text) }}
                </div>
              </template>
              <template v-else-if="['condition'].includes(column.dataIndex)">
                <div>
                  <a-select
                    v-model:value="record[column.dataIndex]"
                    :options="data.conditionOptions"
                    v-if="record.type == '2'"
                    @change="updateWfData('lookUsers')"
                  />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name, true)">
                  <delete-outlined two-tone-color="#eb2f96" />
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </a-collapse-panel>
        <a-collapse-panel key="4" header="表单设置" v-if="!node.isInherit">
          <a-tabs
            v-model:activeKey="node.formType"
            type="card"
            size="small"
            centered="true"
            @change="tabsChange"
          >
            <a-tab-pane key="1" tab="自定义表单">
              <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                <a-space-compact block>
                  <a-input v-model:value="data.formName" placeholder="请选择表单" readonly />
                  <a-button @click="handleShow">选择</a-button>
                </a-space-compact>
                <a-space-compact block>
                  <a-select
                    v-model:value="node.formVerison"
                    placeholder="请选择表单版本"
                    @change="custmerformVerisonChange"
                    :options="data.formVerisons"
                    :fieldNames="{ value: 'id', label: 'createDate' }"
                  />
                </a-space-compact>
                <a-space-compact block>
                  <a-select
                    v-model:value="node.formRelationId"
                    placeholder="请选择流程关联字段"
                    @change="updateWfData('formRelationId')"
                    :options="data.formRelations"
                  />
                </a-space-compact>
              </a-space>
            </a-tab-pane>
            <a-tab-pane key="2" tab="系统表单">
              <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                <a-space-compact block>
                  <a-input
                    v-model:value="node.formUrl"
                    placeholder="请输入PC端表单地址"
                    @change="updateWfData('formUrl')"
                  />
                </a-space-compact>
                <a-space-compact block>
                  <a-input
                    v-model:value="node.formAppUrl"
                    placeholder="请输入APP端表单地址"
                    @change="updateWfData('formAppUrl')"
                  />
                </a-space-compact>
              </a-space>
            </a-tab-pane>
          </a-tabs>

          <a-divider plain="true">表单字段权限</a-divider>
          <a-table
            :columns="data.formColumns"
            :data-source="node.authFields"
            bordered
            :pagination="false"
            v-if="node.formType == 1"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="['label', 'fieldName'].includes(column.dataIndex)">
                <div>
                  {{ text }}
                </div>
              </template>
              <template v-else-if="['required', 'disabled', 'ifShow'].includes(column.dataIndex)">
                <div>
                  <a-switch v-model:checked="record[column.dataIndex]" size="small" />
                </div>
              </template>
            </template>
          </a-table>
          <a-table
            :columns="data.columns"
            :data-source="node.authFields"
            bordered
            :pagination="false"
            v-else
          >
            <template #bodyCell="{ column, record }">
              <template v-if="['label', 'fieldName'].includes(column.dataIndex)">
                <div>
                  <a-input v-model:value="record[column.dataIndex]" placeholder="请输入" />
                </div>
              </template>
              <template v-else-if="['required', 'disabled', 'ifShow'].includes(column.dataIndex)">
                <div>
                  <a-switch v-model:checked="record[column.dataIndex]" size="small" />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <delete-outlined
                  two-tone-color="#eb2f96"
                  @click="handleDeleteAuthField(record.field)"
                />
              </template>
            </template>
          </a-table>

          <a-divider plain="true" />
          <a-space v-if="node.formType != 1">
            <a-button
              @click="handleAddAuthField"
              width="100%"
              type="dashed"
              danger
              :icon="h(PlusOutlined)"
              >添加字段</a-button
            >
          </a-space>
        </a-collapse-panel>
        <a-collapse-panel key="5" header="按钮设置">
          <a-table
            size="small"
            :columns="data.columns"
            :data-source="node.btnlist"
            bordered
            @change="updateWfData('btnlist')"
            :pagination="false"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="['name', 'code'].includes(column.dataIndex)">
                <div>
                  <a-input
                    v-model:value="record[column.dataIndex]"
                    placeholder="请输入"
                    @change="updateWfData('btnlist')"
                  />
                </div>
              </template>
              <!-- 删除了签章的switch -->
              <template v-else-if="['isNextAuditor', 'hidden'].includes(column.dataIndex)">
                <div>
                  <a-switch
                    v-model:checked="record[column.dataIndex]"
                    @change="updateWfData('btnlist')"
                  />
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <delete-outlined two-tone-color="#eb2f96" @click="handleDeleteBtns(record.code)" />
              </template>
            </template>
          </a-table>
          <a-divider plain="true" />
          <a-space>
            <a-button
              @click="handleAddBtns"
              width="100%"
              type="dashed"
              danger
              :icon="h(PlusOutlined)"
            >
              添加字段</a-button
            >
          </a-space>
        </a-collapse-panel>
        <a-collapse-panel key="6" header="会签设置">
          <a-form-item label="是否会签">
            <a-switch
              v-model:checked="node.isCountersign"
              @change="updateWfData('isCountersign')"
            />
          </a-form-item>
          <template v-if="node.isCountersign">
            <a-form-item label="审核方式">
              <a-radio-group
                v-model:value="node.countersignType"
                name="checkboxgroup"
                @change="updateWfData('countersignType')"
                :options="[
                  { value: '1', label: '并行' },
                  { value: '2', label: '串行' },
                ]"
              />
            </a-form-item>
            <template v-if="node.countersignType == 1">
              <a-form-item label="是否等待">
                <a-switch
                  v-model:checked="node.isCountersignAll"
                  @change="updateWfData('isCountersignAll')"
                />
              </a-form-item>
              <a-form-item label="通过百分比">
                <a-input-number
                  id="inputNumber"
                  v-model:value="node.countersignAllType"
                  :min="1"
                  :max="100"
                  @change="updateWfData('countersignAllType')"
                />
              </a-form-item>
            </template>
            <a-form-item label="再次审核">
              <a-radio-group
                v-model:value="node.countersignAgian"
                name="checkboxgroup"
                @change="updateWfData('countersignAgian')"
                :options="[
                  { value: '1', label: '已同意不需要审核' },
                  { value: '2', label: '已同意需要审核' },
                ]"
              />
            </a-form-item>
          </template>
        </a-collapse-panel>
        <a-collapse-panel key="7" header="超时设置">
          <a-form-item label="超时通知">
            <a-switch v-model:checked="node.isOvertimeMessage" />
          </a-form-item>
          <template v-if="node.isOvertimeMessage">
            <a-form-item label="第一次通知(时)">
              <a-input-number
                id="inputNumber"
                v-model:value="node.overtimeMessageStart"
                :min="1"
                @change="updateWfData('overtimeMessageStart')"
              />
            </a-form-item>
            <a-form-item label="通知间隔(时)">
              <a-input-number
                id="inputNumber"
                v-model:value="node.overtimeMessageInterval"
                :min="1"
                @change="updateWfData('overtimeMessageInterval')"
              />
            </a-form-item>
            <a-form-item label="超时流转时间(时)">
              <a-input-number
                id="inputNumber"
                v-model:value="node.overtimeGo"
                :min="1"
                @change="updateWfData('overtimeGo')"
              />
            </a-form-item>
            <a-form-item label="超时通知策略">
              <a-checkbox-group
                v-model:value="node.overtimeMessageType"
                name="checkboxgroup"
                @change="updateWfData('overtimeMessageType')"
                :options="[
                  { value: '1', label: '短信' },
                  { value: '2', label: '邮箱' },
                  { value: '3', label: '微信' },
                  { value: '4', label: '站内消息' },
                ]"
              />
            </a-form-item>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
    <a-modal
      width="60%"
      wrap-class-name="full-modal"
      v-model:open="data.postOpen"
      title="添加岗位"
      @ok="postHandleOk"
      :destroyOnClose="true"
    >
      <SelectPos ref="posRef" />
    </a-modal>
    <a-modal
      width="60%"
      wrap-class-name="full-modal"
      v-model:open="data.roleOpen"
      title="添加角色"
      @ok="roleHandleOk"
      :destroyOnClose="true"
    >
      <SelectRole ref="roleRef" />
    </a-modal>
    <a-modal
      width="60%"
      wrap-class-name="full-modal"
      v-model:open="data.accountOpen"
      title="添加用户"
      @ok="accountHandleOk"
      :destroyOnClose="true"
    >
      <SelectAccount ref="accountRef" />
    </a-modal>
    <a-modal
      width="40%"
      v-model:open="data.levelOpen"
      title="添加上下级"
      @ok="levelHandleOk"
      :destroyOnClose="true"
    >
      <AuditorLevel ref="levelRef" />
    </a-modal>
    <a-modal
      width="40%"
      v-model:open="data.nodeOpen"
      title="流程节点选择"
      @ok="nodeHandleOk"
      :destroyOnClose="true"
    >
      <AuditorNode ref="nodeRef" :id="nodeId" />
    </a-modal>
    <a-modal
      width="40%"
      v-model:open="data.auditorSqlOpen"
      title="数据表字段选择"
      @ok="sqlHandleOk"
      :destroyOnClose="true"
    >
      <AuditorSql ref="sqlRef" />
    </a-modal>
    <a-modal
      width="60%"
      wrap-class-name="full-modal"
      v-model:open="data.formOpen"
      title="选择表单"
      @ok="formHandleOk"
      :destroyOnClose="true"
    >
      <SelectForm ref="formRef" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, h, watch, defineProps } from 'vue';
  import { SelectPos } from '@/components/SelectPos/index';
  import { SelectRole } from '@/components/SelectRole/index';
  import { SelectAccount } from '@/components/SelectAccount/index';
  import { AuditorLevel, AuditorSql, AuditorNode } from './page';
  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { flowStore } from '@/store/modules/flow';
  import { SelectForm } from '@/components/SelectForm/index';
  import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';

  const flowWfDataStore = flowStore();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const activeKey = ref('1');
  const nodeId = ref('');
  let node: any = ref({});
  const props = defineProps({
    element: {
      type: Object,
      default: () => {
        return {};
      },
    },
    schemeCode: String,
    pageType: String,
    pageView: String,
    taskData: Object,
  });
  const data = reactive({
    atuoAgreeOptions: [
      { value: '1', label: '处理人就是提交人' },
      { value: '2', label: '处理人和上一步的处理人相同' },
      { value: '3', label: '处理人审批过' },
    ],
    noAuditorOptions: [
      { value: '1', label: '超级管理员处理' },
      { value: '2', label: '跳过此步骤' },
      { value: '3', label: '不能提交' },
    ],
    postOpen: false,
    roleOpen: false,
    accountOpen: false,
    levelOpen: false,
    nodeOpen: false,
    auditorSqlOpen: false,
    userColumns: [
      { title: '类型', dataIndex: 'type' },
      { title: '名称', dataIndex: 'name' },
      { title: '附加条件', dataIndex: 'condition', width: 130 },
      { title: '操作', dataIndex: 'operation' },
    ],
    columns: [
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: '编码',
        dataIndex: 'code',
      },
      {
        title: '隐藏',
        dataIndex: 'hidden',
      },
      // {
      //     title: '签章',
      //     dataIndex: 'isSign',
      // },
      {
        title: '下一审批人',
        dataIndex: 'isNextAuditor',
      },
      {
        title: '',
        dataIndex: 'operation',
      },
    ],
    formColumns: [
      {
        title: '名称',
        dataIndex: 'label',
      },
      {
        title: '字段',
        dataIndex: 'fieldName',
      },
      {
        title: '必填',
        dataIndex: 'required',
      },
      {
        title: '编辑',
        dataIndex: 'disabled',
      },
      {
        title: '查看',
        dataIndex: 'ifShow',
      },
    ],
    isLooker: false,
    conditionOptions: [
      { value: '1', label: '同一个部门' },
      { value: '2', label: '同一个公司' },
      { value: '3', label: '发起人上级' },
      { value: '4', label: '发起人下级' },
    ],
    componentDisabled: props.pageType == 'detail' ? true : false,
    formRelations: [],
    formOpen: false,
    formVerisons: [],
    formName: '',
  });

  watch(
    () => props.element,
    (newVal) => {
      if (newVal.type == 'bpmn:Task') {
        const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
        if (currentNode) {
          node.value = currentNode;
        } else {
          node.value = newVal;
        }
      }
    },
  );
  watch(
    () => node.value.formCode,
    (newVal) => {
      if (newVal) {
        getFormList();
        getVersions(false);
      }
    },
  );
  function updateWfData(key) {
    flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key]);
  }
  function typeFormat(type) {
    switch (type) {
      case '1':
        return '岗位';
      case '2':
        return '角色';
      case '3':
        return '用户';
      case '4':
        return '上下级';
      case '5':
        return '节点';
      case '6':
        return '表字段';
    }
  }

  onMounted(() => {
    if (props.element.type == 'bpmn:Task') {
      const currentNode = flowWfDataStore.getWfDataNode(props.element.id);
      if (currentNode) {
        node.value = currentNode;
      } else {
        node.value = props.element;
      }
    }
  });
  // 岗位
  const posRef = ref<any>();
  function handlePostClick(isLooker) {
    data.postOpen = true;
    data.isLooker = isLooker;
  }
  function addTableData(selectData) {
    if (data.isLooker) {
      let addData2 = selectData.filter(
        (t) => node.value.lookUsers.findIndex((t2) => t2.id == t.id && t2.type == t.type) == -1,
      );
      node.value.lookUsers = node.value.lookUsers.concat(addData2);
      updateWfData('lookUsers');
    } else {
      let addData = selectData.filter(
        (t) => node.value.auditUsers.findIndex((t2) => t2.id == t.id && t2.type == t.type) == -1,
      );
      node.value.auditUsers = node.value.auditUsers.concat(addData);
      updateWfData('auditUsers');
    }
  }
  function postHandleOk() {
    let selectData = posRef.value.getRow().map((t) => {
      return { type: '1', id: t.id, name: t.name };
    });
    addTableData(selectData);
    data.postOpen = false;
  }
  // 角色
  const roleRef = ref<any>();
  function handleRoleClick(isLooker) {
    data.isLooker = isLooker;
    data.roleOpen = true;
  }
  function roleHandleOk() {
    let selectData = roleRef.value.getRow().map((t) => {
      return { type: '2', id: t.id, name: t.name, condition: '' };
    });
    addTableData(selectData);
    data.roleOpen = false;
  }
  // 用户
  const accountRef = ref<any>();
  function handleAccountClick(isLooker) {
    data.isLooker = isLooker;
    data.accountOpen = true;
  }
  function accountHandleOk() {
    let selectData = accountRef.value.getRow().map((t) => {
      return { type: '3', id: t.id, name: t.name };
    });
    addTableData(selectData);
    data.accountOpen = false;
  }
  // 上下级
  const levelRef = ref<any>();
  function handleLevelClick(isLooker) {
    data.isLooker = isLooker;
    data.levelOpen = true;
  }
  async function levelHandleOk() {
    await levelRef.value.validateForm();
    let obj = levelRef.value.getForm();
    if (obj.id != '') {
      addTableData([obj]);
      data.levelOpen = false;
    }
  }
  //节点执行人
  const nodeRef = ref<any>();

  function handleNodeAuditorClick(isLooker) {
    nodeId.value = node.value.id;
    data.isLooker = isLooker;
    data.nodeOpen = true;
  }
  function nodeHandleOk() {
    nodeRef.value.validateForm();
    let obj = nodeRef.value.getForm();
    if (obj.id != '') {
      addTableData([obj]);
      data.nodeOpen = false;
    }
  }

  // 数据表字段选择
  const sqlRef = ref<any>();
  function handleAuditorSqlClick(isLooker) {
    data.isLooker = isLooker;
    data.auditorSqlOpen = true;
  }
  function sqlHandleOk() {
    sqlRef.value.validateForm();
    let obj = sqlRef.value.getForm();
    if (
      obj.name == '' ||
      obj.table == '' ||
      obj.value == '' ||
      obj.rfield == '' ||
      obj.cfield == '' ||
      obj.compareType == ''
    ) {
      data.auditorSqlOpen = true;
    } else {
      obj.name = `${obj.table}【${obj.auditorField}】`;
      addTableData([obj]);
      data.auditorSqlOpen = false;
    }
  }
  // 审核人员设置
  function onDelete(key, isLook) {
    if (isLook) {
      node.value.lookUsers = node.value.lookUsers.filter((item) => item.name !== key);
      updateWfData('lookUsers');
    } else {
      node.value.auditUsers = node.value.auditUsers.filter((item) => item.name !== key);
      updateWfData('auditUsers');
    }
  }
  // 按钮设置
  function handleAddBtns() {
    node.value.btnlist.push({
      code: '',
      name: '',
      hidden: false,
      isNextAuditor: false,
      isSign: false,
    });
    updateWfData('btnlist');
  }
  function handleDeleteBtns(key) {
    node.value.btnlist = node.value.btnlist.filter((item) => item.code !== key);
    updateWfData('btnlist');
  }
  // 表单设置
  // 编辑时获取表单名称，表单版本
  async function getFormList() {
    const list = await functionLoadFormPage({
      page: 1,
      limit: 1000,
    });
    list.items.forEach((element) => {
      if (element.id == node.value.formCode) {
        data.formName = element.name;
      }
    });
  }
  // 切换自定义表单和系统表单
  function tabsChange() {
    data.formName = '';
    node.value.formCode = '';
    node.value.formVerison = '';
    node.value.formRelationId = '';
    node.value.formUrl = '';
    node.value.formAppUrl = '';
    node.value.authFields = [];
    node.value.formRelations = [];
  }
  // 表单选择打开
  function handleShow() {
    data.formOpen = true;
  }
  // 表单选择
  const formRef = ref<any>();
  async function formHandleOk() {
    let obj = formRef.value.getRow();
    node.value.formCode = obj[0].id;
    data.formName = obj[0].name;
    node.value.formVerison = '';
    node.value.formRelationId = '';
    node.value.formUrl = '';
    node.value.formAppUrl = '';
    node.value.authFields = [];
    node.value.formRelations = [];
    getVersions(true);
    data.formOpen = false;
  }
  async function getVersions(isChange) {
    const list = await functionGetSchemePageList({
      schemeInfoId: node.value.formCode,
    });
    data.formVerisons = list.items;
    if (node.value.formVerison) {
      custmerformVerisonChange(node.value.formVerison, isChange);
    }
  }
  // 表单版本更改
  async function custmerformVerisonChange(val, isChange) {
    let obj;
    data.formVerisons.forEach((element) => {
      if (element.id == val) {
        obj = element;
      }
    });
    loadFormScheme(obj.scheme, isChange);
  }
  function loadFormScheme(strScheme, isChange) {
    const scheme = JSON.parse(strScheme);
    const fields: any[] = [];
    const rfields: {
      label?: string;
      value?: string;
    }[] = [];
    scheme.formInfo.tabList.forEach((tabElement) => {
      tabElement.schemas.forEach(
        (element: { label?: string; field?: string; component: any; itemProps: any }) => {
          if (['InputGuid'].includes(element.component)) {
            rfields.push({
              label: element.label,
              // value:element.prop
              value: element.field,
            });
          }

          if (
            ![
              'Divider',
              'Grid',
              'Card',
              'CreateUser',
              'CreateTime',
              'ModifyUser',
              'ModifyTime',
            ].includes(element.component) &&
            !element.itemProps.hidden
          ) {
            let obj: any = element;
            obj.required = element.itemProps.required;
            // obj.componentProps.disabled = true;
            obj.disabled = true;
            obj.ifShow = true;
            obj.fieldName = element.componentProps.fieldName;
            fields.push(obj);
          } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
            console.log('gridtable');
            fields.push({
              field: `${element.field}_add`,
              label: `${element.label || '表格'}-添加按钮`,
              required: false,
              disabled: true,
              ifShow: false,
              type: 'grid',
            });
            fields.push({
              field: `${element.field}_remove`,
              label: `${element.label || '表格'}-删除按钮`,
              required: false,
              disabled: true,
              ifShow: false,
              type: 'grid',
            });

            fields.push({
              field: `${element.field}_required`,
              label: `${element.label || '表格'}-数据`,
              required: element.itemProps.required,
              disabled: false,
              ifShow: false,
              type: 'gridrequired',
            });
            element.columns.forEach((child) => {
              child.children.forEach((t) => {
                fields.push({
                  type: 'childData',
                  gridprop: element.field,
                  field: t.field,
                  label: `${element.label || '表格'}-${t.label}`,
                  required: t.itemProps.required,
                  disabled: true,
                  ifShow: true,
                  fieldName: t.componentProps.fieldName,
                  ...t,
                });
              });
            });
          } else if (['Card'].includes(element.component)) {
            element.columns.forEach((child) => {
              child.children.forEach((t) => {
                fields.push({
                  gridprop: element.field,
                  field: t.field,
                  required: t.itemProps.required,
                  disabled: true,
                  ifShow: true,
                  fieldName: t.componentProps.fieldName,
                  ...t,
                });
              });
            });
          } else if (
            ['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
            element.display
          ) {
            let obj: any = element;
            obj.required = element.itemProps.required;
            // obj.componentProps.disabled = false;
            obj.disabled = true;
            obj.ifShow = true;
            obj.fieldName = element.componentProps.fieldName;
            fields.push(obj);
          }
        },
      );
    });
    data.formRelations = rfields;
    if (isChange) {
      node.value.authFields = fields;
    }
  }
  function handleAddAuthField() {
    node.value.authFields.push({
      field: '',
      label: '',
      required: true,
      disabled: true,
      ifShow: true,
    });
  }
  function handleDeleteAuthField(key) {
    node.value.authFields = node.value.authFields.filter((item) => item.field !== key);
  }
  defineExpose({});
</script>

<style lang="less" scoped>
  ::v-deep .ant-select-single {
    width: 100%;
  }

  .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: 100%;
      }
    }
  }

  ::v-deep .ant-table-content {
    margin-top: 10px;
  }

  ::v-deep .ant-collapse-content-box {
    padding: 0;
  }

  ::v-deep .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
    padding: 0;
  }

  ::v-deep .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    padding: 12px 0;
  }
</style>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
    }

    .ant-modal-content {
      height: calc(80vh);
    }

    .ant-modal-body {
      height: 80%;
    }
  }
</style>
<style lang="scss" scoped>
  ::v-deep .ant-space {
    width: 90%;
    margin-left: 5%;

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

      button {
        width: 20%;
      }
      .ant-btn-dangerous {
        width: 100%;
      }
    }
  }
</style>
