<template>
  <div class="agent-set">
    <div style="margin-bottom: 10px"><span style="color: #ff4d4f; margin-right: 5px; font-size: 18px">*</span>配置信息：</div>
    <a-radio-group v-model:value="agentType" name="radioGroup" @change="tabChange">
      <a-radio :value="10">从组织库中获取</a-radio>
      <a-radio :value="20">从表单中获取</a-radio>
      <a-radio :value="30">从流程变量获取</a-radio>
      <a-radio :value="40">发起人自己</a-radio>
      <a-radio :value="60">自由选择</a-radio>
      <a-radio :value="50">自定义规则</a-radio>
    </a-radio-group>
    <!-- 从组织库中获取 -->
    <div class="agent-content" v-if="agentType == 10">
      <div class="table-top">
        <a-space :size="16">
          <span class="table-top-title">从组织库中获取</span>
          <a-radio-group v-model:value="activeKeyOrg" button-style="solid">
            <a-radio-button value="1">用户</a-radio-button>
            <a-radio-button value="2">部门</a-radio-button>
            <a-radio-button value="3">职位</a-radio-button>
            <a-radio-button value="4">角色</a-radio-button>
          </a-radio-group>
        </a-space>
        <a-space :size="16">
          <a @click="addClick">新增</a>
          <a @click="clearClick" class="clear">清空</a>
        </a-space>
      </div>
      <!-- 用户 -->
      <s-table
        :columns="userColumns"
        bordered
        rowKey="id"
        size="small"
        v-if="activeKeyOrg == '1'"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverPersonList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="removeUser(index)"></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
      <!-- 部门 -->
      <s-table
        v-if="activeKeyOrg == '2'"
        :columns="orgColumns"
        bordered
        rowKey="id"
        size="small"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverPolicyList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index, recordIndexs }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'selectScope'">
            <a-select
              v-model:value="props.valueData.nodeApproverPolicyList[recordIndexs[0]].selectScope"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="10">指定部门</a-select-option>
              <a-select-option :value="20">发起人所在部门</a-select-option>
              <a-select-option :value="30">发起人所在公司</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'orgName'">
            <a-input
              v-model:value="record.orgName"
              @click="addOrg(record, index)"
              placeholder="请选择"
              v-if="props.valueData.nodeApproverPolicyList[recordIndexs[0]].selectScope == 10"
            ></a-input>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex == 'approveGroupType'">
            <a-select
              v-model:value="props.valueData.nodeApproverPolicyList[recordIndexs[0]].approveGroupType"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="appItem.dictCode" v-for="appItem in approverGroupTypeList" :key="appItem.dictId">{{
                appItem.dictName
              }}</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="removeOrg(index)"></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
      <!-- 职位 -->
      <s-table
        v-if="activeKeyOrg == '3'"
        :columns="positionColumns"
        bordered
        rowKey="id"
        size="small"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverPositionList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'orgName'">
            <a-input v-model:value="record.orgName" @click="addPositionDept(record, index)" placeholder="请选择"></a-input>
          </template>
          <template v-if="column.dataIndex == 'positionName'">
            <a-input v-model:value="record.positionName" @click="addPosition(record, index)" placeholder="请选择"></a-input>
          </template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font
                iconClass="icon-opt-shanchu"
                font-size="24px"
                title="删除"
                color="#60666b"
                @click="removePosition(index)"
              ></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
      <!-- 角色 -->
      <s-table
        v-if="activeKeyOrg == '4'"
        :columns="roleColumns"
        bordered
        rowKey="id"
        size="small"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverRoleList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="removeRole(index)"></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
    </div>
    <!-- 从表单中获取 -->
    <div class="agent-content" v-if="agentType == 20">
      <div class="table-top">
        <a-space :size="16">
          <span class="table-top-title">从表单中获取</span>
        </a-space>
        <a-space :size="16">
          <a @click="addFormClick">新增</a>
          <a @click="clearFormClick" class="clear">清空</a>
        </a-space>
      </div>
      <s-table
        :columns="formColumns"
        bordered
        rowKey="id"
        size="small"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverFormList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index, recordIndexs }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'formCode'">
            <a-select
              v-model:value="props.valueData.nodeApproverFormList[recordIndexs[0]].formCode"
              style="width: 100%"
              placeholder="请选择"
              @change="formCodeChange(record)"
            >
              <a-select-option :value="fItem.formCode" v-for="(fItem, fIndex) in formDefinitionList" :key="fIndex">{{
                fItem.formName
              }}</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'fieldCode'">
            <a-select
              v-model:value="props.valueData.nodeApproverFormList[recordIndexs[0]].fieldCode"
              style="width: 100%"
              placeholder="请选择"
              v-if="props.valueData.nodeApproverFormList[recordIndexs[0]].formType == 1"
              @change="fieldCodeChange(record)"
            >
              <a-select-option
                :value="fieItem.fieldCode"
                v-for="(fieItem, fieIndex) in props.valueData.nodeApproverFormList[recordIndexs[0]].fieldList"
                :key="fieIndex"
                >{{ fieItem.itemLabelName }}</a-select-option
              >
            </a-select>
            <a-select
              v-model:value="props.valueData.nodeApproverFormList[recordIndexs[0]].fieldCode"
              style="width: 100%"
              placeholder="请选择"
              v-if="props.valueData.nodeApproverFormList[recordIndexs[0]].formType == 2"
            >
              <a-select-option :value="fieItem.variableCode" v-for="(fieItem, fieIndex) in modelVariableList" :key="fieIndex">{{
                fieItem.variableName
              }}</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'formFieldType'">
            <a-select
              v-model:value="props.valueData.nodeApproverFormList[recordIndexs[0]].formFieldType"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="10">人员</a-select-option>
              <a-select-option :value="20">部门</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'approveGroupType'">
            <a-select
              v-if="props.valueData.nodeApproverFormList[recordIndexs[0]].formFieldType == 20"
              v-model:value="props.valueData.nodeApproverFormList[recordIndexs[0]].approveGroupType"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="appItem.dictCode" v-for="appItem in approverGroupTypeList" :key="appItem.dictId">{{
                appItem.dictName
              }}</a-select-option>
            </a-select>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="removeForm(index)"></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
    </div>
    <!-- 从流程变量获取 -->
    <div class="agent-content" v-if="agentType == 30">
      <div class="table-top">
        <a-space :size="16">
          <span class="table-top-title">从流程变量中获取</span>
        </a-space>
        <a-space :size="16">
          <a @click="addFlowParamsClick">新增</a>
          <a @click="clearFlowParamsClick" class="clear">清空</a>
        </a-space>
      </div>
      <s-table
        :columns="flowParamsColumns"
        bordered
        rowKey="id"
        size="small"
        :rangeSelection="false"
        style="border-right: 1px solid #eee"
        :pagination="false"
        :data-source="props.valueData.nodeApproverVariableList"
        :animate-rows="false"
        :key="tabKey"
      >
        <template #bodyCell="{ column, record, index, recordIndexs }">
          <template v-if="column.key == 'index'">{{ index + 1 }}</template>
          <template v-if="column.dataIndex == 'fieldCode'">
            <a-select
              v-model:value="props.valueData.nodeApproverVariableList[recordIndexs[0]].fieldCode"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="fieItem.variableCode" v-for="(fieItem, fieIndex) in modelVariableList" :key="fieIndex">{{
                fieItem.variableName
              }}</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'variableFieldType'">
            <a-select
              v-model:value="props.valueData.nodeApproverVariableList[recordIndexs[0]].variableFieldType"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="10">人员</a-select-option>
              <a-select-option :value="20">部门</a-select-option>
            </a-select>
          </template>
          <template v-if="column.dataIndex == 'approveGroupType'">
            <a-select
              v-if="props.valueData.nodeApproverVariableList[recordIndexs[0]].variableFieldType == 20"
              v-model:value="props.valueData.nodeApproverVariableList[recordIndexs[0]].approveGroupType"
              style="width: 100%"
              placeholder="请选择"
            >
              <a-select-option :value="appItem.dictCode" v-for="appItem in approverGroupTypeList" :key="appItem.dictId">{{
                appItem.dictName
              }}</a-select-option>
            </a-select>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex == 'action'">
            <a-space>
              <icon-font
                iconClass="icon-opt-shanchu"
                font-size="24px"
                title="删除"
                color="#60666b"
                @click="removeFlowParams(index)"
              ></icon-font>
            </a-space>
          </template>
        </template>
      </s-table>
    </div>
    <!-- 自定义规则 -->
    <div class="agent-content" v-if="agentType == 50">
      <template v-if="props.valueData?.nodeApproverCustom">
        <a-form ref="formRef" :model="props.valueData.nodeApproverCustom" style="margin-left: 18px; margin-top: 10px">
          <a-form-item label="自定义规则名称:">
            <a-input
              v-model:value="props.valueData.nodeApproverCustom.customName"
              allow-clear
              placeholder="请输入自定义规则名称"
              style="width: 500px"
            />
          </a-form-item>
          <a-form-item label="自定义规则类:">
            <a-input
              v-model:value="props.valueData.nodeApproverCustom.customExpandRuleClass"
              allow-clear
              placeholder="请输入自定义规则类"
              style="width: 500px; margin-left: 15px"
            />
          </a-form-item>
          <div style="color: #ccc">提示：自定义规则类需要基于cn.stylefeng.workflow.api.rule.BaseCustomApproverRule接口。</div>
        </a-form>
      </template>
    </div>

    <!-- 通用选择弹框 -->
    <Selection
      v-model:visible="visibleFlowPick"
      v-if="visibleFlowPick"
      :data="selectedData"
      :showTab="showTab"
      :isRadio="isRadio"
      :title="'选择' + selectTitle"
      @done="closeFlowPick"
    ></Selection>
  </div>
