import React from 'react';
import Page from '@/components/Page';
import { useNavigate } from 'react-router-dom';
import { queryTable, queryDict } from "@/utils/request";
import { ProTable } from "@ant-design/pro-components";
import { Button, notification } from "antd";
import { getTaCheck } from '@/service/tacheck';
import { getTaCheckAnswer } from '@/service/tacheckanswer';
import useBool from '@/utils/hooks/useBool';

const getCheck = queryDict(getTaCheck, { labelKey: 'title', valueKey: 'checkId' });
const getAnswer = queryTable(getTaCheckAnswer);

const addOnParams = { itemType: 'survey' };

export default (props) => {
  const [loading, startLoading, stopLoading] = useBool();
  const paramsRef = React.useRef();
  const [notificationApi, contextHolder] = notification.useNotification();
  const navigate = useNavigate();

  const goToDetail = (row) => {
    navigate(`/checkAnswer/survey/detail?answerId=${row.answerId}&itemType=survey`)
  }

  const columns = [
    {
      title: "模拟测评",
      dataIndex: "checkId",
      valueType: 'select',
      request: getCheck,
      hideInTable: true,
      formItemProps: {
        rules: [
          { required: true, message: '请选择模拟测评' }
        ]
      }
    },
    {
      title: "答题时间",
      dataIndex: "createDate",
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: "社区",
      dataIndex: "communityName",
    },
    {
      title: "小区",
      dataIndex: "addr",
    },
    {
      title: "答题人",
      dataIndex: "userName",
    },
    {
      title: "受访者性别",
      dataIndex: "sex",
      hideInSearch: true,
    },
    {
      title: "年龄段",
      dataIndex: "age",
      hideInSearch: true,
    },
    {
      title: "得分",
      dataIndex: "score",
      hideInSearch: true,
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'options',
      render: (_, row) => {
        return (
          <Button type="link" onClick={() => goToDetail(row)}>详情</Button>
        )
      }
    }
  ]

  const beforeSearchSubmit = (params) => {
    paramsRef.current = params;
    return params;
  }

  const onExport = () => {
    // if (!paramsRef.current) {
    //   notificationApi.warning({ message: '请先进行条件查询' });
    //   return
    // }

    // startLoading();
    // exportTaCheckAnswer({
    //   ...paramsRef.current,
    //   ...addOnParams,
    // }).then(() => {
    //   stopLoading();
    // }).catch(() => {
    //   stopLoading();
    // });
  }

  return (
    <Page>
      {contextHolder}
      <ProTable
        rowKey="answerId"
        manualRequest
        columns={columns}
        request={getAnswer}
        params={addOnParams}
        beforeSearchSubmit={beforeSearchSubmit}
        form={{ ignoreRules: false }}
        // toolBarRender={() => [
        //   <Button
        //     key="1"
        //     type="primary"
        //     loading={loading}
        //     onClick={onExport}
        //   >
        //     导出
        //   </Button>,
        // ]}
      />
    </Page>
  )
}