import { useMemo } from 'react'
import { useModel } from '@umijs/max';
import Modal from '@/components/HncyModal';
import Category from '@/pages/Common/Quality/Category'; // CQI类别
import InfluenceSign from '@/pages/Common/Sign/InfluenceSign'

/**
 * 
 * @description 城市CQI弹窗
 */

const QualityModal = () => {

  const { modalOpen, setModalOpen, modalOpt, setModalOpt, currentCqiData, influenceIndexData } = useModel('qualityModal', (model) => ({
    modalOpen: model.modalOpen,
    setModalOpen: model.setModalOpen,
    modalOpt: model.modalOpt,
    setModalOpt: model.setModalOpt,
    currentCqiData: model.currentCqiData,
    influenceIndexData: model.influenceIndexData
  }));

  const renderModalComp: any = useMemo(() => {
    return {
      'category':  <Category item={currentCqiData} />,
      'influenceSign': <InfluenceSign data={influenceIndexData} />
    }
  }, [modalOpt]);

  const handleRender = (index: number) => {
    if(modalOpt.length - 1 !== index) {
      console.log(index + 1, modalOpt.length - 1)
      const newModalOpt = [...modalOpt]
      newModalOpt.splice(index + 1, modalOpt.length - 1)
      setModalOpt(newModalOpt);
    }
  }

  return (
    <Modal
        open={modalOpen}
        title={<>
          {
            modalOpt?.length && (
              <>
                {
                  modalOpt.map((item: any, index: number) => (
                    <span key={item.type} style={{ cursor: 'pointer' }} onClick={() => handleRender(index)}>
                      {item.title}
                      {
                        modalOpt.length - 1 !== index && <>/</>
                      }
                    </span>
                  ))
                }
              </>
            )
          }
        </>}
        onCancel={() => setModalOpen(false)}
        width={1470}
        height={846}
      >
        {renderModalComp[modalOpt[modalOpt.length - 1]?.type]}
      </Modal>
  )
}

export default QualityModal