</template>

<script setup name="AgentSet">
import { computed, onMounted, ref } from 'vue';
import { getUUID } from '@/utils/common/util';
import { message } from 'ant-design-vue/es';
import { useWorkflowStore } from '@/store/modules/workflow';
import { SysDictTypeApi } from '@/components/DictSelect/api/SysDictTypeApi';
import { FlowDesignApi } from '../../../../../../mid/workflow/design/api/FlowDesignApi';

const props = defineProps({
  // 值
  valueData: {
    type: Object,
    default: {}
  },
  // 审批类型
  approverNodeType: Number,
});

// Store
const flowStore = useWorkflowStore();

// 绑定表单列表
const formDefinitionList = computed(() => {
  return flowStore.flowGlobalConfig.formDefinitionList.filter(item => item.formType == 1);
});

// 流程变量列表
const modelVariableList = computed(() => {
  return flowStore.flowGlobalConfig.modelVariableList;
});

const agentType = ref(10);

// 组织库中获取tab
const activeKeyOrg = ref('1');

// tablekey
const tabKey = ref(0);

// 用户表格配置
const userColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '用户名称',
    dataIndex: 'userName'
  },
  {
    title: '用户id',
    dataIndex: 'userId'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);
// 部门表格配置
const orgColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '部门类型',
    dataIndex: 'selectScope'
  },
  {
    title: '部门名称',
    dataIndex: 'orgName'
  },
  {
    title: '审批人类型',
    dataIndex: 'approveGroupType'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);
