{"version":3,"sources":["webpack://_N_E/./new/side-nav/components/usedcar-modal/index.tsx","webpack://_N_E/./new/side-nav/components/usedcar-modal/index.module.scss"],"names":["UsedCarLinkModal","linkTaget","useState","show","setShow","navStatus","useSideNavStatus","useContext","GlobalStoreContext","state","userData","useResponsive","wrapTop","setWrapTop","showHandler","useCallback","type","value","navItemDOM","document","querySelector","rect","getBoundingClientRect","top","getHeaderHeight","err","logger","message","useEffect","showToken","PubSub","getClassName","useMemo","url","setUrl","routeChangeComplete","console","log","window","location","pathname","Router","visited","setVisited","classNames","styles","active","id","icon","name","link","as","isActive","test","map","child","i","href","prefetch","target","onClick","e","stopPropagation","sendTeaCommEvent","button_name","event_id","page_id","module","exports"],"mappings":"kWAyBe,SAASA,EAAT,GAAgE,IAApCC,EAAoC,EAApCA,UAAoC,GACrDC,eAAS,GAA1BC,EADsE,KAChEC,EADgE,KAEvEC,GAAYC,UAF2D,IAG9CC,gBAAWC,KAAlCC,MACAC,UACWC,WAEWT,cAAS,IAAhCU,EAPsE,KAO7DC,EAP6D,KASvEC,GAAcC,kBAAY,SAACC,EAAMC,GACrCb,EAAQa,GACR,IAAI,MACIC,EAAaC,SAASC,cAAT,wBACA,YAEbC,EAAI,OAAGH,QAAH,IAAGA,GAAH,UAAGA,EAAYI,6BAAf,aAAG,OAAAJ,GACbL,GAAe,OAAJQ,QAAI,IAAJA,OAAA,EAAAA,EAAME,MAAMC,UACvB,MAAOC,GAAK,MACZC,SAAA,wEAEKD,SAFL,aAEI,EAAcE,aAInB,KACHC,gBAAU,WACR,IAAMC,EAAYC,cAAiB,gBAAiBhB,GACpD,OAAO,WACLgB,gBAAmBD,MAEpB,IAEH,IAAME,GAAuBC,cAAQ,WACnC,OAAQ3B,GACN,IAAK,KACL,IAAK,QACH,MAAO,cACT,IAAK,MACH,MAAO,2BACT,IAAK,SACH,MAAO,4BACT,IAAK,SACH,MAAO,4BAEX,MAAO,8BACN,CAACA,IA7CyE,GA+CvDH,cAAS,IAAxB+B,EA/CsE,KA+CjEC,EA/CiE,KAiDvEC,GAAsBpB,kBAAY,SAACkB,GAC3B,KAARA,GAIJG,QAAQC,IAAI,WAAYJ,GACxBC,EAAOD,IAJLC,EAAO,OAKR,KAEHN,gBAAU,WAAM,QAGd,OAFAM,GAAa,QAAN,EAAAI,cAAA,mBAAQC,gBAAR,eAAkBC,WAAY,KACrCC,oBAAiB,sBAAuBN,GACjC,WACLM,qBAAkB,sBAAuBN,MAE1C,IAhE0E,OAkE/CjC,eAAS,GAAhCwC,EAlEsE,KAkE7DC,EAlE6D,KAkG7E,OALAf,gBAAU,WACJzB,IAASuC,GACXC,GAAW,KAEZ,CAACxC,EAAMuC,KAER,iCACE,4DA+Ea9B,MA/Eb,KACagC,IACTC,sBACA,2BAHJ,OAMA,4DAyEajC,MAzEb,KACagC,IAAWb,EAAc,CAClC,mBAAmB,EACnBe,OAAQ3C,KAHZ,cAME,2DAmEWS,MAnEX,4BA7CS,CACb,CACEmC,GAAI,OACJC,KAAM,eACNC,KAAM,eACNC,KAAM,iDACNC,GAAI,iDACJC,SAAU,SAACnB,GAET,MAAO,6DAA6DoB,KAClEpB,KAIN,CACEc,GAAI,OACJC,KAAM,oBACNC,KAAM,2BACNC,KAAM,gBACNC,GAAI,gBACJC,SAAU,SAACnB,GACT,MAAO,mBAAmBoB,KAAKpB,MAyBrBqB,KAAI,SAACC,EAAgBC,GAAjB,aACV,2DAiEO5C,MAjEP,UACE,SAAC,UAAD,CAAM6C,KAAMF,EAAML,MAAQ,GAAIC,GAAE,OAAEI,QAAF,IAAEA,OAAF,EAAEA,EAAOJ,GAAIO,UAAU,EAAvD,UACE,eAIEC,OAAQ1D,EACR2D,QAAS,SAACC,GACRA,EAAEC,mBACFC,QAAiB,YAAa,CAC5BC,YAAaT,EAAMN,KACnBgB,SAAU,mBACVC,QAAS,+BAVf,4CA+DGtD,MA/DH,KACagC,IAAW,YAAa,CACjCE,OAAM,OAAES,QAAF,IAAEA,GAAF,UAAEA,EAAOH,gBAAT,aAAE,OAAAG,EAAkBtB,MAF9B,eAcE,6DAiDCrB,MAjDD,wCACA,6DAgDCA,MAhDD,iBAAwB2C,EAAMN,aAjBpC,qBAAuBO,YAf/B,6CAgFe5C,GAhFf,smCAgFeA,EAhFf,2U,kBC3HJuD,EAAOC,QAAU,CAAC,iBAAiB,sCAAsC,kBAAkB,uCAAuC,OAAS,8BAA8B,SAAS,8BAA8B,SAAS,8BAA8B,SAAS","file":"static/chunks/2355.b19a0b180e6497284d6b.js","sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport classNames from 'classnames'\nimport PubSub from 'pubsub-js'\nimport { logger } from 'lib/slardar-utils'\nimport Router from 'next/router'\n\nimport { useResponsive } from 'Components/hooks/use-responsive'\nimport { getHeaderHeight } from 'Components/hooks/use-header-height'\nimport useSideNavStatus from 'Components/hooks/use-side-nav-status'\nimport styles from './index.module.scss'\nimport Link from 'next/link'\nimport { IConfig } from 'New/side-nav/config'\nimport { GlobalStoreContext } from 'Components/store'\nimport { sendTeaCommEvent } from 'lib/tea-analyze'\n\ntype UsedCarLinkModalProps = {\n  linkTaget?: '_blank' | '_self'\n}\n\nexport default function UsedCarLinkModal({ linkTaget }: UsedCarLinkModalProps) {\n  const [show, setShow] = useState(false)\n  const navStatus = useSideNavStatus()\n  const { state: globalStore } = useContext(GlobalStoreContext)\n  const { userData } = globalStore\n  const responsive = useResponsive()\n\n  const [wrapTop, setWrapTop] = useState(0)\n\n  const showHandler = useCallback((type, value) => {\n    setShow(value)\n    try {\n      const navItemDOM = document.querySelector(\n        `#sideItemWrap_${'usedcar'}`\n      ) as HTMLElement\n      const rect = navItemDOM?.getBoundingClientRect?.()\n      setWrapTop(rect?.top - getHeaderHeight())\n    } catch (err) {\n      logger.warn(\n        `[side item height] Error get side item height, err: ${\n          (err as any)?.message\n        }`\n      )\n    }\n  }, [])\n  useEffect(() => {\n    const showToken = PubSub.subscribe('HOVER_USEDCAR', showHandler)\n    return () => {\n      PubSub.unsubscribe(showToken)\n    }\n  }, [])\n\n  const getClassName: string = useMemo(() => {\n    switch (navStatus) {\n      case 'on':\n      case 'fixed':\n        return 'tw-left-160'\n      case 'off':\n        return 'tw-left-82 xl:tw-left-92'\n      case 'md-off':\n        return 'tw-left-82 lg:tw-left-160'\n      case 'lg-off':\n        return 'tw-left-82 xl:tw-left-160'\n    }\n    return 'tw-left-82 lg:tw-left-160'\n  }, [navStatus])\n\n  const [url, setUrl] = useState('')\n\n  const routeChangeComplete = useCallback((url: string) => {\n    if (url === '') {\n      setUrl('/')\n      return\n    }\n    console.log('test-url', url)\n    setUrl(url)\n  }, [])\n\n  useEffect(() => {\n    setUrl(window?.location?.pathname || '/')\n    Router.events.on('routeChangeComplete', routeChangeComplete)\n    return () => {\n      Router.events.off('routeChangeComplete', routeChangeComplete)\n    }\n  }, [])\n\n  const [visited, setVisited] = useState(false)\n  const config = [\n    {\n      id: 'list',\n      icon: 'icon_usedcar',\n      name: '买车',\n      link: '/usedcar/x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x',\n      as: '/usedcar/x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x',\n      isActive: (url: string) => {\n        // 选车页面\n        return /\\/usedcar\\/(\\d|has_related_video|car_source_types|x|,|-)+/g.test(\n          url\n        )\n      },\n    },\n    {\n      id: 'sale',\n      icon: 'icon_calculate_24',\n      name: '高价卖车',\n      link: '/usedcar/sale',\n      as: '/usedcar/sale',\n      isActive: (url: string) => {\n        return /\\/usedcar\\/sale/g.test(url)\n      },\n    },\n  ]\n\n  useEffect(() => {\n    if (show && !visited) {\n      setVisited(true)\n    }\n  }, [show, visited])\n  return (\n    <>\n      <div\n        className={classNames(\n          styles['car-modal-mask'],\n          'tw-hidden 2xl:tw-block'\n        )}\n      />\n      <div\n        className={classNames(getClassName, {\n          'side-hover-item': true,\n          active: show,\n        })}\n      >\n        <ul className=\"side-child-wrap\">\n          {config.map((child: IConfig, i: number) => (\n            <li key={`side-child-${i}`}>\n              <Link href={child.link || ''} as={child?.as} prefetch={false}>\n                <a\n                  className={classNames('side-item', {\n                    active: child?.isActive?.(url),\n                  })}\n                  target={linkTaget}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    sendTeaCommEvent('clk_event', {\n                      button_name: child.name,\n                      event_id: 'common_menu_item',\n                      page_id: 'page_used_car_source_list',\n                    })\n                  }}\n                >\n                  <span className={`icon lg:tw-inline-block tw-hidden`} />\n                  <span className=\"name\">{child.name}</span>\n                </a>\n              </Link>\n            </li>\n          ))}\n        </ul>\n      </div>\n      <style jsx>\n        {`\n          .side-child-wrap {\n            width: 112px;\n            background: #fff;\n            border-radius: 2px;\n          }\n          .side-item {\n            display: block;\n            line-height: 42px;\n            font-size: 14px;\n            color: #1f2129;\n            text-align: center;\n            cursor: pointer;\n          }\n\n          .side-item:hover {\n            background: rgba(255, 204, 50, 0.12);\n            color: #e65800;\n            cursor: pointer;\n          }\n\n          .side-item.active {\n            font-weight: 500;\n            color: #1f2129;\n            background: linear-gradient(250deg, #ffd861 -0.65%, #ffcc32 100%);\n          }\n          .side-hover-item {\n            transform: translate3d(-110%, 0, 0);\n          }\n          .side-hover-item.active {\n            transform: translate3d(0, 0, 0);\n          }\n          .side-hover-item:hover {\n            transform: translate3d(0, 0, 0);\n          }\n          .side-hover-item {\n            z-index: 9;\n            position: absolute;\n            border-top: 2px solid transparent;\n            border-left: 2px solid transparent;\n            top: ${wrapTop}px;\n            transition: transform 0.3s ease-in-out;\n          }\n\n          .on.side-hover-item {\n            left: 160px !important;\n            display: none;\n          }\n\n          .off.side-hover-item {\n            left: 82px !important;\n            display: block;\n          }\n        `}\n      </style>\n    </>\n  )\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"car-modal-mask\":\"usedcar-modal_car-modal-mask___z701\",\"side-hover-item\":\"usedcar-modal_side-hover-item__Xb_gN\",\"active\":\"usedcar-modal_active__2Aa5A\",\"lg-off\":\"usedcar-modal_lg-off__CE5Ug\",\"md-off\":\"usedcar-modal_md-off__1ywRI\",\"is-off\":\"usedcar-modal_is-off__3XDo5\"};"],"sourceRoot":""}