<template>
  <div class="list-box">
    <NodeHead class="ml-10px mb-4" :nodeName="t('转办设置')" />
    <FormItem :label="t('是否设置转办')">
      <a-switch :checked="props.isSetTransferUser" @change="changeProvisionalApprover" />
    </FormItem>
    <div v-if="props.isSetTransferUser">
      <div :class="btnstyle == 'block' ? '' : 'flex justify-between items-start'">
        <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>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';
  import FormItem from '/@bpmn/layout/FormItem.vue';
  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 { MemberConfig } from '/@/model/workflow/memberSetting';
  import { computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  import { getMemberType } from '../../config/info';

  const { t } = useI18n();
  const emits = defineEmits(['update:memberList', 'update:isSetTransferUser']);
  const props = withDefaults(
    defineProps<{
      memberList: Array<MemberConfig>;
      isSetTransferUser: Boolean;
      btnstyle?: String;
    }>(),
    {
      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 },
    ];
  });
  // 类型

  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);
  }
  function changeProvisionalApprover(val: Boolean) {
    emits('update:isSetTransferUser', val);
  }
</script>

<style lang="less" scoped>
  .list-box {
    margin-top: 12px;

    .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>
