import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["dataList", "onClick", "imagePlacement", "handleMoreClick", "moreText", "title", "textLines", "type", "itemColumns", "iconList", "itemGap", "itemPadding", "imgWidth", "imgHeight", "itemBgColor", "itemRowAlign", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "textImgGap", "imgBorderRadius", "imgObjectFit", "titleColor", "titleFontSize", "titleFontWeight", "titleLineClamp", "descriptionColor", "descriptionFontSize", "descriptionFontWeight", "descriptionLineClamp", "itemBorderRadius", "itemBorderColor", "itemBorderWidth"];
import React from 'react';
import "./index.scss";
import { default as TeletextListItem } from "./teletext-list-item";
import arr from "../../assets/icon/teletext-list/arr.png";

/**
 * 数据
 */

var TeletextList = function TeletextList(_ref) {
  var dataList = _ref.dataList,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    _ref$imagePlacement = _ref.imagePlacement,
    imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
    handleMoreClick = _ref.handleMoreClick,
    _ref$moreText = _ref.moreText,
    moreText = _ref$moreText === void 0 ? '' : _ref$moreText,
    title = _ref.title,
    _ref$textLines = _ref.textLines,
    textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
    type = _ref.type,
    _ref$itemColumns = _ref.itemColumns,
    itemColumns = _ref$itemColumns === void 0 ? 1 : _ref$itemColumns,
    iconList = _ref.iconList,
    _ref$itemGap = _ref.itemGap,
    itemGap = _ref$itemGap === void 0 ? 16 : _ref$itemGap,
    itemPadding = _ref.itemPadding,
    _ref$imgWidth = _ref.imgWidth,
    imgWidth = _ref$imgWidth === void 0 ? 100 : _ref$imgWidth,
    _ref$imgHeight = _ref.imgHeight,
    imgHeight = _ref$imgHeight === void 0 ? 100 : _ref$imgHeight,
    itemBgColor = _ref.itemBgColor,
    itemRowAlign = _ref.itemRowAlign,
    textAlign = _ref.textAlign,
    isShoppingCart = _ref.isShoppingCart,
    isWishList = _ref.isWishList,
    isUserMenu = _ref.isUserMenu,
    textImgGap = _ref.textImgGap,
    imgBorderRadius = _ref.imgBorderRadius,
    imgObjectFit = _ref.imgObjectFit,
    titleColor = _ref.titleColor,
    titleFontSize = _ref.titleFontSize,
    titleFontWeight = _ref.titleFontWeight,
    titleLineClamp = _ref.titleLineClamp,
    descriptionColor = _ref.descriptionColor,
    descriptionFontSize = _ref.descriptionFontSize,
    descriptionFontWeight = _ref.descriptionFontWeight,
    descriptionLineClamp = _ref.descriptionLineClamp,
    itemBorderRadius = _ref.itemBorderRadius,
    itemBorderColor = _ref.itemBorderColor,
    itemBorderWidth = _ref.itemBorderWidth,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _otherProps = otherProps || {};
  var listStyle = itemRowAlign === 'row' ? {
    width: 'auto',
    display: 'flex',
    gap: itemGap + "px",
    overflowX: 'auto',
    scrollSnapType: 'x mandatory',
    WebkitOverflowScrolling: 'touch'
  } : {
    display: 'grid',
    gridTemplateColumns: "repeat(" + itemColumns + ", 1fr)",
    gap: itemGap + "px"
  };
  var dataItems = dataList ? Array.isArray(dataList) ? dataList : [dataList] : [];
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "teletext-list__panel"
  }, _otherProps), /*#__PURE__*/React.createElement("div", {
    className: "teletext-list__panel-head"
  }, title && /*#__PURE__*/React.createElement("h5", {
    className: "teletext-list__panel-head-title"
  }, title), moreText && /*#__PURE__*/React.createElement("div", {
    className: "teletext-list__panel-head-more",
    onClick: handleMoreClick
  }, /*#__PURE__*/React.createElement("span", {
    className: "teletext-list__panel-head-more-text"
  }, moreText), /*#__PURE__*/React.createElement("img", {
    src: arr,
    className: "teletext-list__panel-head-more-img"
  }))), isUserMenu && /*#__PURE__*/React.createElement("div", {
    className: "teletext-list__panel-head-user-menu"
  }, /*#__PURE__*/React.createElement("img", {
    className: "teletext-list__panel-head-user-menu-img",
    src: "",
    alt: ""
  }), /*#__PURE__*/React.createElement("div", {
    className: "teletext-list__panel-head-user-menu-text"
  }, "Hello, Paige Turner")), /*#__PURE__*/React.createElement("div", {
    className: "teletext-list__panel__item-list" + (itemRowAlign === 'row' ? ' teletext-list__panel__item-list--row' : ''),
    style: listStyle
  }, dataItems.length > 0 ? dataItems.map(function (item, index) {
    var ItemComp = TeletextListItem;
    return /*#__PURE__*/React.createElement(ItemComp, _extends({
      key: index,
      onClick: onClick,
      imagePlacement: imagePlacement,
      style: itemRowAlign === 'row' ? {
        flex: '0 0 auto'
      } : undefined,
      type: type,
      textLines: textLines,
      itemColumns: itemColumns,
      iconList: iconList,
      itemPadding: itemPadding,
      imgWidth: imgWidth,
      imgHeight: imgHeight,
      itemBgColor: itemBgColor,
      textAlign: textAlign,
      isShoppingCart: isShoppingCart,
      isWishList: isWishList,
      isUserMenu: isUserMenu,
      textImgGap: textImgGap,
      imgBorderRadius: imgBorderRadius,
      imgObjectFit: imgObjectFit,
      titleColor: titleColor,
      titleFontSize: titleFontSize,
      titleFontWeight: titleFontWeight,
      titleLineClamp: titleLineClamp,
      descriptionColor: descriptionColor,
      descriptionFontSize: descriptionFontSize,
      descriptionFontWeight: descriptionFontWeight,
      descriptionLineClamp: descriptionLineClamp,
      itemBorderRadius: itemBorderRadius,
      itemBorderColor: itemBorderColor,
      itemBorderWidth: itemBorderWidth
    }, item));
  }) : /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")));
};
TeletextList.displayName = 'TeletextList';
export default TeletextList;