import React, { useEffect, useState } from "react";
//第三方UI库/组件
import { Form, Button, Table, Input, Space, Tooltip } from 'antd';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
//类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//umi 相关
import { connect } from 'umi';
//本地组件、弹窗、业务逻辑
// import SupplierViewModal from './components/SupplierViewModal';
// import SupplierDetailModal from './components/SupplierDetailModal';
import CategorySelector from '@/components/TreeCategorySelector';
import RegionTypeSelect from '@/components/CommonSelect/RegionTypeSelect'
import AccessStatusSelect from '@/components/CommonSelect/AccessStatusSelect'
//本地服务/接口
import { getPageMy } from './services';
import { downloadFile } from '@/utils/download';
import { getDictList } from '@/servers/api/dicts'
//统一列表分页
import tableProps from '@/utils/tableProps'

// 列表数据接口
interface Data {
  id: number;
  name: string;
  region: string;
  supplierType: string;
  regTime: string;
  status: string;
}
interface mySupplierInquiryProps {
  dispatch: any;
}
const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
  //搜搜表单
  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 handleExport = async () => {
    const values = form.getFieldsValue();
    downloadFile('/coscoSupplierBase/getPageMyExport', 'GET', values);
  };
  // 查询
  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 getPageMy({ pageNo, pageSize, ...values });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      } else {
        message.error(message)
      }
    } finally {
      setLoading(false);
    }
  };
  const [enterpriseTypeMap, setEnterpriseTypeMap] = useState<{ [code: string]: string }>({});
   const [approveTypeMap, setApproveTypeMap] = useState<{ [code: string]: string }>({});
  // 初始化 
  useEffect(() => {
    getDictList('enterprise_type').then((res: any) => {
      const { code, data } = res;
      if (code == 200) {
        const map: { [code: string]: string } = {};
        data.forEach((item: { code: string, dicName: string }) => {
          map[item.code] = item.dicName;
        });
        setEnterpriseTypeMap(map);
      }
    })
     getDictList('approve_type').then((res) => {
          if (res.code == 200) {
            const map: { [code: string]: string } = {};
            res.data.forEach((item: { code: string, dicName: string }) => {
              map[item.code] = item.dicName;
            });
            setApproveTypeMap(map);
          }
        })
    getList();
  }, []);


  const columns: ColumnsType<Data> = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60,
      render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
    },
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
      width: 160,
      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',
      width: 160,
    },
    {
      title: '企业类型',
      dataIndex: 'enterpriseType',
      key: 'enterpriseType',
      align: 'center',
      width: 120,
      render: (code: string) => enterpriseTypeMap[code] || code
    },
    
    {
      title: '准入品类',
      dataIndex: 'categoryNameList',
      align: 'center',
      width: 120,
      ellipsis: true,
      render: (value: { categoryName: string; categoryPathName: string }[] = []) => {
        if (!value || value.length === 0) return '-';
        
        // 多于1条
        const allNames = value.map(item => item.categoryPathName).join('\n');
        return (
          <Tooltip title={<pre style={{ margin: 0, fontSize: 12, fontFamily: '微软雅黑', whiteSpace: 'pre-wrap' }}>{allNames}</pre>} overlayStyle={{ zIndex: 1200 }}>
            <span>
              {value[0].categoryName}
              {value.length !== 1 && (
                <span>等</span>
              )}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '准入时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      align: 'center',
      width: 180,
    },
    {
      title: '准入状态',
      dataIndex: 'accessStatus',
      key: 'accessStatus',
      align: 'center',
      width: 140,
      render: (code: string) => approveTypeMap[code] || code
    },
    {
      title: '操作',
      key: 'option',
      align: 'center',
      width: 160,
      fixed: 'right',
      render: (record: any) => (
        <Space>
          <a
            onClick={() => {
              dispatch({
                type: 'globalModal/show',
                payload: {
                  id: record.id,
                },
              });
            }}
          >查看</a>
          {/* <a
            onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
          >准入明细</a> */}
        </Space>
      ),
    },
  ];

  return (
    <>
      <div className="common-container">
        <div className="filter-action-row">
          <Form
            form={form}
            layout="inline"
            className="filter-form"
          >
            <Form.Item name="name" label="供应商名称">
              <Input placeholder="请输入" style={{ width: 180 }} allowClear maxLength={20} />
            </Form.Item>
            <Form.Item name="categoryId" label="准入品类">
              <CategorySelector multiple={false} />
            </Form.Item>
            <Form.Item name="accessStatus" label="准入状态">
              <AccessStatusSelect />
            </Form.Item>
            <Form.Item name="supplierType" label="境内/境外">
              <RegionTypeSelect />
            </Form.Item>
            <Form.Item>
              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
                搜索
              </Button>
            </Form.Item>
            <Form.Item>
              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
            </Form.Item>
            <Form.Item style={{ marginLeft: 'auto' }}>
              <Button className="buttonOther" type="primary" onClick={handleExport}>
                数据导出
              </Button>
            </Form.Item>
          </Form>
        </div>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          pagination={{ ...tableProps.pagination, total: pagination.total }}
          onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
          style={{ flex: 1, minHeight: 0 }}
          scroll={{ y: 'calc(100vh - 350px)' }}
        />
      </div>
      {/* 查看组件 
      <SupplierViewModal
        visible={viewVisible}
        record={currentRecord}
        onCancel={() => setViewVisible(false)}
      />*/}
      {/* 准入明细组件 
      <SupplierDetailModal
        visible={detailVisible}
        record={currentRecord}
        onCancel={() => setDetailVisible(false)}
      />*/}

    </>
  );
};

export default connect()(mySupplierInquiry);