// 职位表格配置
const positionColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '部门名称',
    dataIndex: 'orgName'
  },
  {
    title: '部门id',
    ellipsis: true,
    dataIndex: 'orgId'
  },
  {
    title: '职位名称',
    dataIndex: 'positionName'
  },
  {
    title: '职位id',
    ellipsis: true,
    dataIndex: 'positionId'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);
// 角色表格配置
const roleColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '角色名称',
    dataIndex: 'roleName'
  },
  {
    title: '角色id',
    dataIndex: 'roleId'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);
// 表单表格配置
const formColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '表单',
    dataIndex: 'formCode'
  },
  {
    title: '表单字段',
    dataIndex: 'fieldCode'
  },
  {
    title: '表单字段类型',
    dataIndex: 'formFieldType'
  },
  {
    title: '审批人类型',
    dataIndex: 'approveGroupType'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);
// 流程变量
const flowParamsColumns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: '80px'
  },
  {
    title: '流程变量',
    dataIndex: 'fieldCode'
  },
  {
    title: '流程变量类型',
    dataIndex: 'variableFieldType'
  },
  {
    title: '审批人类型',
    dataIndex: 'approveGroupType'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center'
  }
]);

// 当前行index
const currentIndex = ref(0);

// 是否显示选择弹框
const visibleFlowPick = ref(false);

