import React, { useEffect } from "react";
import { Button, Form, Select, Table, Tag } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import { VERIFY_STATUS_MAP } from "~/enumerate/constant";
import {
  FILING_CODE_TO_CONFIRM,
  REVIEW_BUSINESS_SCOPE_OPTIONS,
  REVIEW_UNIT_TYPE_OPTIONS,
  toQualReviewPageQuery,
} from "../reviewPageQuery";

const { router } = tools;

const ExpertVerification = (props) => {
  const [form] = Form.useForm();
  const { qualReview, queryReviewList } = props;
  const { qualReviewList, qualReviewTotal, qualReviewLoading } =
    qualReview || {};

  const handleSearch = () => {
    queryReviewList({
      ...toQualReviewPageQuery(router.query),
      supervision: true,
      applyTypeCode: 1,
    });
  };

  const handleReset = (values) => {
    router.query = {
      ...router.query,
      ...values,
      current: 1,
      size: 10,
    };
    handleSearch();
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    handleSearch();
  }, []);

  const columns = [
    {
      title: "序号",
      width: 60,
      fixed: "left",
      render: (_, __, index) => index + 1,
    },
    {
      title: "机构名称",
      dataIndex: "filingUnitName",
      width: 220,
      ellipsis: true,
    },
    { title: "机构类型", dataIndex: "filingUnitTypeName", width: 100 },
    { title: "证书编号", dataIndex: "filingNo", width: 140, ellipsis: true },
    {
      title: "安全评价业务范围",
      dataIndex: "businessScope",
      width: 180,
      ellipsis: true,
    },
    {
      title: "确认状态",
      dataIndex: "filingStatusCode",
      width: 100,
      render: (code) => {
        const status = FILING_CODE_TO_CONFIRM[code];
        const config = VERIFY_STATUS_MAP[status];
        return config ? <Tag color={config.color}>{config.label}</Tag> : "--";
      },
    },
    {
      title: "操作",
      width: 140,
      fixed: "right",
      render: (_, record) => (
        <TableAction>
          <Button
            type="link"
            size="small"
           // onClick={() => props.history.push(`FilingDetail?id=${record.id}`)}
          >
            查看
          </Button>
          {record.filingStatusCode === 2 && (
            <Button
              type="link"
              size="small"
              // onClick={() =>
              //   props.history.push(`QualReviewForm?id=${record.id}`)
              // }
            >
              核验
            </Button>
          )}
        </TableAction>
      ),
    },
  ];

  return (
    <PageLayout title="专家资料核验">
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        loading={qualReviewLoading}
        formLine={[
          <Form.Item key="filingUnitName" name="filingUnitName">
            <ControlWrapper.Input
              label="机构名称"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="filingUnitTypeName" name="filingUnitTypeName">
            <ControlWrapper.Select
              label="机构类型"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
              options={REVIEW_UNIT_TYPE_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="businessScope" name="businessScope">
            <ControlWrapper.Select
              label="安全评价业务范围"
              placeholder="请选择"
              allowClear
              showSearch
              optionFilterProp="label"
              style={{ width: "100%" }}
              options={REVIEW_BUSINESS_SCOPE_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="confirmStatus" name="confirmStatus">
            <ControlWrapper.Select
              label="确认状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="pending">待确认</Select.Option>
              <Select.Option value="passed">确认通过</Select.Option>
              <Select.Option value="rejected">打回</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
        ]}
        onReset={handleReset}
        onFinish={(values) => {
          router.query = {
            ...router.query,
            ...values,
            current: 1,
            size: 10,
          };
          handleSearch();
        }}
      />

      <Table
        rowKey="id"
        columns={columns}
        dataSource={qualReviewList}
        scroll={{ y: props.scrollY }}
        loading={qualReviewLoading}
        pagination={{
          total: qualReviewTotal,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          current: router.query.current || 1,
          pageSize: router.query.size || 10,
          onChange: (page, pageSize) => {
            router.query = {
              ...router.query,
              current: page,
              size: pageSize,
            };
            handleSearch();
          },
        }}
      />
    </PageLayout>
  );
};

export default Connect(
  [NS_QUAL_REVIEW],
  true,
)(AntdTableFuncControl(ExpertVerification));