import React, { useEffect } from 'react';
import noData from "../../../../module/assets/noData.png";
import Style from "../index.module.scss";
function List(props) {
  var mediaType = props.mediaType,
    list = props.list,
    listIndex = props.listIndex,
    handleListIndex = props.handleListIndex,
    header = props.header,
    headerIndex = props.headerIndex,
    handleHeaderIndex = props.handleHeaderIndex;

  // 仅用于图文左侧瀑布流布局
  useEffect(function () {
    if (!list.length || mediaType !== 'IMAGE_TEXT') return;
    setTimeout(function () {
      list.map(function (item) {
        var dom = document.getElementById("item" + item.mediaId);
        var _dom$getBoundingClien = dom.getBoundingClientRect(),
          height = _dom$getBoundingClien.height;
        if (+height) dom.style.gridRow = "auto / span " + Math.floor(+height / 10);
        return item;
      });
    }, 0);
  }, [list, mediaType]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: Style['xt-list-header']
  }, header.length ? header.map(function (item, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      className: "" + (headerIndex === item.ctgId ? Style['xt-header-active'] : ''),
      onClick: function onClick() {
        return handleHeaderIndex(item.ctgId);
      }
    }, item.title);
  }) : null), /*#__PURE__*/React.createElement("div", {
    className: mediaType === 'IMAGE_TEXT' ? Style['xt-fall-content'] : Style['xt-list-content'],
    style: {
      height: list.length ? 'auto' : '100%'
    }
  }, list.length ? list.map(function (item) {
    return /*#__PURE__*/React.createElement("img", {
      id: "item" + item.mediaId,
      key: item.mediaId,
      src: item.psdImg,
      className: "\n                  " + Style['xt-content-block'] + "\n                  " + (listIndex === item.mediaId ? Style['xt-content-active'] : '') + "\n                ",
      onClick: function onClick() {
        return handleListIndex(item.mediaId);
      }
    });
  }) : /*#__PURE__*/React.createElement("div", {
    className: Style['xt-list-no-data']
  }, /*#__PURE__*/React.createElement("img", {
    src: noData,
    alt: ""
  }), /*#__PURE__*/React.createElement("span", null, "\u7A7A\u7A7A\u5982\u4E5F"))));
}
export default List;