function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import { List } from "../index";

// 示例数据接口

// 示例组件：门票列表展示
var GroupedListExample = function GroupedListExample() {
  // 模拟门票数据 - 使用 ticketType 字段进行分组
  var mockTicketData = [{
    id: '1',
    title: '2hrs upgrade Unlimited',
    description: 'Adult Day',
    price: 90,
    duration: '2 h',
    ticketType: 'all-access',
    category: 'Adult Day Pass'
  }, {
    id: '2',
    title: '2hrs upgrade Unlimited',
    description: 'Kid Day',
    price: 90,
    duration: '2 h',
    ticketType: 'all-access',
    category: 'Kids Day Pass'
  }, {
    id: '3',
    title: '2hrs upgrade Unlimited',
    description: 'Family Package',
    price: 90,
    duration: '2 h',
    ticketType: 'all-access',
    category: 'Family Pass'
  }, {
    id: '4',
    title: 'Child Ticket - Morning',
    description: 'Special price for children',
    price: 45,
    duration: '4 h',
    ticketType: 'child',
    category: 'Morning Session'
  }, {
    id: '5',
    title: 'Child Ticket - Afternoon',
    description: 'Afternoon activities',
    price: 45,
    duration: '4 h',
    ticketType: 'child',
    category: 'Afternoon Session'
  }, {
    id: '6',
    title: 'Adult Standard',
    description: 'Standard adult admission',
    price: 70,
    duration: '6 h',
    ticketType: 'adult',
    category: 'Standard Admission'
  }, {
    id: '7',
    title: 'Adult Premium',
    description: 'Premium experience',
    price: 120,
    duration: '8 h',
    ticketType: 'adult',
    category: 'Premium Experience'
  }, {
    id: '8',
    title: 'Special Event',
    description: 'Limited time offer',
    price: 150,
    duration: '3 h',
    ticketType: 'category5',
    category: 'Special Event'
  }];

  // Tab配置，group值对应数据中 ticketType 字段的值
  var tabItems = [{
    key: 'all-access',
    label: "All-Access Ticket (".concat(mockTicketData.filter(function (item) {
      return item.ticketType === 'all-access';
    }).length, ")"),
    group: 'all-access'
  }, {
    key: 'child',
    label: "Child Ticket (".concat(mockTicketData.filter(function (item) {
      return item.ticketType === 'child';
    }).length, ")"),
    group: 'child'
  }, {
    key: 'adult',
    label: "Adult Ticket (".concat(mockTicketData.filter(function (item) {
      return item.ticketType === 'adult';
    }).length, ")"),
    group: 'adult'
  }, {
    key: 'category5',
    label: "Category 5 (".concat(mockTicketData.filter(function (item) {
      return item.ticketType === 'category5';
    }).length, ")"),
    group: 'category5'
  }];

  // 状态管理
  var _useState = useState(mockTicketData),
    _useState2 = _slicedToArray(_useState, 1),
    currentData = _useState2[0];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 1),
    loading = _useState4[0];

  // 自定义渲染每个门票项
  var renderTicketItem = function renderTicketItem(item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id,
      style: {
        background: '#FFF',
        borderRadius: '12px',
        padding: '16px',
        border: '1px solid #E4E7EC',
        boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
        height: '160px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        height: '60px',
        background: "linear-gradient(135deg, ".concat(item.ticketType === 'all-access' ? '#8157D5, #B794F6' : item.ticketType === 'child' ? '#F56565, #FC8181' : item.ticketType === 'adult' ? '#4299E1, #63B3ED' : '#ED8936, #F6AD55', ")"),
        borderRadius: '8px',
        marginBottom: '12px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontWeight: 'bold',
        fontSize: '18px'
      }
    }, item.description), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
      style: {
        fontSize: '16px',
        fontWeight: '600',
        margin: '0 0 4px 0',
        color: '#101828'
      }
    }, item.title), /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '14px',
        color: '#667085',
        margin: '0 0 8px 0'
      }
    }, item.duration), /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '18px',
        fontWeight: '700',
        color: '#101828',
        margin: 0
      }
    }, "A$ ", item.price)));
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '20px',
      maxWidth: '1200px',
      margin: '0 auto'
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      marginBottom: '20px',
      color: '#101828'
    }
  }, "\u95E8\u7968\u5206\u7EC4\u5C55\u793A\u793A\u4F8B"), /*#__PURE__*/React.createElement(List, {
    data: currentData,
    tabData: tabItems,
    tabGroup: "ticketType" // 指定使用 ticketType 字段进行分组
    ,
    tabStyle: "anchor",
    displayStyle: "grid",
    layoutDirection: "vertical",
    columns: 2,
    rows: 2,
    columnGap: 16,
    rowGap: 16,
    height: "600px",
    renderItem: renderTicketItem,
    loading: loading,
    emptyConfig: {
      show: true,
      text: '暂无门票数据',
      description: '请稍后再试'
    },
    className: "ticket-list-example"
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: '20px',
      padding: '16px',
      background: '#F8F9FA',
      borderRadius: '8px'
    }
  }, /*#__PURE__*/React.createElement("h3", null, "\u4F7F\u7528\u8BF4\u660E\uFF1A"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u901A\u8FC7 ", /*#__PURE__*/React.createElement("code", null, "tabGroup=\"ticketType\""), " \u6307\u5B9A\u4F7F\u7528\u6570\u636E\u9879\u7684 ticketType \u5B57\u6BB5\u8FDB\u884C\u5206\u7EC4"), /*#__PURE__*/React.createElement("li", null, "Tab\u7684 group \u5C5E\u6027\u503C\u5BF9\u5E94\u6570\u636E\u9879\u4E2D ticketType \u5B57\u6BB5\u7684\u503C"), /*#__PURE__*/React.createElement("li", null, "\u70B9\u51FB\u4E0D\u540C\u7684\u6807\u7B7E\u9875\u53EF\u4EE5\u67E5\u770B\u4E0D\u540C\u5206\u7EC4\u7684\u95E8\u7968"), /*#__PURE__*/React.createElement("li", null, "\u6570\u636E\u4F1A\u6839\u636E\u9009\u62E9\u7684\u5206\u7EC4\u81EA\u52A8\u8FC7\u6EE4"), /*#__PURE__*/React.createElement("li", null, "\u6BCF\u4E2A\u6807\u7B7E\u9875\u663E\u793A\u5BF9\u5E94\u5206\u7EC4\u7684\u6570\u91CF"), /*#__PURE__*/React.createElement("li", null, "\u652F\u6301\u6240\u6709\u73B0\u6709\u7684List\u7EC4\u4EF6\u5E03\u5C40\u548C\u5206\u9875\u6A21\u5F0F"))));
};
export default GroupedListExample;