import React, { useEffect, useState } from 'react';
import { connect, useIntl } from 'umi';
import { Modal, Button, Space, Descriptions } from 'antd';
import { coscoSupplierBase } from './services'
import SupplierRegisterInfo from './components/SupplierRegisterInfo';
import AccessCategoryTable from './components/AccessCategoryTable';
import TianyanchaInfo from './components/TianyanchaInfo';
import RiskList from './components/RiskList';

// 弹出主体
const GlobalModal = ({ visible, id, dispatch }: any) => {
  const intl = useIntl();

  // 页面显示具体tab类型
  const [modalType, setModalType] = useState<'register' | 'category' | 'tianyancha' | 'risk'>('register');
  //供应商信息数据
  const [registerInfo, setRegisterInfo] = useState<any>(null);
  //获取供应商信息
  const fetchRegisterInfo = () => {
    //供应商信息

    coscoSupplierBase(id).then((res) => {
      let { code, data } = res;
      if (code == 200) {
        setRegisterInfo(data);
      }
    })
  };
  //切换 供应商信息 准入品类/品类库 天眼查工商信息  合规风险列表 页面标签
  const handleSwitch = (type: typeof modalType) => {
    setModalType(type);
  };
  // 渲染页面 供应商信息 准入品类/品类库 天眼查工商信息  合规风险列表 页面标签
  const renderContent = () => {
    if (modalType === 'register' && registerInfo?.coscoSupplierBase) {
      //供应商页面
      return <SupplierRegisterInfo registerInfo={registerInfo} />;
    }
    if (modalType === 'category') {
      //准入品类/品类库 
      return <AccessCategoryTable id={id} />
    }
    if (modalType === 'tianyancha') {
      //天眼查信息
      return <TianyanchaInfo id={id} />;
    }
    if (modalType === 'risk') {
      //合规风险列表
      return <RiskList id={id} />;
    }
    return null;
  };
  // 初始化
  useEffect(() => {
    if (visible) {
      setModalType('register');
      fetchRegisterInfo();
    }
  }, [visible, id]);
  return (
    <Modal
      visible={visible}
      zIndex={1100}
      width="90%"
      onCancel={() => {
        setRegisterInfo(null);          // ← 清空数据
        dispatch({ type: 'globalModal/hide' });
      }}
      footer={null}
      title={
        <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
          <span>{intl.formatMessage({ id: 'component.globalModal.title' })}</span>
        </div>
      }
    >
      {(registerInfo?.coscoSupplierBase.supplierType !== 'pe' && registerInfo ) ?
        (
          <div>
            <Space style={{ marginBottom: 16 }}>
              <Button type={modalType === 'register' ? 'primary' : 'default'} onClick={() => handleSwitch('register')}>{intl.formatMessage({ id: 'component.globalModal.register' })}</Button>
              <Button type={modalType === 'category' ? 'primary' : 'default'} onClick={() => handleSwitch('category')}>{intl.formatMessage({ id: 'component.globalModal.category' })}</Button>
              <Button type={modalType === 'tianyancha' ? 'primary' : 'default'} onClick={() => handleSwitch('tianyancha')}>{intl.formatMessage({ id: 'component.globalModal.tianyancha' })}</Button>
              <Button type={modalType === 'risk' ? 'primary' : 'default'} onClick={() => handleSwitch('risk')}>{intl.formatMessage({ id: 'component.globalModal.ComplianceRisk' })}</Button>
            </Space>
            <div style={{ height: '600px', overflowY: 'auto' }}>
              {renderContent()}
            </div>
          </div>
        ) : (
          <Descriptions bordered column={3} style={{ marginBottom: 24 }} title={intl.formatMessage({ id: 'component.globalModal.supplierRegisterInfo' })}>
            <Descriptions.Item label="姓名" labelStyle={{ width: '140px' }}>
                <span>{registerInfo?.coscoSupplierBase.personName}</span>
            </Descriptions.Item>
            <Descriptions.Item label="身份证号" labelStyle={{ width: '140px' }}>
                <span>{registerInfo?.coscoSupplierBase.idCard}</span>
            </Descriptions.Item>
            <Descriptions.Item label="联系电话" labelStyle={{ width: '140px' }}>
                <span>{registerInfo?.coscoSupplierBase.personPhone}</span>
            </Descriptions.Item>
            <Descriptions.Item label="开户行">
                <span>{registerInfo?.coscoSupplierBase.personBank}</span>
            </Descriptions.Item>
            <Descriptions.Item label="银行账号">
                <span>{registerInfo?.coscoSupplierBase.personAccount}</span>
            </Descriptions.Item>
            {/* <Descriptions.Item label="相关证照">
                <span>{registerInfo?.coscoSupplierBase.accessory}</span>
            </Descriptions.Item> */}
          </Descriptions>
        )
      }


    </Modal>
  );
};

export default connect(({ globalModal }: any) => ({
  visible: globalModal.visible,
  id: globalModal.id,
}))(GlobalModal);
