<template>
  <div>
    <div @click="show"><slot></slot></div>
    <ModalPanel
      :visible="visible"
      :width="600"
      :title="t('指定节点审批人')"
      @submit="submit"
      @close="close"
    >
      <NodeHead :node-name="t('节点列表')" class="ml-4 mt-4" />

      <div class="node-list-box">
        <a-checkbox
          v-for="(item, index) in nodes.list"
          :key="index"
          :value="item.id"
          size="small"
          v-model:checked="item.checked"
          >{{ item.name }}</a-checkbox
        >
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import useStateFormInfo from '/@bpmn/hooks/useStateFormInfo';
  import { MemberType } from '/@/enums/workflowEnum';
  import { MemberConfig, NodesConfig } from '/@/model/workflow/memberSetting';
  import { NodeHead, ModalPanel } from '/@/components/ModalPanel/index';
  import { InfoId } from '/@/model/workflow/bpmnConfig';
  import { getNodeList } from '/@bpmn/config/info';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const { formInfo } = useStateFormInfo();
  const emits = defineEmits(['change']);
  const props = withDefaults(
    defineProps<{
      memberList: Array<MemberConfig>;
    }>(),
    {
      memberList: () => {
        return [];
      },
    },
  );
  const visible = ref(false);
  const memberType = MemberType.SPECIFY_NODE_APPROVER;
  let nodes: { list: Array<NodesConfig> } = reactive({
    list: [],
  });
  function show() {
    nodes.list = [];
    let selectIds: Array<InfoId> = [];
    if (props.memberList.length > 0) {
      selectIds = props.memberList
        .filter((ele: MemberConfig) => {
          if (ele.memberType && ele.memberType === memberType) return ele;
        })
        .map((ele: MemberConfig) => {
          return ele.id;
        });
    }
    getNodeList().map((item) => {
      if (formInfo.value.id !== item.id) {
        nodes.list.push({ id: item.id, name: item.name, checked: selectIds.includes(item.id) });
      }
    });
    visible.value = true;
  }
  function submit() {
    let list: Array<MemberConfig> = [];
    if (props.memberList.length > 0) {
      list = props.memberList.filter((ele: MemberConfig) => {
        if (ele.memberType != memberType) return ele;
      });
    }
    nodes.list.forEach((item: NodesConfig) => {
      if (item.checked) {
        list.push({
          memberType: memberType,
          name: item.name,
          id: item.id,
        });
      }
    });
    emits('change', [...list]);
    close();
  }
  function close() {
    visible.value = false;
  }
</script>

<style scoped>
  .node-list-box {
    margin: 0 16px;
  }

  :deep(.ant-checkbox-wrapper) {
    margin: 16px 16px 0 0;
  }

  :deep(.ant-checkbox-inner) {
    border-radius: unset;
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    border-radius: unset;
  }
</style>
