<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :showCancelBtn="false"
    :showOkBtn="false"
    width="60%"
    :title="title"
  >
    <BasicTable @register="registerTable" :searchInfo="searchInfo" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, h } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { getLoadUserListByGroupid } from '@/api/demo/system';
  import { BasicTable, useTable } from '@/components/Table';
  import { Tag } from 'ant-design-vue';

  defineOptions({ name: 'DeptModal' });

  const emit = defineEmits(['success', 'register']);
  const title = ref('');
  const list = ref([]);
  // 异步传参后查询历史记录表格
  const [registerTable, { setTableData, reload }] = useTable({
    canResize: true,
    resizeHeightOffset: 150,
    columns: [
      {
        title: '任务名称',
        dataIndex: 'TaskName',
      },
      {
        title: '领取时间',
        dataIndex: 'ReciveTime',
      },
      {
        title: '图斑数量',
        dataIndex: 'TubanNum',
      },
      {
        title: '任务状态',
        dataIndex: 'Remark',
        width: 80,
        customRender: ({ record }) => {
          const enable = record.IsComplate;
          const color = enable ? 'green' : 'red';
          const text = enable ? '已完成' : '未完成';
          return h(Tag, { color: color }, () => text);
        },
      },
    ],
    rowKey: 'id',
    showTableSetting: false,
    handleSearchInfoFn(info) {
      return info;
    },
  });

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    title.value = data.record.userName + '的任务列表';
    list.value = data.record.userInsTaskList;
    setTableData(list.value);
    reload();
  });

  onMounted(() => {
    // setTableData(list.value);
  });
</script>
<style scoped>
  .select-account {
    display: flex;
    height: 100%;
  }
</style>
