<template>
  <div>
    <div @click="show"><slot></slot></div>
    <ModalPanel :visible="visible" :width="1200" title="审批专员" @submit="submit" @close="close">
      <NodeHead node-name="限制条件" class="mt-4 ml-4" />
      <div class="limit-box">
        <a-checkbox-group :options="limitingList" size="small" v-model:value="limitChecked" />
      </div>
      <NodeHead node-name="专员选择" class="my-4 ml-4" />
      <div class="list-page-box">
        <ApprovalCard
          v-for="(item, index) in cardList"
          :key="index"
          :item="item"
          @click="handleChecked(item)"
          :class="selectedIds.includes(item.id!) ? 'picked' : 'not-picked'"
        >
          <template #check>
            <a-checkbox size="small" :checked="selectedIds.includes(item.id!)" />
          </template>
        </ApprovalCard>
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { MemberType } from '/@/enums/workflowEnum';
  import { MemberConfig } from '/@/model/workflow/memberSetting';
  import { ModalPanel } from '/@/components/ModalPanel/index';
  import ApprovalCard from './ApprovalCard.vue';
  import { getApprovalList } from '/@/api/system/department';
  import { ApprovalModel } from '/@/api/system/department/model';
  import { NodeHead } from '/@/components/ModalPanel/index';

  const limitingList = [
    { label: '不限制', value: 'nolimit' },
    { label: '发起人所属组织', value: 'same' },
    { label: '发起人上级组织', value: 'sameS1' },
    { label: '发起人上二级组织', value: 'sameS2' },
    { label: '上三级组织', value: 'sameS3' },
    { label: '上四级组织', value: 'sameS4' },
    { label: '上五级组织', value: 'sameS5' },
    { label: '上六级组织', value: 'sameS6' },
    { label: '发起人所属最高级组织', value: 'sameMax' },
  ];

  const emits = defineEmits(['change']);
  const props = withDefaults(
    defineProps<{
      memberList: Array<MemberConfig>;
      multiple?: Boolean;
    }>(),
    {
      memberList: () => {
        return [];
      },
      multiple: () => {
        return true;
      },
    },
  );

  const limitChecked = ref<string[]>([]);
  const visible = ref(false);
  const cardList = ref<ApprovalModel[]>([]);
  const selectedIds = ref<string[]>([]);
  const memberType = MemberType.APPROCAL_USER;

  async function show() {
    cardList.value = await getApprovalList();
    if (props.memberList.length > 0) {
      const selectedList = props.memberList.filter((ele: MemberConfig) => {
        if (ele.memberType && ele.memberType === memberType) return ele;
      });
      selectedIds.value = selectedList.map((ele: MemberConfig) => {
        return ele.id;
      });
      limitChecked.value = selectedList.length ? selectedList[0].limit || [] : [];
    }
    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;
      });
    }
    cardList.value.forEach((item) => {
      if (selectedIds.value.includes(item.id!)) {
        list.push({
          memberType: memberType,
          name: item.name,
          id: item.id!,
          limit: limitChecked.value,
        });
      }
    });
    emits('change', [...list]);
    close();
  }
  function close() {
    visible.value = false;
  }

  function handleChecked(item) {
    if (!!props.multiple) {
      if (selectedIds.value.includes(item.id)) {
        selectedIds.value.splice(
          selectedIds.value.findIndex((itemId) => itemId === item.id),
          1,
        );
      } else {
        selectedIds.value.push(item.id);
      }
    } else {
      if (selectedIds.value.includes(item.id)) {
        selectedIds.value = [];
      } else {
        selectedIds.value = [item.id];
      }
    }
  }
</script>

<style scoped>
  .approval-title {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 10px 10px;
  }

  .limit-box {
    :deep(.ant-checkbox-wrapper) {
      margin: 16px 0 0 16px;
      line-height: 14px;
    }

    :deep(.ant-checkbox-inner) {
      border-radius: unset;
      width: 14px;
      height: 14px;
    }

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