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

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

const addOnParams = { itemType: 'loc' };

export default (props) => {

  const [loading, startLoading, stopLoading] = useBool();
  const paramsRef = React.useRef();
  const [notificationApi, contextHolder] = notification.useNotification();
  const navigate = useNavigate();
  const [params, setParams] = React.useState({});

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

  const columns = [
    {
      title: "模拟测评",
      dataIndex: "checkId",
      valueType: 'select',
      request: getCheck,
      hideInTable: true,
      formItemProps: {
        rules: [
          { required: true, message: '请选择模拟测评' }
        ]
      }
    },
    {
      title: "答题时间",
      dataIndex: "createDate",
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: "点位名称",
      valueType: 'select',
      request: getLocType,
      dataIndex: "typeId",
    },
    {
      title: "详细地址",
      dataIndex: "addr",
      hideInSearch: true,
    },
    {
      title: "答题人",
      dataIndex: "userName",
    },
    {
      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;
    setParams(params);
    return params;
  }
  const onExport = () => {
    if (!paramsRef.current) {
      notificationApi.warning({ message: '请先进行条件查询' });
      return
    }

    startLoading();
    exportTaCheckAnswer({ ...addOnParams, ...params }).then(() => {
      // console.log('params', params);
      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>
  )
}