<template>
  <div class="list-box">
    <div :class="btnstyle == 'block' ? '' : 'flex justify-between items-start'">
      <NodeHead class="ml-10px mb-4" :nodeName="t('人员列表')" />

      <div class="button-box" :class="btnstyle == 'block' ? 'justify-start' : 'justify-end ml-9'">
        <div v-for="(item, index) in allComponentList" :key="index">
          <component
            v-if="item.show"
            :is="item.component"
            :memberList="props.memberList"
            @change="changeList"
          >
            <a-button type="primary">{{ item.name }}</a-button>
          </component>
        </div>
      </div>
    </div>
    <div :class="prefixCls">
      <a-table
        :dataSource="props.memberList"
        :columns="configColumns"
        :pagination="false"
        size="middle"
      >
        <template #headerCell="{ column }">
          <div class="header-cell__custom-title">{{ column.title }}</div>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'memberType'">
            {{ getMemberType(record.memberType) }}
          </template>
          <template v-if="column.key === 'operation'">
            <div @click="deleteItem(index)" class="text-[#FF5461]">{{ t('删除') }}</div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';

  import Posts from '/@bpmn/components/member/Posts.vue';
  import Roles from '/@bpmn/components/member/Roles.vue';
  import Users from '/@bpmn/components/member/Users.vue';
  import NodeApprover from '/@bpmn/components/member/NodeApprover.vue';
  import UpperManagement from '/@bpmn/components/member/UpperManagement.vue';
  import FormFields from '/@bpmn/components/member/FormFields.vue';

  import { MemberConfig } from '/@/model/workflow/memberSetting';
  import { computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import ApiSelect from '/@bpmn/components/member/ApiSelect.vue';
  import ApprovalUser from '/@bpmn/components/member/ApprovalUser.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  import { getMemberType } from '../../config/info';

  const { t } = useI18n();
  const emits = defineEmits(['update:memberList']);
  const props = withDefaults(
    defineProps<{
      isCommonType: Boolean;
      isUpper?: Boolean;
      isApiApprover?: Boolean;
      memberList: Array<MemberConfig>;
      btnstyle?: String;
    }>(),
    {
      isCommonType: () => false,
      isUpper: () => false,
      isApiApprover: () => false,
      memberList: () => {
        return [];
      },
    },
  );
  const configColumns = [
    {
      title: t('类型'),
      dataIndex: 'memberType',
      key: 'memberType',
      align: 'center',
    },
    {
      title: t('名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: '108px',
    },
  ];

  const allComponentList = computed(() => {
    return [
      { name: t('添加岗位'), component: Posts, show: true },
      { name: t('添加角色'), component: Roles, show: true },
      { name: t('添加人员'), component: Users, show: true },
      { name: t('节点审批人'), component: NodeApprover, show: props.isCommonType ? false : true },
      {
        name: t('上级领导'),
        component: UpperManagement,
        show: props.isCommonType ? false : props.isUpper ? false : true,
      },
      { name: t('表单字段'), component: FormFields, show: props.isCommonType ? false : true },
      { name: t('API审批人'), component: ApiSelect, show: props.isApiApprover ? true : false },
      { name: '审批专员', component: ApprovalUser, show: true },
    ];
  });
  // 类型

  function changeList(list: Array<MemberConfig>) {
    emits('update:memberList', list);
  }
  function deleteItem(index: number) {
    let list = props.memberList;
    list.splice(index, 1);
    emits('update:memberList', list);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .button-box {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      flex: 1;
      margin-right: 10px;

      :deep(button) {
        margin: 0 0 10px 10px;
        width: 82px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
      }
    }
  }

  .delete-icon {
    color: @clear-color;
  }
</style>
