{"version":3,"sources":["webpack://_N_E/./public/static/more-ic-b@3x-w.png","webpack://_N_E/./public/static/delete-ic-new.svg","webpack://_N_E/./components/loading.tsx","webpack://_N_E/./pages-components/picture/home/reducer.tsx","webpack://_N_E/./pages-components/picture/home/brand.tsx","webpack://_N_E/./pages-components/picture/home/car-list.tsx","webpack://_N_E/./pages-components/picture/home/selected.tsx","webpack://_N_E/./pages-components/picture/home/price-input.tsx","webpack://_N_E/./pages-components/picture/home/conditions.tsx","webpack://_N_E/./pages-components/picture/home/conditions-list.tsx","webpack://_N_E/./pages-components/picture/home/home.tsx","webpack://_N_E/./pages/picture/home.tsx","webpack://_N_E/./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?a55f","webpack://_N_E/./public/static/more-ic-b-w.png","webpack://_N_E/./public/static/active-icon-pic.svg","webpack://_N_E/./public/static/more-ic-b@2x-w.png","webpack://_N_E/./components/scroll-loader.tsx"],"names":["module","exports","Loading","initOptions","reducer","state","action","type","options","payload","key","concat","param","text","filter","option","ContextStore","createContext","dispatch","ContextProvider","props","children","initProps","useReducer","useEffect","Provider","value","Brand","letters","brands","React","useContext","divRef","useRef","useState","current","setCurrent","offsetMap","Map","scrollView","letter","size","Array","from","forEach","item","set","getAttribute","offsetTop","undefined","get","scrollTop","requestAnimationFrame","observer","IntersectionObserver","changes","lettersTop","change","target","top","boundingClientRect","index","findIndex","isIntersecting","root","rootMargin","threshold","ele","observe","brandInfo","querySelector","disconnect","map","onClick","e","preventDefault","stopPropagation","sendTeaCommEvent","initial","classnames","active","ref","style","paddingTop","brand","info","pinyin","data-letter","brand_name","brand_id","src","applyHttpsImage","image_url","alt","CarList","sort","cityName","useCityName","count","offset","loading","setLoading","series","series_count","carData","setCarData","getParams","useCallback","console","log","Object","entries","length","join","getStat","keys","reduce","acc","curr","getCars","fetch","getUrl","encodeURIComponent","method","headers","body","then","res","json","firstRender","isOptionActive","some","data","status","Fragment","fontWeight","role","sort_type","end","loadMoreHandler","list_item_num","more_ic_b_img","require","more_ic_b_img2","more_ic_b_img3","imageComponent","image_num","href","id","series_id","as","assign","car_series_name","outter_name","series_name","car_series_id","rank","className","real_cover_url","srcSet","marginLeft","width","height","title","dealer_price","styles","renderList","Select","filterList","indexOf","PriceInput","low","setLow","high","setHigh","onChange","disabled","mLow","parseInt","mHigh","Conditions","conditions","subConditions","setSubConditions","sub_options","setFuel","allConditionKeys","useMemo","Set","handleOptionClick","line","currentLine","newOptions","outter_detail_type","new_energy","fuel_form","error","series_type","push","marginBottom","event","ConditionsList","onSSR","Picture","init","setInit","getQuery","split","Number","name","content","reHandleData","unshift","newPrice","list","slice","shift","getInitialProps","a","catch","err","window","__NEXT_P","ScrollLoader","verticalMargin","dom","this","HEIGHT","document","documentElement","clientHeight","addObserver","prevProps","removeObserver","unobserve"],"mappings":"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","file":"static/chunks/pages/picture/home-8520855927b13c8554c5.js","sourcesContent":["module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAJKADAAQAAAABAAAAJAAAAAAqDuP8AAAAxUlEQVRYCe2VTQrCMBBGi/cQPIG26v3XbjyC4L7+HCG+SmYzJIgkJVl8A8MkoZk+XkI7DAoZkIHODIQQduTYBVaEuVOf5NQcCogradEeCpKJXEAsBJW8JuiRqaQZvyhT3khuLlM5M369hqmNb1o4D4X7623Hzkj28RWPMA+qxYtBm58vLz6QHuZYz/0fnQSTk4WZfeKYTrnnV12PMDPV4s1AMF/rmLiYFupi5rzqcfxqDsCWvHUBY7ARqs2dMQhVGZCBAgMfPEzIHLLGULsAAAAASUVORK5CYII=\"","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjMUYyMTI5IiBzdHJva2Utd2lkdGg9IjEuMzMzIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNjY3IDRMMTIuNjY3IDE0IDMuMzMzIDE0IDMuMzMzIDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDcwIC0zMjEpIHRyYW5zbGF0ZSg2NTggMzA1KSB0cmFuc2xhdGUoODEyIDE2KSIvPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTkuMzMzIDYuNjY3TDkuMzMzIDExLjMzM002LjY2NyA2LjY2N0w2LjY2NyAxMS4zMzMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDcwIC0zMjEpIHRyYW5zbGF0ZSg2NTggMzA1KSB0cmFuc2xhdGUoODEyIDE2KSIvPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik0yIDRMMTQgNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0NzAgLTMyMSkgdHJhbnNsYXRlKDY1OCAzMDUpIHRyYW5zbGF0ZSg4MTIgMTYpIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUuMzMzIDJMMTAuNjY3IDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDcwIC0zMjEpIHRyYW5zbGF0ZSg2NTggMzA1KSB0cmFuc2xhdGUoODEyIDE2KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K\"","import * as React from 'react'\n\nconst Loading = () => (\n  <div>\n    <div className=\"spinner\">\n      <div className=\"bounce1\" />\n      <div className=\"bounce2\" />\n      <div className=\"bounce3\" />\n      <span>加载中…</span>\n    </div>\n    <style jsx>\n      {`\n        .spinner {\n          padding: 20px 0;\n          text-align: center;\n          font-size: 0;\n        }\n\n        .spinner > div {\n          display: inline-block;\n          vertical-align: middle;\n          width: 4px;\n          height: 4px;\n          margin-right: 6px;\n          background-color: #c1c1c1;\n          border-radius: 100%;\n          animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n        }\n\n        .spinner .bounce1 {\n          animation-delay: -0.32s;\n        }\n\n        .spinner .bounce2 {\n          animation-delay: -0.16s;\n        }\n        span {\n          font-size: 12px;\n          color: #666;\n          margin-left: 6px;\n          vertical-align: middle;\n        }\n        @keyframes sk-bouncedelay {\n          0%,\n          80%,\n          100% {\n            transform: scale(0);\n          }\n          40% {\n            transform: scale(1.5);\n          }\n        }\n      `}\n    </style>\n  </div>\n)\n\nexport default Loading\n","/* 区分是获取品牌还是条件的汽车列表 */\n\nimport React, { useEffect, useReducer, createContext } from 'react'\n\ninterface IProps {\n  children: React.ReactChild[]\n  initProps: ISelectedOptions\n}\ninterface IOption {\n  param: number | string\n  text: string\n}\ninterface ISetOptionAction {\n  type: 'setOption'\n  payload: {\n    key: string\n  } & IOption\n}\n\ninterface ISetSingleOptionAction {\n  type: 'setSingleOption'\n  payload: {\n    key: string\n  } & IOption\n}\ninterface IRemoveOptionAction {\n  type: 'removeOption'\n  payload: {\n    key: string\n    param: string | number\n  }\n}\ninterface IClearOptionAction {\n  type: 'clearOptions'\n}\ninterface IResetOptionsAction {\n  type: 'resetOptions'\n  payload: ISelectedOptions\n}\ntype IAction =\n  | ISetOptionAction\n  | ISetSingleOptionAction\n  | IRemoveOptionAction\n  | IClearOptionAction\n  | IResetOptionsAction\n// 已选中的条件\n// interface ISelectedOptions {\n//   [key: string]: Partial<IOption>\n// }\ninterface ISelectedOptions {\n  [key: string]: IOption[]\n}\n// const state = {\n//   brand: {\n//     param: 2,\n//     text: '宝马'\n//   }\n// }\ninterface IContext {\n  state: ISelectedOptions\n  dispatch(param: ISetOptionAction): void\n  dispatch(param: ISetSingleOptionAction): void\n  dispatch(param: IRemoveOptionAction): void\n  dispatch(param: IClearOptionAction): void\n  dispatch(param: IResetOptionsAction): void\n}\n\nconst initOptions = {}\n\nfunction reducer(state: ISelectedOptions, action: IAction) {\n  switch (action.type) {\n  case 'setOption': {\n    const options = state[action.payload.key] || []\n    return {\n      ...state,\n      [action.payload.key]: options.concat([\n        {\n          param: action.payload.param,\n          text: action.payload.text,\n        },\n      ]),\n    }\n  }\n  case 'setSingleOption': {\n    return {\n      ...state,\n      [action.payload.key]: [\n        {\n          param: action.payload.param,\n          text: action.payload.text,\n        },\n      ],\n    }\n  }\n  case 'removeOption': {\n    const options = state[action.payload.key] || []\n    return {\n      ...state,\n      [action.payload.key]: options.filter(\n        option => option.param !== action.payload.param\n      ),\n    }\n  }\n  case 'clearOptions':\n    return initOptions\n  case 'resetOptions':\n    return {\n      ...action.payload,\n    }\n  default:\n    return initOptions\n  }\n}\nconst ContextStore = createContext<IContext>({\n  state: initOptions,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  dispatch: () => {},\n})\n\nconst ContextProvider = (props: IProps) => {\n  const { children, initProps } = props\n  const [state, dispatch] = useReducer(reducer, initProps || initOptions)\n  // if (typeof window !== 'undefined') {\n  //   window.state = state\n  // }\n  useEffect(() => {\n    dispatch({\n      type: 'resetOptions',\n      payload: initProps,\n    })\n  }, [initProps])\n  return (\n    <ContextStore.Provider value={{ state, dispatch }}>\n      {children}\n    </ContextStore.Provider>\n  )\n}\n\nexport { ContextStore, ContextProvider }\n","/* 左边的品牌列表 */\nimport React, { useRef, useState, useEffect } from 'react'\nimport get from 'lodash/get'\nimport classnames from 'classnames'\n\nimport { sendTeaCommEvent } from 'lib/tea-analyze'\nimport { ContextStore } from './reducer'\n\nimport { IInfoProps } from './interface'\nimport applyHttpsImage from 'lib/apply-https-img'\n\ninterface Props {\n  letters: string[]\n  brands: IInfoProps[][]\n}\n\nexport default function Brand({ letters, brands }: Props) {\n  const { state, dispatch } = React.useContext(ContextStore)\n  // 获取需要监听的dom\n  const divRef = useRef<HTMLDivElement>(null)\n  // 当前所在的字母\n  const [current, setCurrent] = useState('A')\n\n  // 重新定位的位置集合\n  const offsetMap = new Map()\n\n  useEffect(() => {\n    const observer: IntersectionObserver = addObserver()\n    divRef.current &&\n      [...divRef.current.children].forEach((ele: Element) => {\n        observer.observe(ele)\n      })\n    const brandInfo = get(state, ['brand', 0])\n    if (brandInfo && brandInfo.param) {\n      // 滚动品牌列表到指定位置\n      requestAnimationFrame(() => {\n        if (!divRef.current) {\n          return\n        }\n        const target = divRef.current.querySelector(`.brand-${brandInfo.param}`)\n        if (!target) {\n          return\n        }\n        // 避免字母遮挡\n        divRef.current.scrollTop = (target as HTMLElement).offsetTop - 32\n      })\n    }\n    return () => {\n      observer.disconnect()\n    }\n    // eslint-disable-next-line\n  }, [state])\n\n  // 监听品牌位置\n  function addObserver(): IntersectionObserver {\n    return new IntersectionObserver(\n      changes => {\n        const lettersTop = divRef.current && divRef.current.offsetTop\n        changes.forEach(change => {\n          const letter = change.target.getAttribute('data-letter') as string\n          const { top } = change.boundingClientRect\n          const index = letters.findIndex((item: string) => item === letter)\n          if (top <= 0 && !change.isIntersecting) {\n            setCurrent(letters[index + 1])\n          }\n          if (top <= 0 && change.isIntersecting) {\n            setCurrent(letters[index])\n          }\n          if (top === lettersTop && change.isIntersecting) {\n            setCurrent(letter)\n          }\n        })\n      },\n      {\n        root: (divRef.current as unknown) as Element,\n        rootMargin: '0px 0px 0px 0px',\n        threshold: [0.0000001],\n      }\n    )\n  }\n\n  // 得到每个字母点击要定的位置\n  function getOffsetTop() {\n    divRef.current &&\n      Array.from(divRef.current.children).forEach((item: Element) => {\n        offsetMap.set(\n          item.getAttribute('data-letter'),\n          (item as HTMLElement).offsetTop\n        )\n      })\n  }\n\n  // 点击以后将右边滚动到对应的字母位置\n  function scrollView(letter: string) {\n    if (offsetMap.size === 0) {\n      getOffsetTop()\n    }\n    if (offsetMap.get(letter) !== undefined) {\n      if (divRef.current) {\n        divRef.current.scrollTop = offsetMap.get(letter)\n      }\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setCurrent(letter)\n        })\n      })\n    }\n  }\n\n  function renderLetters() {\n    return (\n      <ul className=\"fl\">\n        {letters.map((letter: string) => (\n          <li\n            key={letter}\n            className={classnames({\n              active: letter === current,\n            })}\n            onClick={(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n              e.preventDefault()\n              e.stopPropagation()\n              scrollView(letter)\n              sendTeaCommEvent('click_brand_initial_index', {\n                initial: letter,\n              })\n            }}\n          >\n            {letter}\n          </li>\n        ))}\n        <style jsx>\n          {`\n            ul {\n              width: 28px;\n              padding: 11px 0px;\n              user-select: none;\n              background-color: #1a1a1a;\n              border-radius: 2px 0 0 2px;\n            }\n            li {\n              height: 28px;\n              line-height: 28px;\n              font-size: 16px;\n              text-align: center;\n              color: #fff;\n            }\n            li:hover {\n              background-color: rgba(255, 255, 255, 0.24);\n              transition: background 0.3s ease-in-out;\n              cursor: pointer;\n            }\n            .active {\n              color: #1a1a1a;\n              transition: all 0.3s ease-in-out;\n              background-color: #ffcd32;\n            }\n            .active:hover {\n              background-color: #ffcd32;\n            }\n          `}\n        </style>\n      </ul>\n    )\n  }\n\n  function renderBrands() {\n    return (\n      <div className=\"brands-wrapper\">\n        <div className=\"brands\" ref={divRef}>\n          <div style={{ paddingTop: '11px' }} />\n          {brands.map((brand: IInfoProps[]) => (\n            <div key={brand[0].info.pinyin} data-letter={brand[0].info.pinyin}>\n              {brand.map((item: IInfoProps) => {\n                if (item.type === '1001') {\n                  return (\n                    <p\n                      key={item.info.brand_name}\n                      className={classnames(\n                        'brand',\n                        `brand-${item.info.brand_id}`\n                      )}\n                      onClick={() => {\n                        sendTeaCommEvent('click_garage_brand_selector', {\n                          brand_id: item.info.brand_id,\n                          brand_name: item.info.brand_name,\n                        })\n\n                        dispatch({\n                          type: 'setSingleOption',\n                          payload: {\n                            key: 'brand',\n                            param: item.info.brand_id,\n                            text: item.info.brand_name,\n                          },\n                        })\n                      }}\n                    >\n                      <img\n                        src={applyHttpsImage(item.info.image_url || '')}\n                        alt=\"\"\n                      />\n                      <span>{item.info.brand_name}</span>\n                    </p>\n                  )\n                }\n                return (\n                  <h4\n                    className=\"letter\"\n                    key={item.info.pinyin}\n                    data-letter={item.info.pinyin}\n                  >\n                    {item.info.pinyin}\n                  </h4>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n        <style jsx>\n          {`\n            .brands-wrapper {\n              border-radius: 0 2px 2px 0;\n              overflow: hidden;\n            }\n            .brands {\n              height: 750px;\n              overflow-x: hidden;\n              overflow-y: auto;\n              transform: translateZ(0);\n              border: 1px solid #e6e6e6;\n              border-left: 0;\n            }\n            .brand {\n              line-height: 52px;\n              padding-left: 16px;\n              cursor: pointer;\n              font-size: 16px;\n            }\n            .brand:hover {\n              color: #e65800;\n            }\n            .brand img {\n              width: 36px;\n              height: 36px;\n              margin-right: 8px;\n              border-radius: 50%;\n              vertical-align: middle;\n            }\n            .letter {\n              position: sticky;\n              top: 0;\n              line-height: 28px;\n              padding-left: 16px;\n              font-size: 12px;\n              color: #666;\n              background: #f7f8fc;\n            }\n          `}\n        </style>\n      </div>\n    )\n  }\n\n  return (\n    <aside className=\"clearfix\">\n      {renderLetters()}\n      {renderBrands()}\n      <style jsx>\n        {`\n          aside {\n            border-radius: 2px;\n            position: sticky;\n            top: 0px;\n            display: inline-block;\n            width: 270px;\n            height: 666px;\n            vertical-align: top;\n          }\n        `}\n      </style>\n    </aside>\n  )\n}\n","/* 符合条件的汽车的列表 */\nimport React, {\n  useRef,\n  useState,\n  useEffect,\n  useContext,\n  useCallback,\n} from 'react'\nimport css from 'styled-jsx/css'\nimport Link from 'next/link'\nimport fetch from 'isomorphic-unfetch'\nimport classnames from 'classnames'\nimport ScrollLoader from 'Components/scroll-loader'\n\nimport getUrl from 'lib/url'\nimport { sendTeaCommEvent } from 'lib/tea-analyze'\n\nimport Image from 'Components/image'\nimport Loading from 'Components/loading'\nimport { useCityName } from 'Components/hooks'\n\nimport { ContextStore } from './reducer'\nimport { ISortProps, IOptionProps, IOptionsState, ICarProps } from './interface'\n\ninterface Props {\n  sort: ISortProps[]\n}\ninterface ICarData {\n  /*  汽车总数量 */\n  series_count?: number\n  /* 汽车列表 */\n  series: ICarProps[]\n}\n\nexport default function CarList({ sort }: Props) {\n  // 已选中的条件\n  const { state, dispatch } = useContext(ContextStore)\n  // 获取当前城市\n  const cityName = useCityName() || ''\n  /* 懒加载剩余数量 */\n  const count = useRef(0)\n  /* 懒加载当前第几页 */\n  const offset = useRef(0)\n\n  const [loading, setLoading] = useState(true)\n  /* 符合条件的汽车列表 */\n  const [carData, setCarData] = useState<ICarData>({\n    series: [],\n    series_count: undefined,\n  })\n\n  // }, [state, state, cityName])\n\n  // 处理请求参数，序列化已选择条件\n  const getParams = useCallback(() => {\n    console.log('getParams', state)\n    return Object.entries(state)\n      .filter(([, value]) => !!value && value.length > 0)\n      .map(([key, value]) => {\n        if (!value) {\n          return ''\n        }\n        return `${key}=${value.map(item => item.param).join(',')}`\n      })\n      .join('&')\n  }, [state])\n  // 统计用参数\n  function getStat() {\n    return Object.keys(state).reduce((acc: any, curr: string) => {\n      acc[curr] = state[curr].map(item => item.param).join(',')\n      return acc\n    }, {})\n  }\n  // 获取汽车类型\n  const getCars = useCallback(() => {\n    setLoading(true)\n    return fetch(\n      getUrl(\n        `/motor/brand/m/v6/select/series/?city_name=${encodeURIComponent(\n          cityName\n        )}`\n      ),\n      {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded',\n        },\n        body: `offset=${offset.current}&limit=20&is_refresh=${\n          offset.current ? 0 : 1\n        }&city_name=${encodeURIComponent(\n          cityName\n        )}&${getParams()}&source_from=pc_station_image`,\n      }\n    ).then(res => res.json())\n  }, [cityName, getParams])\n\n  const firstRender = useRef(true)\n  useEffect(() => {\n    offset.current = 0\n    if (firstRender.current) {\n      firstRender.current = false\n      return\n    }\n    // if (carData.series.length) {\n    //   setCarData({\n    //     series: [],\n    //     series_count: 0,\n    //   })\n    // }\n    getCars().then(data => {\n      setLoading(false)\n      if (data.status === 'success') {\n        count.current = data.data.series_count\n        setCarData(data.data)\n      }\n    })\n  }, [cityName, getCars])\n  // 懒加载\n  function loadMoreHandler() {\n    count.current -= 20\n    offset.current += 1\n    getCars().then(data => {\n      setLoading(false)\n      if (data.status === 'success') {\n        sendTeaCommEvent('load_garage_series', {\n          list_item_num: data.data.series.length,\n        })\n        setCarData({\n          series_count: data.data.series_count,\n          series: [...carData.series, ...data.data.series],\n        })\n      }\n    })\n  }\n\n  function renderList(data: ICarProps, index: number) {\n    const more_ic_b_img = require('../../../public/static/more-ic-b-w.png')\n    const more_ic_b_img2 = require('../../../public/static/more-ic-b@2x-w.png')\n    const more_ic_b_img3 = require('../../../public/static/more-ic-b@3x-w.png')\n    const imageComponent = css.resolve`\n      .img {\n        width: 100%;\n      }\n    `\n    if (data.image_num !== 0) {\n      return (\n        <Link\n          key={index}\n          href={`${\n            data.image_num === 0\n              ? ''\n              : `/auto/series?seriesId=${data.id ||\n                  data.info.series_id}/images/wg`\n          }`}\n          as={`${\n            data.image_num === 0\n              ? ''\n              : `/auto/series/${data.id || data.info.series_id}/images/wg`\n          }`}\n        >\n          <a\n            target=\"_blank\"\n            onClick={() => {\n              sendTeaCommEvent(\n                'click_garage_series_cell',\n                Object.assign(\n                  {\n                    car_series_name: data.outter_name || data.info.series_name,\n                    car_series_id: data.id || data.info.series_id,\n                    rank: index,\n                  },\n                  getStat()\n                )\n              )\n            }}\n          >\n            <div className=\"image-wrapper\">\n              <Image\n                className={classnames(imageComponent.className, 'img')}\n                src={data.real_cover_url || data.info.image_url}\n              />\n              <div className=\"image-num-wrap\">\n                共{data.image_num}张图\n                <img\n                  src={more_ic_b_img}\n                  srcSet={`${more_ic_b_img2}, ${more_ic_b_img3}`}\n                  style={{\n                    marginLeft: '2px',\n                    width: '12px',\n                    height: '12px',\n                  }}\n                />\n              </div>\n            </div>\n            <div className=\"car-name-wrap\">\n              <p\n                className=\"name line-1\"\n                title={data.outter_name || data.info.series_name}\n              >\n                {data.outter_name || data.info.series_name}\n              </p>\n              <p className=\"price\">\n                {data.dealer_price || data.info.dealer_price}\n              </p>\n            </div>\n\n            {imageComponent.styles}\n            <style jsx>\n              {`\n                .image-num-wrap {\n                  position: absolute;\n                  display: flex;\n                  justify-content: center;\n                  align-items: center;\n                  bottom: 8px;\n                  left: 12px;\n                  font-size: 14px;\n                  color: #ffffff;\n                  padding: 0 8px;\n                  height: 24px;\n                  border-radius: 2px;\n                  background-color: rgba(0, 0, 0, 0.5);\n                }\n                .car-name-wrap {\n                  width: 290px;\n                  height: 40px;\n                  padding: 0 12px;\n                  border-radius: 0 0 2px 2px;\n                  background-color: #f7f8fc;\n                  font-weight: bold;\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                }\n                a {\n                  display: inline-block;\n                  width: 290px;\n                  height: 232px;\n                  border-radius: 2px;\n                  margin: 20px 15px 0 0;\n                  text-align: center;\n                  box-sizing: border-box;\n                }\n\n                a:nth-child(3n) {\n                  margin-right: 0;\n                }\n\n                .image-wrapper {\n                  position: relative;\n                  overflow: hidden;\n                  width: 290px;\n                  height: 192px;\n                  border-radius: 2px;\n                  margin: 0 auto;\n                }\n\n                .name {\n                  line-height: 22px;\n                  margin-bottom: 4px;\n                  font-size: 16px;\n                }\n                .name:hover {\n                  color: #e65800;\n                }\n                .price {\n                  line-height: 20px;\n                  color: #e65800;\n                  display: inline-block;\n                  height: 20px;\n                }\n                .price:hover {\n                  text-decoration: underline;\n                }\n              `}\n            </style>\n          </a>\n        </Link>\n      )\n    } else {\n      return (\n        <a\n          target=\"_blank\"\n          onClick={() => {\n            sendTeaCommEvent(\n              'click_garage_series_cell',\n              Object.assign(\n                {\n                  car_series_name: data.outter_name || data.info.series_name,\n                  car_series_id: data.id || data.info.series_id,\n                  rank: index,\n                },\n                getStat()\n              )\n            )\n          }}\n        >\n          <div className=\"image-wrapper\">\n            <Image\n              className={classnames(imageComponent.className, 'img')}\n              src={data.real_cover_url || data.info.image_url}\n            />\n            <div className=\"image-num-wrap\">\n              共{data.image_num}张图\n              <img\n                src={more_ic_b_img}\n                srcSet={`${more_ic_b_img2}, ${more_ic_b_img3}`}\n                style={{\n                  marginLeft: '2px',\n                  width: '12px',\n                  height: '12px',\n                }}\n              />\n            </div>\n          </div>\n          <div className=\"car-name-wrap\">\n            <p\n              className=\"name line-1\"\n              title={data.outter_name || data.info.series_name}\n            >\n              {data.outter_name || data.info.series_name}\n            </p>\n            <p className=\"price\">\n              {data.dealer_price || data.info.dealer_price}\n            </p>\n          </div>\n\n          {imageComponent.styles}\n          <style jsx>\n            {`\n              .image-num-wrap {\n                position: absolute;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                bottom: 8px;\n                left: 12px;\n                font-size: 14px;\n                color: #ffffff;\n                padding: 0 8px;\n                height: 24px;\n                border-radius: 2px;\n                background-color: rgba(0, 0, 0, 0.5);\n              }\n              .car-name-wrap {\n                width: 290px;\n                height: 40px;\n                padding: 0 12px;\n                border-radius: 0 0 2px 2px;\n                background-color: #f7f8fc;\n                font-weight: bold;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n              }\n              a {\n                display: inline-block;\n                width: 290px;\n                height: 232px;\n                border-radius: 2px;\n                margin: 20px 15px 0 0;\n                text-align: center;\n                box-sizing: border-box;\n              }\n\n              a:nth-child(3n) {\n                margin-right: 0;\n              }\n\n              .image-wrapper {\n                position: relative;\n                overflow: hidden;\n                width: 290px;\n                height: 192px;\n                border-radius: 2px;\n                margin: 0 auto;\n              }\n\n              .name {\n                line-height: 22px;\n                margin-bottom: 4px;\n                font-size: 16px;\n              }\n              .name:hover {\n                color: #e65800;\n              }\n              .price {\n                line-height: 20px;\n                color: #e65800;\n                display: inline-block;\n                height: 20px;\n              }\n              .price:hover {\n                text-decoration: underline;\n              }\n            `}\n          </style>\n        </a>\n      )\n    }\n  }\n\n  function isOptionActive(option: ISortProps, index: number): boolean {\n    if (!option) {\n      return false\n    }\n    // 如果没有删选默认显示第一个\n    if (!state[option.key] && index === 0) {\n      return true\n    }\n    if (\n      state[option.key] &&\n      state[option.key].some(item => item.param === option.param)\n    ) {\n      return true\n    }\n    return false\n  }\n\n  return (\n    <React.Fragment>\n      <header>\n        <span style={{ fontWeight: 'bold' }}>\n          <span className=\"active\">{carData.series_count}</span> 车系符合条件\n        </span>\n        <div className=\"conditions\">\n          {sort.map((item: ISortProps, index) => {\n            return (\n              <span\n                key={item.text}\n                role=\"button\"\n                className={`price-sort ${classnames({\n                  active: isOptionActive(item, index),\n                })}`}\n                onClick={(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n                  e.stopPropagation()\n                  sendTeaCommEvent('click_garage_series_order', {\n                    sort_type: item.param,\n                  })\n                  dispatch({\n                    type: 'setSingleOption',\n                    payload: {\n                      key: item.key,\n                      text: item.text,\n                      param: item.param,\n                    },\n                  })\n                }}\n              >\n                {item.text}\n              </span>\n            )\n          })}\n        </div>\n      </header>\n      {carData.series_count === 0 && (\n        <div className=\"empty-tip\">抱歉，未找到合适车型</div>\n      )}\n      <ul className=\"list\">\n        <ScrollLoader\n          loading={loading}\n          end={count.current - 20 >= 0 ? false : true}\n          loadMoreHandler={loadMoreHandler}\n        >\n          {carData.series.map((item: ICarProps, index: number) =>\n            renderList(item, index)\n          )}\n        </ScrollLoader>\n        {loading && <Loading />}\n      </ul>\n      <style jsx>\n        {`\n          header {\n            line-height: 54px;\n            font-size: 16px;\n            border-bottom: 1px solid #ededed;\n          }\n          .conditions {\n            float: right;\n          }\n          .conditions span {\n            padding-left: 24px;\n            cursor: pointer;\n            transition: color 0.1s ease-in-out;\n          }\n          .price-sort:hover {\n            color: #e65800;\n          }\n          .active {\n            color: #e65800;\n          }\n          .list {\n            margin: 0 0 50px 0;\n          }\n          .empty-tip {\n            text-align: center;\n            padding-top: 30px;\n            font-size: 16px;\n            color: #999;\n          }\n        `}\n      </style>\n    </React.Fragment>\n  )\n}\n","// 已选择的条件\nimport React from 'react'\n\nimport { sendTeaCommEvent } from 'lib/tea-analyze'\n\nimport { ContextStore } from './reducer'\nimport { IOptionsState, IOptionProps } from './interface'\n\ninterface Props extends IOptionProps {\n  initOptions: IOptionsState\n}\n\nexport default function Select() {\n  const { state, dispatch } = React.useContext(ContextStore)\n  const entries = Object.entries(state)\n\n  const filterList = ['sort', 'sub_brand_id']\n\n  if (\n    !entries ||\n    !entries.length ||\n    !entries.filter(([key]) => filterList.indexOf(key) === -1).length\n  ) {\n    return null\n  }\n\n  return (\n    <div className=\"selected clearfix\">\n      <span className=\"label fl\">已选条件：</span>\n      <span\n        className=\"reset\"\n        onClick={() => {\n          sendTeaCommEvent('click_garage_series_selector_clear')\n          dispatch({\n            type: 'clearOptions',\n          })\n        }}\n      >\n        <span className=\"icon-delete-ic-new empty-icon\" />\n        清空条件\n      </span>\n      <div className=\"conditions\">\n        {Object.entries(state).map(([key, value]) => {\n          if (filterList.indexOf(key) > -1) {\n            return null\n          }\n          if (!value || !value.length) {\n            return null\n          }\n          return value.map(item => (\n            <span\n              key={item.text}\n              className=\"container\"\n              onClick={(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n                e.stopPropagation()\n                e.preventDefault()\n                dispatch({\n                  type: 'removeOption',\n                  payload: {\n                    key,\n                    param: item.param,\n                  },\n                })\n              }}\n            >\n              {item.text}\n              <span className=\"icon-dislike-ic delete-icon\" />\n            </span>\n          ))\n        })}\n      </div>\n      <style jsx>\n        {`\n          .selected {\n            border-radius: 2px;\n            border: 1px solid #ededed;\n          }\n          .label {\n            display: inline-block;\n            margin: 12px 2px 12px 8px;\n            color: #666;\n          }\n          .reset {\n            float: right;\n            margin: 12px 8px 12px 0;\n            cursor: pointer;\n          }\n          .empty-icon {\n            font-size: 24px;\n            margin-top: -6px;\n            margin-right: 4px;\n            width: 15px;\n            min-width: 15px;\n            height: 15px;\n            margin-right: 4px;\n            background-image: url(${require('static/delete-ic-new.svg')});\n            background-size: cover;\n          }\n          .reset:hover {\n            color: #e65800;\n          }\n          .conditions {\n            width: 700px;\n            min-height: 36px;\n            margin: 8px 0 0 80px;\n          }\n          .conditions span.container {\n            display: inline-block;\n            padding: 4px 4px 4px 8px;\n            margin-right: 8px;\n            margin-bottom: 8px;\n            border-radius: 2px;\n            background-color: #fff5d6;\n            cursor: pointer;\n          }\n          .icon-delete-ic-new {\n            display: inline-block;\n            font-size: 20px;\n            vertical-align: middle;\n            margin-top: -3px;\n          }\n          .delete-icon {\n            font-size: 16px;\n            margin-left: 4px;\n            margin-top: -2px;\n          }\n        `}\n      </style>\n    </div>\n  )\n}\n","import * as React from 'react'\nimport Button from 'Components/button'\n\nimport { ISortProps } from './interface'\n\ninterface IProps {\n  onClick(item: ISortProps, line: number): void\n}\n\nexport default function PriceInput({ onClick }: IProps) {\n  const [low, setLow] = React.useState<string>('')\n  const [high, setHigh] = React.useState<string>('')\n\n  function handleClick() {\n    let text = ''\n    let mLow = parseInt(low, 10) || 0\n    let mHigh = parseInt(high, 10) || 0\n\n    if (!mLow && !mHigh) {\n      return\n    }\n\n    if (!mLow) {\n      text = `${mHigh}万以下`\n    } else if (!mHigh) {\n      text = `${mLow}万以上`\n    } else {\n      if (mHigh < mLow) {\n        ;[mHigh, mLow] = [mLow, mHigh]\n        setHigh(`${mHigh}`)\n        setLow(`${mLow}`)\n      }\n      text = `${mLow}-${mHigh}万`\n    }\n    onClick(\n      {\n        key: 'price',\n        param: `${mLow || 0},${mHigh || -1}`,\n        text,\n      },\n      0\n    )\n  }\n  return (\n    <div className=\"inputs\">\n      <input\n        value={low}\n        type=\"number\"\n        onChange={e => {\n          setLow(e.target.value)\n        }}\n      />\n      <span className=\"line\">-</span>\n      <input\n        value={high}\n        type=\"number\"\n        onChange={e => {\n          setHigh(e.target.value)\n        }}\n      />\n      万\n      <Button\n        className=\"button\"\n        disabled={!low && !high}\n        type=\"primary\"\n        onClick={handleClick}\n      >\n        确定\n      </Button>\n      <style jsx>\n        {`\n          .inputs {\n            display: inline-block;\n          }\n          .line {\n            margin: 0 2px;\n          }\n          input {\n            width: 40px;\n            height: 28px;\n            padding: 0 5px;\n            border-radius: 2px;\n            outline: 0;\n            border: solid 1px #ededed;\n            background-color: #f8f8f8;\n            appearance: none;\n          }\n          input::-webkit-outer-spin-button,\n          input::-webkit-inner-spin-button {\n            -webkit-appearance: none;\n          }\n          input[type='number'] {\n            -moz-appearance: textfield;\n          }\n          .inputs :global(.button) {\n            margin-left: 12px;\n          }\n        `}\n      </style>\n    </div>\n  )\n}\n","import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\nimport { sendTeaCommEvent } from 'lib/tea-analyze'\n\nimport PriceInput from './price-input'\nimport { ContextStore } from './reducer'\nimport { IOptionProps, IConditionsProps, ISortProps } from './interface'\n\ninterface Props {\n  conditions: IConditionsProps[]\n  /* 展示更多条件下面的线 */\n  hideline?: boolean\n}\n\ntype subCondition = {\n  text: string\n  key: string\n  param: number\n}\nexport default function Conditions({ conditions }: Props) {\n  /* 判断是否是条件的请求 */\n  // const { dispatch } = React.useContext(ContextStore)\n  const { state, dispatch } = React.useContext(ContextStore)\n  const [subConditions, setSubConditions] = useState<subCondition[]>([])\n  const [fuel, setFuel] = useState<ISortProps>({\n    text: '新能源',\n    sub_options: [\n      {\n        text: '全部',\n        key: 'all_sub_options',\n        param: -1,\n      },\n      {\n        text: '纯电动',\n        key: 'fuel_form',\n        param: 4,\n      },\n      {\n        text: '插电式混合动力',\n        key: 'fuel_form',\n        param: 6,\n      },\n      {\n        text: '增程式',\n        key: 'fuel_form',\n        param: 5,\n      },\n    ],\n    param: '4,6,5',\n    key: 'fuel_form',\n  })\n\n  useEffect(() => {\n    if (Object.keys(state).length === 0) {\n      setSubConditions([])\n    }\n  }, [state])\n\n  const allConditionKeys = React.useMemo(() => {\n    return conditions.map(item => {\n      return Array.from(\n        new Set(item.data.map(item => item.key).filter(item => !!item))\n      )\n    })\n  }, [conditions])\n  function getStat(options: any) {\n    return Object.keys(options).reduce((acc: any, curr: string) => {\n      acc[curr] = options[curr].map((item: any) => item.param).join(',')\n      return acc\n    }, {})\n  }\n  const handleOptionClick = (item: ISortProps, line: number) => {\n    // 第N行条件\n    const currentLine = allConditionKeys[line]\n    // dispatch({ type: 'conditions' })\n    const newOptions = Object.assign({}, state)\n\n    // 选择不限时，清空整行元素\n    if (item.text.indexOf('不限') >= 0) {\n      currentLine.forEach(key => {\n        newOptions[key] = []\n      })\n      dispatch({\n        type: 'resetOptions',\n        payload: newOptions,\n      })\n      setSubConditions([])\n      return\n    }\n\n    if (item.text.indexOf('全部') >= 0 && item.key !== 'fuel_form') {\n      currentLine.forEach(key => {\n        newOptions.outter_detail_type = []\n      })\n      dispatch({\n        type: 'resetOptions',\n        payload: newOptions,\n      })\n      return\n    }\n\n    if (item.key === 'series_type') {\n      if (item.sub_options) {\n        setSubConditions(item.sub_options)\n      } else {\n        setSubConditions([])\n      }\n      dispatch({\n        type: 'resetOptions',\n        payload: {\n          ...newOptions,\n          new_energy: [],\n          fuel_form: [],\n          outter_detail_type: [],\n        },\n      })\n      dispatch({\n        type: 'setSingleOption',\n        payload: item,\n      })\n      return\n    }\n\n    if (item.key === 'new_energy') {\n      setFuel(item)\n      if (item.sub_options) {\n        try {\n          item.sub_options[0].key = 'fuel_form'\n        } catch (e) {\n          console.error(e)\n        }\n        setSubConditions(item.sub_options)\n      }\n      dispatch({\n        type: 'resetOptions',\n        payload: {\n          ...newOptions,\n          series_type: [],\n          fuel_form: [],\n          outter_detail_type: [],\n        },\n      })\n\n      dispatch({\n        type: 'setSingleOption',\n        payload: item,\n      })\n      return\n    }\n\n    if (item.key === 'fuel_form') {\n      // 点击全部\n      if (item.text.indexOf('全部') >= 0) {\n        dispatch({\n          type: 'resetOptions',\n          payload: { ...newOptions, fuel_form: [] },\n        })\n        return\n      }\n      // 从没有子选项到新增第一个子选项\n      if (newOptions.fuel_form.length === 0) {\n        newOptions.fuel_form = [item]\n        dispatch({\n          type: 'resetOptions',\n          payload: { ...newOptions, fuel_form: newOptions.fuel_form },\n        })\n        return\n      }\n      // 新增子选项或删除子选项\n      if (newOptions.fuel_form?.length !== 0) {\n        if (newOptions.fuel_form.some(option => option.param === item.param)) {\n          newOptions.fuel_form = newOptions.fuel_form.filter(\n            option => option.param !== item.param\n          )\n          dispatch({\n            type: 'resetOptions',\n            payload: { ...newOptions, fuel_form: [...newOptions.fuel_form] },\n          })\n          return\n        } else {\n          newOptions.fuel_form = newOptions.fuel_form.filter(\n            option => option.param !== item.param\n          )\n          dispatch({\n            type: 'resetOptions',\n            payload: {\n              ...newOptions,\n              fuel_form: [...newOptions.fuel_form, item],\n            },\n          })\n          return\n        }\n      }\n      dispatch({\n        type: 'resetOptions',\n        payload: {\n          fuel_form: [...newOptions.fuel_form, item],\n        },\n      })\n    }\n\n    // 初始值为空\n    if (!newOptions[item.key]) {\n      newOptions[item.key] = []\n    }\n    if (newOptions[item.key].some(option => option.param === item.param)) {\n      // 已存在\n      newOptions[item.key] = newOptions[item.key].filter(\n        option => option.param !== item.param\n      )\n    } else {\n      // 不存在\n      newOptions[item.key].push({\n        text: item.text,\n        param: item.param,\n      })\n    }\n    // sendTeaCommEvent('click_garage_series_selector', getStat(newOptions))\n    dispatch({\n      type: 'resetOptions',\n      payload: newOptions,\n    })\n  }\n  function isOptionActive(option: ISortProps, line: number): boolean {\n    if (!option) {\n      return false\n    }\n    // 不限的高亮条件：同一行中没有被选中的元素\n    if (option.text === '不限') {\n      return !allConditionKeys[line].some(\n        item => !!state[item] && state[item].length > 0\n      )\n    }\n\n    if (option.text === '全部') {\n      if (!state.fuel_form) {\n        return true\n      }\n      if (!state.outter_detail_type) {\n        return true\n      }\n      return (\n        state.outter_detail_type.length === 0 && state.fuel_form.length === 0\n      )\n    }\n\n    if (!state[option.key] || !state[option.key].length) {\n      return false\n    }\n    // ===部分条件筛选有问题\n    if (state[option.key].some(item => item.param == option.param)) {\n      return true\n    }\n    return false\n  }\n\n  return (\n    <React.Fragment>\n      <h2>条件筛选</h2>\n      <section style={{ marginBottom: '24px' }}>\n        {conditions.map((data: IConditionsProps, line: number) => {\n          return (\n            <div className=\"conditions clearfix\" key={data.title}>\n              <span className=\"label fl\">{data.title}：</span>\n              {data.data.map((item: ISortProps) => {\n                const active = isOptionActive(item, line)\n                if (item.key === 'price' && item.text === '输入框') {\n                  return (\n                    <div className=\"condition-input\">\n                      <PriceInput key={item.text} onClick={handleOptionClick} />\n                    </div>\n                  )\n                }\n                return (\n                  <span\n                    key={item.text}\n                    role=\"button\"\n                    className={classnames('condition', {\n                      active,\n                    })}\n                    onClick={event => {\n                      event.stopPropagation()\n                      handleOptionClick(item, line)\n                    }}\n                  >\n                    {item.text}\n                    {active && item.text !== '不限' && (\n                      <div className=\"active_mark\" />\n                    )}\n                  </span>\n                )\n              })}\n            </div>\n          )\n        })}\n        <div style={{ marginLeft: '56px' }}>\n          {subConditions.map((item, line) => {\n            return (\n              <span\n                key={item.text}\n                role=\"button\"\n                className={classnames('condition', {\n                  active: isOptionActive(item, line),\n                })}\n                onClick={event => {\n                  event.stopPropagation()\n                  handleOptionClick(item, line)\n                }}\n              >\n                {item.text}\n              </span>\n            )\n          })}\n        </div>\n      </section>\n      <style jsx>\n        {`\n          h2 {\n            line-height: 60px;\n            font-size: 24px;\n            font-weight: 500;\n          }\n          .conditions {\n            padding: 0 0 12px;\n            border-bottom: 1px dashed #ededed;\n          }\n          .label {\n            line-height: 28px;\n            color: #666;\n            margin-top: 10px;\n          }\n          .condition {\n            display: inline-block;\n            margin: 12px 2px 0;\n            padding: 4px 8px;\n            cursor: pointer;\n            border-radius: 2px;\n            transition: all 0.1s ease-in-out;\n          }\n          .condition:hover {\n            background: #fff5d6;\n          }\n          .condition-input {\n            display: inline-block;\n            margin-top: 12px;\n          }\n          .active {\n            position: relative;\n            background-color: #ffcd32;\n          }\n          .active_mark {\n            position: absolute;\n            right: 0;\n            left: 0;\n            margin: 0 auto;\n            margin-top: 7px;\n            width: 20px;\n            min-width: 20px;\n            height: 10px;\n            background-image: url(${require('static/active-icon-pic.svg')});\n            background-size: cover;\n          }\n          .active:hover {\n            color: #1a1a1a;\n            background-color: #ffcd32;\n          }\n        `}\n      </style>\n    </React.Fragment>\n  )\n}\n","/* 右边全部 */\n\nimport React, { useState, useEffect } from 'react'\nimport NoSSR from 'react-no-ssr'\n\nimport Loading from 'Components/loading'\n\nimport CarList from './car-list'\nimport Selected from './selected'\nimport Conditions from './conditions'\nimport { ContextStore } from './reducer'\n\nimport { IOptionsState, ISortProps, IConditionsProps } from './interface'\n\ninterface Props {\n  conditions: IConditionsProps[]\n  sort: ISortProps[]\n}\n\nexport default function ConditionsList(props: Props) {\n  const { conditions, sort } = props\n  return (\n    <section>\n      <Conditions conditions={conditions} />\n      <Selected />\n      {/* 车系列表 */}\n      <NoSSR onSSR={<Loading />}>\n        <CarList sort={sort} />\n      </NoSSR>\n      <style jsx>\n        {`\n          section {\n            display: inline-block;\n            width: 900px;\n            margin-left: 16px;\n          }\n        `}\n      </style>\n    </section>\n  )\n}\n","// 车型库首页\nimport React, { useEffect, useState } from 'react'\nimport Head from 'next/head'\nimport getQuery from '@arsenal/arsenal/modules/getQuery'\nimport Brand from './brand'\nimport ConditionsList from './conditions-list'\nimport { ContextProvider } from './reducer'\nimport { ISortProps, IConditionsProps, IInfoProps } from './interface'\n\ninterface IPictureProps {\n  // 过滤条件\n  conditions: IConditionsProps[]\n  // 排序条件\n  sort: ISortProps[]\n  // 品牌\n  brands: IInfoProps[][]\n  // 品牌字母\n  letters: string[]\n}\n\nfunction Picture({ conditions, sort, letters, brands }: IPictureProps) {\n  const [init, setInit] = useState<any>()\n  useEffect(() => {\n    if (getQuery('key')) {\n      const keys = getQuery('key').split('`') as string[]\n      const param = (getQuery('param') || '').split('`') as string[]\n      const text = (getQuery('text') || '').split('`') as string[]\n      const initProps = keys.reduce((acc: any, curr, index) => {\n        if (!curr) {\n          return acc\n        }\n        if (!acc[curr]) {\n          acc[curr] = []\n        }\n        acc[curr].push({\n          param: Number(param[index]) || param[index],\n          text: text[index],\n        })\n        return acc\n      }, {})\n      setInit(initProps)\n    } else {\n      setInit({})\n    }\n  }, [])\n  return (\n    <div>\n      <Head>\n        <title key=\"title\">汽车图片大全-汽车图片库-懂车帝</title>\n        <meta\n          key=\"keywords\"\n          name=\"keywords\"\n          content=\"懂车帝官网,汽车,汽车网站,汽车报价,汽车报价大全,汽车大全,汽车价格查询,汽车图片,车型库,汽车之家报价,汽车标志\"\n        />\n        <meta\n          key=\"description\"\n          name=\"description\"\n          content=\"懂车帝提供最全面的汽车车型大全，包括2019最新汽车报价查询、品牌最全车型最全的全国最低价格及本地报价、图片、评测、口碑、经销商、油耗、资讯等信息，看车选车买车就上懂车帝。\"\n        />\n      </Head>\n      <ContextProvider initProps={init}>\n        <Brand letters={letters} brands={brands} />\n        <ConditionsList conditions={conditions} sort={sort} />\n      </ContextProvider>\n      <style jsx>\n        {`\n          div {\n            width: 1190px;\n            margin: 24px auto 0 auto;\n          }\n        `}\n      </style>\n    </div>\n  )\n}\n\nexport default Picture\n","import PictureHome from 'Pages/picture/home/home'\nimport React from 'react'\nimport fetch from 'isomorphic-unfetch'\nimport getUrl from 'lib/url'\nimport { get } from 'lodash'\nimport {\n  IConditionsProps,\n  IInfoProps,\n  ISortProps,\n} from 'Pages/picture/home/interface'\n\n// 重新处理数据\n\n// posts will be populated at build time by getStaticProps()\nfunction Picture({ conditions, brands, sort, letters }: any) {\n  return (\n    <PictureHome\n      conditions={conditions}\n      sort={sort}\n      letters={letters}\n      brands={brands}\n    />\n  )\n}\nfunction reHandleData(data: any) {\n  // 更多条件\n  const conditions = get(data, '[2].info.filters[3].data.options', [])\n  conditions.forEach((item: IConditionsProps) => {\n    item.data.unshift({\n      text: '不限',\n      key: '',\n      param: '',\n    })\n  })\n\n  // 价格\n  const price = get(data, '[2].info.filters[1].data.options', [])\n  const newPrice = price.map((item: ISortProps) => {\n    return {\n      param: item.text === '价格不限' ? null : item.param,\n      text: item.text === '价格不限' ? '不限' : item.text,\n      key: 'price',\n    }\n  })\n  // 价格允许自定义\n  newPrice.push({\n    key: 'price',\n    text: '输入框',\n  })\n  conditions.unshift({ title: '价格', data: newPrice })\n\n  // 按价格排序等过滤条件\n  const sort = get(data, '[2].info.filters[0].data.options', []).map(\n    (item: ISortProps) => {\n      return {\n        key: 'sort',\n        text: item.text,\n        param: item.param,\n      }\n    }\n  )\n\n  // 处理品牌\n  let list: IInfoProps[] = []\n  const brands: IInfoProps[][] = []\n  const letters: string[] = []\n  data &&\n    data.slice(3).forEach((item: IInfoProps) => {\n      if (item.type === '1000') {\n        letters.push(item.info.pinyin)\n        brands.push(list)\n        list = []\n      }\n      if (item.type === '1000' || item.type === '1001') {\n        list.push(item)\n      }\n    })\n  brands.push(list)\n  brands.shift()\n  return {\n    conditions: conditions.filter(\n      (item: IConditionsProps) => item.title === '级别'\n    ),\n    sort,\n    letters,\n    brands,\n  }\n}\nPicture.getInitialProps = async () => {\n  const res = await fetch(\n    getUrl('/motor/brand/m/v1/brand/?device_id=0&data_from=pc_station')\n  )\n  const json =\n    (await res.json().catch(err => {\n      console.log(err)\n    })) || {}\n  const data = reHandleData(json.data) || {}\n\n  return data\n}\n\nexport default Picture\n","\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/picture/home\",\n      function () {\n        return require(\"private-next-pages/picture/home.tsx\");\n      }\n    ]);\n  ","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAADAAAAAATDPpdAAAAZklEQVQoFbWPSQ6AMAhFi7Gn8T7qHbuovaD4SVgwdGdK8hI+M6WsNrILmPmGZtCI6LW5qY+GCgbo4k+LYvBv04gD9xgwWn4RnG1OQejtTVxwxrzTer88/GijyyeBogscIG1OxcsCH3q0SPpCLECCAAAAAElFTkSuQmCC\"","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDIwIDEwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTE4LjMxOSAxMEwxLjM0OCAxMCA5LjgzNCAxLjYwNHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NzIgLTIyOCkgdHJhbnNsYXRlKDc3MiAyMjgpIi8+CiAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNy41OTUgOC41MTFMMTkuMTkgMTBoLTEuNDMzbC0uODctLjc4Mi43MDctLjcwN3pNMTMuMzEgNC4yMjdsMi44MzQgMi44MzQtLjcwNy43MDctMi44MzQtMi44MzQuNzA3LS43MDd6TTEwLjA4NCAxbDEuNzc0IDEuNzc1LS43MDcuNzA3LTEuMDY3LTEuMDY4LS4zNC4zNC0uNzA4LS43MDdMMTAuMDg0IDF6TTMuMzY2IDcuNzE4bC43MDcuNzA3TDIuNDA0IDEwSDFsMi4zNjYtMi4yODJ6bTQuMzIyLTQuMzIzbC43MDcuNzA3TDUuNDggNy4wMTdsLS43MDctLjcwNyAyLjkxNS0yLjkxNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NzIgLTIyOCkgdHJhbnNsYXRlKDc3MiAyMjgpIi8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAAfklEQVRIDe2TSwqAMAxExTNovaGIx/VznvgGuuhCKEICKh0IKS28hBnadU2vd8DMVmoMWTTDaXaEDBE0w2ltSCXFX9mVngTfV5y5ezYuVf7KOex0SX8juU0Bpj8RBh+Ab5R0Uq6bfxSu8LBilidItkxugZYgwEsYvBzUzmEOXPa17tJuRcE8AAAAAElFTkSuQmCC\"","import * as React from 'react'\nexport interface ScrollLoaderProps {\n  // 判断是否正在加载中\n  loading?: boolean\n  /** 是否加载完毕 */\n  end: boolean\n  /** 垂直方向滚动的边界 */\n  verticalMargin?: number\n  /**\n   * 加载执行的回调\n   */\n  loadMoreHandler(): void\n}\n\nexport default class ScrollLoader extends React.PureComponent<\n  ScrollLoaderProps,\n  {},\n  any\n> {\n  private observer: null | any = null\n\n  private HEIGHT = 0\n\n  private dom = React.createRef<HTMLDivElement>()\n\n  componentDidMount() {\n    this.HEIGHT = document.documentElement.clientHeight\n    this.addObserver()\n  }\n\n  componentDidUpdate(prevProps: ScrollLoaderProps) {\n    const { end } = this.props\n    // 加载结束，卸载observer\n    if (!prevProps.end && end) {\n      this.removeObserver()\n    } else if (prevProps.end && !end && !this.observer) {\n      this.addObserver()\n    }\n  }\n\n  componentWillUnmount() {\n    this.removeObserver()\n  }\n\n  private addObserver = () => {\n    const { verticalMargin = 10 } = this.props\n    this.observer = new IntersectionObserver(\n      changes => {\n        changes.forEach(change => {\n          // 某些浏览器intersectionRatio有问题，需要再判断位置\n          if (!change.isIntersecting) {\n            return\n          }\n          const { end, loading, loadMoreHandler } = this.props\n          if (!end && !loading) {\n            // 这里的loadMoreHandler一定要这样取，\n            // 否则会导致跟hooks共用时的问题\n            loadMoreHandler()\n          }\n        })\n      },\n      {\n        threshold: [0],\n        rootMargin: `${verticalMargin}px 10px`,\n      }\n    )\n    this.observer.observe(this.dom.current)\n  }\n\n  private removeObserver() {\n    if (this.observer) {\n      this.observer.unobserve(this.dom.current)\n      this.observer = null\n    }\n  }\n\n  render() {\n    const { children } = this.props\n    return (\n      <React.Fragment>\n        {children}\n        <div ref={this.dom} style={{ height: '1px' }} />\n      </React.Fragment>\n    )\n  }\n}\n"],"sourceRoot":""}