<template>
  <Dialog
    v-model="dialogVisible"
    diaTitle="修改负责人"
    :width="'50%'"
    height="60%"
    @close="closeFun"
    show-footer
  >
    <!-- :checkboxConfig="{ checkField: 'id' }" -->
    <BaseTable
      :row-config="{ keyField: 'id' }"
      showCheckbox
      :api="userListUserApi"
      ref="baseTableRef"
      showIndex
      table-name="NODE_TASK_MEMBER_LIST"
    >
    </BaseTable>
    <template #footer>
      <div>
        <el-button @click="closeFun">取消</el-button>
        <el-button @click="updateMemberList">完成</el-button>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import BaseTable from '@/components/common/table/baseTable.vue';
import { computed, nextTick, ref, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import { userListUserApi } from '@/api/system/user';

const props = defineProps<{
  checkedUserList: Array<{ name: string; identity: string; id: number }>;
  memberVisible: boolean;
}>();
const emits = defineEmits(['update:memberVisible', 'update:updateMemberList']);

const dialogVisible = computed({
  get() {
    return props.memberVisible;
  },
  set(value) {
    emits('update:memberVisible', value);
  },
});

const closeFun = () => {
  emits('update:memberVisible', false);
};

const updateMemberList = () => {
  emits('update:updateMemberList', baseTableRef.value.tableRef?.getCheckboxRecords());
  closeFun();
};

const baseTableRef = ref();

watch(
  () => props.memberVisible,
  (newVal) => {
    if (newVal) {
      setTimeout(() => {
        nextTick(() => {
          const checkRowKeys = props.checkedUserList?.map((item) =>
            Number(item.identity || item.id)
          );
          baseTableRef.value.tableRef?.setCheckboxRowKey(checkRowKeys, true);
        });
      }, 500);
    }
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped></style>