// 选择tab
const showTab = ref(['user']);

// 标题
const selectTitle = ref('');

// 选择数据
const selectedData = ref({
  selectRoleList: [],
  selectPositionList: [],
  selectOrgList: [],
  selectUserList: []
});

// 选择类型
const selectType = ref('');

// 审批组类型列表
const approverGroupTypeList = ref([]);

// 是否单选
const isRadio = ref(true);

onMounted(() => {
  getApproverGroupTypeList();
  agentType.value = props.valueData.approverType;
});

// 获取审批组类型列表
const getApproverGroupTypeList = async () => {
  approverGroupTypeList.value = await SysDictTypeApi.getDictListByParams({ dictTypeCode: 'org_approver_type' });
};

// 新增
const addClick = () => {
  if (messageApproverType()) {
    ++tabKey.value;
    switch (activeKeyOrg.value) {
      case '1':
        selectedData.value.selectUserList = props.valueData.nodeApproverPersonList.map(item => {
          return { bizId: item.userId, name: item.userName };
        });
        showTab.value = ['user'];
        selectTitle.value = '用户';
        isRadio.value = false;
        visibleFlowPick.value = true;
        break;
      case '2':
        let orgObj = {
          id: getUUID(),
          orgId: '',
          orgName: '',
          selectScope: null,
          approveGroupType: null
        };
        props.valueData.nodeApproverPolicyList.push(orgObj);
        break;
      case '3':
        let positionObj = {
          id: getUUID(),
          orgId: '',
          orgName: '',
          positionId: '',
          positionName: ''
        };
        props.valueData.nodeApproverPositionList.push(positionObj);
        break;
      case '4':
        selectedData.value.selectRoleList = props.valueData.nodeApproverRoleList.map(item => {
          return { bizId: item.roleId, name: item.roleName };
        });
        showTab.value = ['role'];
        selectTitle.value = '角色';
        isRadio.value = false;
        visibleFlowPick.value = true;
        break;
    }
  }
};

// 判断审批类型
const messageApproverType = (flag = false) => {
  if (props.approverNodeType && props.approverNodeType == 10) {
    let num = 0;
    num =
      props.valueData?.nodeApproverFormList?.length +
      props.valueData?.nodeApproverPersonList?.length +
      props.valueData?.nodeApproverPolicyList?.length +
      props.valueData?.nodeApproverPositionList?.length +
      props.valueData?.nodeApproverRoleList?.length +
      props.valueData?.nodeApproverVariableList?.length;

    if (props.valueData?.nodeApproverCustom?.customName) {
      num++;
    }
    if (props.valueData?.submitterSelfFlag) {
      num++;
    }
    if (flag) {
      if (num > 1) {
        message.warning('单人活动只能选择一项!');
        return false;
      }
    } else {
      if (num == 1) {
        message.warning('单人活动只能选择一项!');
        return false;
      }
    }
  }
  return true;
};

// 清空
const clearClick = () => {
  ++tabKey.value;
  switch (activeKeyOrg.value) {
    case '1':
      props.valueData.nodeApproverPersonList = [];
      break;
    case '2':
      props.valueData.nodeApproverPolicyList = [];
      break;
    case '3':
      props.valueData.nodeApproverPositionList = [];
      break;
    case '4':
      props.valueData.nodeApproverRoleList = [];
      break;
  }
};

