import React, { useEffect, useState } from "react";
//第三方UI库/组件
import { Form, Button, Table, Select, Input, Space, Tooltip, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
//类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//umi 相关
import { useIntl, connect } from 'umi';
//本地组件、弹窗、业务逻辑
import SupplierViewModal from './components/SupplierViewModal';
import SupplierDetailModal from './components/SupplierDetailModal';
//本地服务/接口
import { getRegisterPage } from './services';

// 列表数据接口
interface Data {
  id: number;
  name: string;
  region: string;
  supplierType: string;
  regTime: string;
  status: string;
}
//下拉数据接口
type OptionType = { label: string; value: string };
//准入状态
const statusColor = (status: string) => {
  if (status === '已驳回' || status === '已退出') return 'red';
  if (status === '已准入') return 'green';
  return undefined;
};

interface RegistrationQueryProps {
  dispatch: any;
}

// 页面主体
const RegistrationQuery: React.FC<RegistrationQueryProps> = ({ dispatch }) => {
  //双语
  const intl = useIntl();
  //查询表单
  const [form] = Form.useForm();
  //列表渲染数据
  const [data, setData] = useState<Data[]>([]);
  //列表加载
  const [loading, setLoading] = useState(false);
  //列表分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0, });
  //查看是否显示状态
  const [viewVisible, setViewVisible] = useState(false);
  //准入明细是否显示状态
  const [detailVisible, setDetailVisible] = useState(false);
  //查看、准入明细 参数传递
  const [currentRecord, setCurrentRecord] = useState('');
  // 境内/境外下拉数据
  const [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
  //状态 下拉数据
  const [statusOptions, setStatusOptions] = useState<OptionType[]>([]);
  // 搜索
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    getList();
  };
  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    getList();
  };
  //列表方法
  const getList = async (pageNo: number = 1, pageSize: number = 10) => {
    setLoading(true);
    try {
      const values = form.getFieldsValue();
      const { code, data, message } = await getRegisterPage({ pageNo, pageSize, ...values });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      } else {
        message.error(message)      
      }
    } finally {
      setLoading(false);
    }
  };
  //初始化
  useEffect(() => {
    // 境内/境外 下拉
    setRegionOptions([
      { label: '境内企业', value: 'dvs' },
      { label: '境外企业', value: 'ovs' },
      { label: '个人', value: 'pe' },
    ])
    //状态 下拉
    setStatusOptions([
      { label: '未准入', value: '0' },
      { label: '已准', value: '1' },
      { label: '退出', value: '2' },
    ])
    //列表
    getList();
  }, [])
  // 列表头部数据
  const columns: ColumnsType<Data> = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 70,
      align: 'center',
      render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
    },
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left',
      ellipsis: true,
      render: (dom, record) => 
        <Tooltip title={record.name}>
            <a
            onClick={() => {
              dispatch({
                type: 'globalModal/show',
                payload: {
                  id: record.id,
                },
              });
            }}
          >
            {record.name}
          </a>
        </Tooltip>,
    },
    {
      title: '境内/境外',
      dataIndex: 'supplierTypeCn',
      key: 'supplierTypeCn',
      align: 'center',
    },
    {
      title: '供应商分类',
      dataIndex: 'enterpriseTypeCn',
      key: 'enterpriseTypeCn',
      align: 'center',
      
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'accessStatusCn',
      key: 'accessStatusCn',
      align: 'center',
      render: (val: string) =>
        <span style={{
          color: statusColor(val) || (val === '未准入' ? '#aaa' : undefined),
        }}>{val}</span>
    },
    {
      title: '操作',
      key: 'option',
      align: 'center',
      render: (record) => (
        <Space>
          <a
            style={{ color: '#1677ff' }}
            onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}
          >查看</a>
          <a
            style={{ color: '#1677ff' }}
            onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
          >准入明细</a>
        </Space>
      ),
    },
  ];
  return (
    <>
      {/* 查询区 */}
      <Form
        form={form}
        layout="inline"
        onFinish={handleSearch}
        style={{ marginBottom: 16 }}
      >
        <Form.Item name="name" label="供应商名称">
          <Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear maxLength={20} />
        </Form.Item>
        <Form.Item name="supplierType" label="境内/境外">
          <Select style={{ width: 160 }} placeholder="请选择境内/境外" allowClear>
            {regionOptions.map(opt => (
              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="accessStatus" label="状态">
          <Select style={{ width: 160 }} placeholder="请选择状态" allowClear>
            {statusOptions.map(opt => (
              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>查询</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      {/* 列表 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={pagination}
        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
      />
      {/* 查看组件 */}
      <SupplierViewModal
        visible={viewVisible}
        record={currentRecord}
        onCancel={() => setViewVisible(false)}
      />
      {/* 准入明细组件 */}
      <SupplierDetailModal
        visible={detailVisible}
        record={currentRecord}
        onCancel={() => setDetailVisible(false)}
      />
    </>
  );
};
export default connect()(RegistrationQuery);