<template>
  <div style="height: 100%">
    <div class="search-box">
      <BasicForm
        @register="registerForm"
        :labelWidth="100"
        :schemas="searchFormSchema"
        :actionColOptions="{ span: 24 }"
      />
    </div>
    <div class="table-box">
      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
        <template #toolbar>
          <PermissionBtn @btn-event="onBtnClicked" />
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  // icon: 'ant-design:ellipsis-outlined',
                  label: '查看',
                  onClick: viewAccount.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <TaskModal @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { columns, searchFormSchema } from './data';
  import { getGroupOrUserTaskAndTuBanByTime } from '@/api/demo/statistics';
  import dayjs from 'dayjs';
  import { getCurMonthFirstOrLast } from '@/utils/global';
  import { BasicForm, useForm } from '@/components/Form';
  import TaskModal from './task.vue';

  const [registerModal, { openModal: openModal }] = useModal();

  const { createConfirm, createMessage } = useMessage();
  const searchInfo = ref({
    beginTime: getCurMonthFirstOrLast(0),
    endTime: getCurMonthFirstOrLast(1),
    page: 1,
    limit: 10,
  });
  const list = ref([]);
  const tablePaginationRight = ref({
    current: 1,
    pageSize: 10,
    size: 'small',
    defaultPageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '80', '100'],
    showQuickJumper: true,
    total: 0,
  });
  const [registerForm, { validate, getFieldsValue }] = useForm({
    schemas: searchFormSchema,
    labelWidth: 100,
    baseColProps: { span: 6 },
    actionColOptions: { span: 24 },
    autoSubmitOnEnter: true,
    submitFunc: handleSubmit,
    resetFunc: handleReset,
  });
  const [registerTable, { setTableData, reload, expandAll, setLoading }] = useTable({
    title: '工作量统计',
    columns,
    isTreeTable: true,
    pagination: false,
    striped: false,
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    // 搜索
    handleSearchInfoFn(info) {
      console.log(info);
      return info;
    },
    actionColumn: {
      width: 80,
      title: '查看任务',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
    pagination: tablePaginationRight.value,
  });

  onMounted(() => {
    getList();
  });
  function handleSubmit() {
    searchInfo.value = getFieldsValue();
    searchInfo.value.page = 1;
    tablePaginationRight.value.current = 1;
    searchInfo.value.limit = tablePaginationRight.value.pageSize;
    getList();
  }
  function handleReset() {
    searchInfo.value = {
      beginTime: getCurMonthFirstOrLast(0),
      endTime: getCurMonthFirstOrLast(1),
      page: 1,
      limit: 10,
    };
    tablePaginationRight.value.current = 1;
    tablePaginationRight.value.pageSize = 10;
    getList();
  }
  function handleChange(data) {
    searchInfo.value.page = data.current;
    searchInfo.value.limit = data.pageSize;
    tablePaginationRight.value = data;
    getList();
  }
  function getList() {
    setLoading(true);
    var params = {
      beginTime: dayjs(searchInfo.value.beginTime).format('YYYY-MM-DD'),
      endTime: dayjs(searchInfo.value.endTime).format('YYYY-MM-DD'),
      page: searchInfo.value.page,
      limit: searchInfo.value.limit,
    };
    getGroupOrUserTaskAndTuBanByTime(params).then((res) => {
      res.items.forEach((element: any, index) => {
        element.children = element.userOrGroupTask;
        element.id = index + 1;
      });
      list.value = res.items;
      tablePaginationRight.value.total = res.total;
      setTableData(list.value);
      setLoading(false);
    });
  }
  function onBtnClicked(domId) {}
  function viewAccount(record) {
    if (record.userInsTaskList) {
      openModal(true, {
        record,
      });
    } else {
      createMessage.warning('请查看组员的任务列表');
    }
  }
</script>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
    }

    .ant-modal-content {
      height: calc(100vh);
    }

    .ant-modal-body {
      height: 85%;
    }
  }
</style>
<style scoped lang="less">
  .search-box {
    background: @component-background;
    margin: 16px;
    padding: 16px;
  }
  ::v-deep .ant-col-24 {
    display: inline-block;
    max-width: fit-content;
    margin-left: 20px;
  }
  .table-box {
    margin: 16px;
  }
  ::v-deep .ant-table-wrapper .ant-table.ant-table-middle {
    height: 72vh;
  }
</style>
