<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, onMounted, 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 = () => {
  console.log('getSelectedCell', baseTableRef.value.tableRef);
  console.log('baseTableRef.value.tableRef.value?.getSelectedCell()', baseTableRef.value.tableRef?.getCheckboxRecords());
  emits('update:updateMemberList', baseTableRef.value.tableRef?.getCheckboxRecords());
  closeFun();
};
// NODE_TASK_MEMBER_LIST
// const headData = ref<any[]>([
//   { title: '用户名', key: 'name', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 200 },
//   { title: '工号', key: 'identity', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 150 },
//   { title: '角色', key: 'role', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 120 },
//   { title: '职位', key: 'position', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 120 },
//   { title: '部门', key: 'department', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true, width: 150 },
//   { title: '电话', key: 'phone', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true },
//   { title: '邮箱', key: 'email', isShow: true, inputMode: 'input', type: 1, inForm: false, required: true },
// ]);
const baseTableRef = ref();
onMounted(() => {
  // nextTick(() => {
  // baseTableRef.value.tableRef?.setSelectRow(props.checkedUserList);
  // console.log('checkedUserList', props.checkedUserList);
  // console.log('baseTableRef.value.', baseTableRef.value);
  // console.log('baseTableRef.value.tableRef', baseTableRef.value.tableRef.value);
  // });
});

watch(
  () => props.memberVisible,
  (newVal) => {
    console.log('memberVisible newVal', newVal);
    if (newVal) {
      setTimeout(() => {
        nextTick(() => {
          // const userList = fakeUserList.map(item => {
          //   return {
          //     ...item,
          //     isCheck: props.checkedUserList?.some(checkItem => {
          //       console.log('checkItem.identity', checkItem, checkItem.identity, item.identity);
          //       return checkItem.identity === item.identity;
          //     }) || false,
          //   };
          // });
          // baseTableRef.value?.setDataFun(
          //   userList
          // );
          console.log('checkedUserList', props.checkedUserList);
          const checkRowKeys = props.checkedUserList?.map(item => Number(item.identity || item.id));
          console.log('checkRowKeys', checkRowKeys);
          baseTableRef.value.tableRef?.setCheckboxRowKey(checkRowKeys, true);
        });
      }, 500);
    }
  }
  ,
  {
    immediate: true,
  }
);

</script>
<style lang="scss" scoped>

</style>