// 删除用户
const removeUser = index => {
  ++tabKey.value;
  props.valueData.nodeApproverPersonList.splice(index, 1);
};

// 删除部门
const removeOrg = index => {
  ++tabKey.value;
  props.valueData.nodeApproverPolicyList.splice(index, 1);
};

// 添加部门
const addOrg = (record, index) => {
  const { orgId, orgName } = record;
  if (orgId && orgName) {
    selectedData.value.selectOrgList = [{ bizId: orgId, name: orgName }];
  }
  currentIndex.value = index;
  showTab.value = ['dept'];
  selectTitle.value = '部门';
  isRadio.value = true;
  visibleFlowPick.value = true;
};

// 删除角色
const removeRole = index => {
  ++tabKey.value;
  props.valueData.nodeApproverRoleList.splice(index, 1);
};

// 删除职位
const removePosition = index => {
  ++tabKey.value;
  props.valueData.nodeApproverPositionList.splice(index, 1);
};

// 添加职位部门
const addPositionDept = (record, index) => {
  const { orgId, orgName } = record;
  if (orgId && orgName) {
    selectedData.value.selectOrgList = [{ bizId: orgId, name: orgName }];
  }
  selectType.value = 'dept';
  currentIndex.value = index;
  showTab.value = ['dept'];
  selectTitle.value = '部门';
  isRadio.value = true;
  visibleFlowPick.value = true;
};
// 添加职位
const addPosition = (record, index) => {
  const { positionId, positionName } = record;
  if (positionId && positionName) {
    selectedData.value.selectPositionList = [{ bizId: positionId, name: positionName }];
  }
  selectType.value = 'position';
  currentIndex.value = index;
  showTab.value = ['position'];
  selectTitle.value = '职位';
  isRadio.value = true;
  visibleFlowPick.value = true;
};

// 关闭选择弹框
const closeFlowPick = data => {
  ++tabKey.value;
  switch (activeKeyOrg.value) {
    case '1':
      props.valueData.nodeApproverPersonList = [];
      if (data.selectUserList?.length > 0) {
        data.selectUserList.forEach(item => {
          item.id = getUUID();
          item.userId = item.bizId;
          item.userName = item.name;
          props.valueData.nodeApproverPersonList.push(item);
        });
      }
      break;
    case '2':
      const selectOrgList = data.selectOrgList[0] || { bizId: '', name: '' };
      let filtereddArray = props.valueData.nodeApproverPolicyList.filter((row, index) => {
        return index !== currentIndex.value;
      });
      if (selectOrgList.bizId && filtereddArray.find(item => item.orgId == selectOrgList.bizId)) {
        return message.warning('当前部门已存在，请重新选择!');
      }
      props.valueData.nodeApproverPolicyList[currentIndex.value].orgId = selectOrgList.bizId;
      props.valueData.nodeApproverPolicyList[currentIndex.value].orgName = selectOrgList.name;
      break;
    case '3':
      if (selectType.value == 'dept') {
        const selectOrgList = data.selectOrgList[0] || { bizId: '', name: '' };
        props.valueData.nodeApproverPositionList[currentIndex.value].orgId = selectOrgList.bizId;
        props.valueData.nodeApproverPositionList[currentIndex.value].orgName = selectOrgList.name;
      } else {
        const selectPositionList = data.selectPositionList[0] || { bizId: '', name: '' };
        let filteredArray = props.valueData.nodeApproverPositionList.filter((row, index) => {
          return index !== currentIndex.value;
        });
        if (selectPositionList.bizId && filteredArray.find(item => item.positionId == selectPositionList.bizId)) {
          return message.warning('当前职位已存在，请重新选择!');
        }
        props.valueData.nodeApproverPositionList[currentIndex.value].positionId = selectPositionList.bizId;
        props.valueData.nodeApproverPositionList[currentIndex.value].positionName = selectPositionList.name;
      }
      break;
    case '4':
      props.valueData.nodeApproverRoleList = [];
      if (data.selectRoleList?.length > 0) {
        data.selectRoleList.forEach(item => {
          item.id = getUUID();
          item.roleId = item.bizId;
          item.roleName = item.name;
          props.valueData.nodeApproverRoleList.push(item);
        });
      }
      break;
  }
};

