import React, { useEffect, useState } from 'react';
import { connect, useIntl } from 'umi';
import { Modal, Button, Space, Tag } from 'antd';
import { coscoSupplier } 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 isBlacklisted = true;
  //灰名单显示状态
  const isGreylisted = true;
  //获取供应商信息
  const fetchRegisterInfo = () => {
    //供应商信息
    coscoSupplier({id}).then((res) => {
      let { code, data } = res;
      if (code == 200) {
        setRegisterInfo(data);
      }
    })
  };
  //切换 供应商信息 准入品类/品类库 天眼查工商信息  合规风险列表 页面标签
  const handleSwitch = (type: typeof modalType) => {
    setModalType(type);
  };
  // 渲染页面 供应商信息 准入品类/品类库 天眼查工商信息  合规风险列表 页面标签
  const renderContent = () => {
    if (modalType === 'register') {
      //供应商页面
      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={() => dispatch({ type: 'globalModal/hide' })}
      footer={null}
      title={
        <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
          <span>{intl.formatMessage({id: 'component.globalModal.title' })}</span>
          <span style={{ marginLeft: '10px' }}>
            {isBlacklisted && <Tag color="red">{intl.formatMessage({id: 'component.globalModal.blacklist' })}</Tag>}
            {isGreylisted && <Tag color="gray">{intl.formatMessage({id: 'component.globalModal.GreyList' })}</Tag>}
          </span>
        </div>
      }
    >
      <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>
    </Modal>
  );
};

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