// 新增表单
const addFormClick = () => {
  if (messageApproverType()) {
    let obj = {
      id: getUUID(),
      approveGroupType: null,
      fieldCode: null,
      formCode: null,
      formFieldType: null,
      formType: null
    };
    ++tabKey.value;
    if (!props.valueData?.nodeApproverFormList) {
      props.valueData.nodeApproverFormList = [];
    }
    props.valueData.nodeApproverFormList.push(obj);
  }
};
// 清空表单
const clearFormClick = () => {
  ++tabKey.value;
  props.valueData.nodeApproverFormList = [];
};

// 改变表单
const formCodeChange = record => {
  record.fieldCode = null;
  let fomrData = formDefinitionList.value.filter(item => item.formCode == record.formCode && record.formCode);
  if (fomrData) {
    record.formType = fomrData[0].formType;
  }
  if (record.formType == 1) {
    getFormFieldList(record, fomrData[0].formDefinitionId);
  }
};

// 获取表单字段列表
const getFormFieldList = async (record, formDefinitionId) => {
  const res = await FlowDesignApi.getFormFieldList({ formDefinitionId: formDefinitionId });
  if (!record?.fieldList) {
    record.fieldList = [];
  }
  ++tabKey.value;
  record.fieldList = res.data;
};

// 字段改变
const fieldCodeChange = record => {
  let fieldData = record.fieldList.filter(item => item.fieldCode == record.fieldCode && record.fieldCode);
  if (fieldData.length > 0) {
    if (fieldData[0].componentCode == 'select-user') {
      record.formFieldType = 10;
    } else if (fieldData[0].componentCode == 'select-org') {
      record.formFieldType = 20;
    }
  }
  ++tabKey.value;
};

// 删除表单
const removeForm = index => {
  ++tabKey.value;
  props.valueData.nodeApproverFormList.splice(index, 1);
};

// 新增流程变量
const addFlowParamsClick = () => {
  if (messageApproverType()) {
    let obj = {
      id: getUUID(),
      fieldCode: null,
      variableFieldType: null,
      approveGroupType: null
    };
    ++tabKey.value;
    if (!props.valueData?.nodeApproverVariableList) {
      props.valueData.nodeApproverVariableList = [];
    }
    props.valueData.nodeApproverVariableList.push(obj);
  }
};
// 清空流程变量
const clearFlowParamsClick = () => {
  ++tabKey.value;
  props.valueData.nodeApproverVariableList = [];
};
// 删除流程变量
const removeFlowParams = index => {
  ++tabKey.value;
  props.valueData.nodeApproverVariableList.splice(index, 1);
};

// tab切换
const tabChange = () => {
  props.valueData.submitterSelfFlag = agentType.value == 40 ? true : false;
  props.valueData.approverType = agentType.value;
  messageApproverType(true);
};
</script>

<style scoped lang="less">
.agent-set {
  width: 100%;
  height: 100%;
}
.agent-content {
  margin-top: 20px;
}
.table-top {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ebebeb;
  border-bottom: 0px;
  border-radius: 4px 4px 0 0;

  .table-top-title {
    color: #43505e;
    font-size: 16px;
    font-weight: 500;
  }

  :deep(.ant-radio-button-wrapper:first-child) {
    border-radius: 4px 0 0 4px !important;
  }
  :deep(.ant-radio-button-wrapper:last-child) {
    border-radius: 0 4px 4px 0 !important;
  }
}
.clear {
  color: #60666b;
}
:deep(.surely-table) {
  border-radius: 0px !important;
}
</style>
