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 Selector from "./index";
import { StarOutlined } from '@ant-design/icons';
import { Divider, Typography } from 'antd';
var Title = Typography.Title,
  Paragraph = Typography.Paragraph,
  Text = Typography.Text;
var SelectorDemo = function SelectorDemo() {
  // Preset 演示状态
  var _useState = useState(1),
    _useState2 = _slicedToArray(_useState, 2),
    presetDefault1 = _useState2[0],
    setPresetDefault1 = _useState2[1];
  var _useState3 = useState(1),
    _useState4 = _slicedToArray(_useState3, 2),
    presetDefault2 = _useState4[0],
    setPresetDefault2 = _useState4[1];
  var _useState5 = useState(1),
    _useState6 = _slicedToArray(_useState5, 2),
    presetDefault3 = _useState6[0],
    setPresetDefault3 = _useState6[1];
  var _useState7 = useState(1),
    _useState8 = _slicedToArray(_useState7, 2),
    presetDefault4 = _useState8[0],
    setPresetDefault4 = _useState8[1];
  var _useState9 = useState(1),
    _useState10 = _slicedToArray(_useState9, 2),
    presetCard1 = _useState10[0],
    setPresetCard1 = _useState10[1];
  var _useState11 = useState(1),
    _useState12 = _slicedToArray(_useState11, 2),
    presetCard2 = _useState12[0],
    setPresetCard2 = _useState12[1];
  var _useState13 = useState(1),
    _useState14 = _slicedToArray(_useState13, 2),
    presetCard3 = _useState14[0],
    setPresetCard3 = _useState14[1];
  var _useState15 = useState(1),
    _useState16 = _slicedToArray(_useState15, 2),
    presetCard4 = _useState16[0],
    setPresetCard4 = _useState16[1];
  var _useState17 = useState(1),
    _useState18 = _slicedToArray(_useState17, 2),
    presetCard5 = _useState18[0],
    setPresetCard5 = _useState18[1];
  var _useState19 = useState([1]),
    _useState20 = _slicedToArray(_useState19, 2),
    presetMedia1 = _useState20[0],
    setPresetMedia1 = _useState20[1];
  var _useState21 = useState([1]),
    _useState22 = _slicedToArray(_useState21, 2),
    presetMedia2 = _useState22[0],
    setPresetMedia2 = _useState22[1];

  // 对比示例状态
  var _useState23 = useState(1),
    _useState24 = _slicedToArray(_useState23, 2),
    comparePreset = _useState24[0],
    setComparePreset = _useState24[1];
  var _useState25 = useState(1),
    _useState26 = _slicedToArray(_useState25, 2),
    compareManual = _useState26[0],
    setCompareManual = _useState26[1];

  // 实际应用场景状态
  var _useState27 = useState({
      value: 2,
      quantity: 1
    }),
    _useState28 = _slicedToArray(_useState27, 2),
    productSpec = _useState28[0],
    setProductSpec = _useState28[1];
  var _useState29 = useState('alipay'),
    _useState30 = _slicedToArray(_useState29, 2),
    paymentMethod = _useState30[0],
    setPaymentMethod = _useState30[1];
  var _useState31 = useState([1, 2]),
    _useState32 = _slicedToArray(_useState31, 2),
    serviceOptions = _useState32[0],
    setServiceOptions = _useState32[1];
  var _useState33 = useState('100%'),
    _useState34 = _slicedToArray(_useState33, 2),
    width = _useState34[0],
    setWidth = _useState34[1];

  // 数据源
  var simpleDataSource = [{
    id: 1,
    title: '选项A'
  }, {
    id: 2,
    title: '选项B'
  }, {
    id: 3,
    title: '选项C'
  }, {
    id: 4,
    title: '选项D'
  }, {
    id: 5,
    title: '选项E'
  }, {
    id: 6,
    title: '选项F'
  }];
  var cardDataSource = [{
    id: 1,
    title: '基础版',
    price: '¥99/月',
    desc: '适合个人用户',
    features: ['5GB 存储', '基础功能']
  }, {
    id: 2,
    title: '专业版',
    price: '¥299/月',
    desc: '适合小团队',
    features: ['50GB 存储', '高级功能'],
    ruleConfig: {
      min: 6,
      max: 5
    }
  }, {
    id: 3,
    title: '企业版',
    price: '¥999/月',
    desc: '适合大型企业',
    features: ['无限存储', '全部功能']
  }];
  var mediaDataSource = [{
    id: 1,
    label: '风景',
    value: 'landscape',
    cover: 'https://picsum.photos/seed/landscape/300/200'
  }, {
    id: 2,
    label: '人物',
    value: 'portrait',
    cover: 'https://picsum.photos/seed/portrait/300/200'
  }, {
    id: 3,
    label: '建筑',
    value: 'architecture',
    cover: 'https://picsum.photos/seed/architecture/300/200'
  }, {
    id: 4,
    label: '美食',
    value: 'food',
    cover: 'https://picsum.photos/seed/food/300/200'
  }];
  var productSpecs = [{
    id: 1,
    title: '128GB 黑色',
    price: '¥5999',
    stock: 156,
    ruleConfig: {
      min: 1,
      max: 3
    }
  }, {
    id: 2,
    title: '256GB 白色',
    price: '¥6999',
    stock: 89,
    ruleConfig: {
      min: 1,
      max: 5
    }
  }, {
    id: 3,
    title: '512GB 蓝色',
    price: '¥7999',
    stock: 23,
    ruleConfig: {
      min: 1,
      max: 2
    }
  }];
  var paymentMethods = [{
    id: 1,
    value: 'alipay',
    title: '支付宝',
    icon: '💳'
  }, {
    id: 2,
    value: 'wechat',
    title: '微信支付',
    icon: '💚'
  }, {
    id: 3,
    value: 'card',
    title: '银行卡',
    icon: '🏦'
  }];
  var serviceOptionsList = [{
    id: 1,
    title: '7天无理由退换',
    price: '免费'
  }, {
    id: 2,
    title: '延保服务',
    price: '+¥199'
  }, {
    id: 3,
    title: '碎屏险',
    price: '+¥299'
  }, {
    id: 4,
    title: '上门安装',
    price: '+¥99'
  }];
  var renderValueDisplay = function renderValueDisplay(value) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 12,
        padding: 12,
        background: '#f0f2f5',
        borderRadius: 6,
        fontSize: 13
      }
    }, /*#__PURE__*/React.createElement(Text, {
      strong: true
    }, "\u5F53\u524D\u503C\uFF1A"), /*#__PURE__*/React.createElement("pre", {
      style: {
        margin: '4px 0 0',
        fontSize: 12
      }
    }, JSON.stringify(value, null, 2)));
  };
  var DemoSection = function DemoSection(_ref) {
    var title = _ref.title,
      description = _ref.description,
      children = _ref.children;
    return /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 48
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 16
      }
    }, /*#__PURE__*/React.createElement(Title, {
      level: 4,
      style: {
        marginBottom: 4
      }
    }, title), /*#__PURE__*/React.createElement(Paragraph, {
      type: "secondary",
      style: {
        marginBottom: 0,
        fontSize: 14
      }
    }, description)), children);
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: width + 'px',
      margin: '0 auto'
    }
  }, /*#__PURE__*/React.createElement("input", {
    type: "text",
    value: width,
    onChange: function onChange(e) {
      return setWidth(e.target.value);
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 48
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 1
  }, "Selector \u7EC4\u4EF6 - Preset \u80FD\u529B\u6F14\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 16,
      color: '#666'
    }
  }, "\u901A\u8FC7 ", /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "preset"), ' ', "\u5C5E\u6027\u5FEB\u901F\u914D\u7F6E\u9009\u62E9\u5668\u6837\u5F0F\uFF0C\u65E0\u9700\u624B\u52A8\u8BBE\u7F6E\u590D\u6742\u7684 grid \u548C indicator \u914D\u7F6E\u3002", /*#__PURE__*/React.createElement("br", null), "\u6BCF\u4E2A variant \u652F\u6301\u591A\u79CD\u9884\u8BBE\u5E03\u5C40\uFF0C\u8BA9\u4F4E\u4EE3\u7801\u914D\u7F6E\u66F4\u52A0\u7B80\u5355\u76F4\u89C2\u3002")), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #1890ff',
      paddingLeft: 16
    }
  }, "\u4E00\u3001Preset \u5FEB\u901F\u5165\u95E8"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "\u4F7F\u7528 ", /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "preset"), " \u5C5E\u6027\u5373\u53EF\u5FEB\u901F\u5E94\u7528\u9884\u8BBE\u6837\u5F0F\uFF0C\u65E0\u9700\u5173\u5FC3\u5E95\u5C42\u7684 grid \u5E03\u5C40\u914D\u7F6E\u3002 \u53EA\u9700\u6307\u5B9A ", /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "variant"), " \u503C\uFF08'1' | '2' | '3' | '4' | '5'\uFF09\uFF0C\u7CFB\u7EDF\u81EA\u52A8\u5E94\u7528\u5BF9\u5E94\u7684\u5E03\u5C40\u548C\u6837\u5F0F\u3002"), /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u2728 \u5FEB\u901F\u5F00\u59CB - \u4E00\u884C\u914D\u7F6E\u641E\u5B9A",
    description: "\u4F7F\u7528 preset={{ variant: '1' }} \u5373\u53EF\u5E94\u7528\u9884\u8BBE\u5E03\u5C40\uFF0C\u65E0\u9700\u4EFB\u4F55 grid \u914D\u7F6E"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: simpleDataSource,
    mode: "multiple",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetDefault1,
    onChange: setPresetDefault1,
    variant: "select",
    preset: {
      variant: '1'
    }
  }), renderValueDisplay(presetDefault1), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 12,
      padding: 12,
      background: '#e6f7ff',
      borderRadius: 6
    }
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "\uD83D\uDCA1 \u4EE3\u7801\u793A\u4F8B\uFF1A"), /*#__PURE__*/React.createElement("pre", {
    style: {
      margin: '8px 0 0',
      fontSize: 12,
      color: '#1890ff'
    }
  }, "<Selector\n  preset={{ variant: '1' }}  // \u4EC5\u9700\u8FD9\u4E00\u884C\u914D\u7F6E\n  variant=\"default\"\n  // ... \u5176\u4ED6\u57FA\u7840\u914D\u7F6E\n/>")))), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #52c41a',
      paddingLeft: 16
    }
  }, "\u4E8C\u3001Default Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "Default \u53D8\u4F53\u652F\u6301 4 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2' | '3' | '4'\uFF09\uFF0C \u9002\u7528\u4E8E\u5E38\u89C4\u7684\u9009\u9879\u9009\u62E9\u573A\u666F\u3002"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 32
    }
  }, /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 1 - \u5355\u5217\u5E03\u5C40",
    description: "preset={{ variant: '1' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u5782\u76F4\u6392\u5217\uFF08\u9002\u5408\u957F\u6587\u672C\u9009\u9879\uFF09"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: simpleDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetDefault1,
    onChange: setPresetDefault1,
    variant: "default",
    preset: {
      variant: '1'
    }
  }), renderValueDisplay(presetDefault1)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 2 - \u81EA\u9002\u5E94\u5BBD\u5EA6",
    description: "preset={{ variant: '2' }} \u2192 Flex \u5E03\u5C40\uFF0C\u9009\u9879\u5BBD\u5EA6\u81EA\u52A8\u9002\u5E94\u5185\u5BB9"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: simpleDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetDefault2,
    onChange: setPresetDefault2,
    variant: "default",
    preset: {
      variant: '2'
    }
  }), renderValueDisplay(presetDefault2)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 3 - \u5355\u5217\u5E03\u5C40\uFF08\u53D8\u4F53\uFF09",
    description: "preset={{ variant: '3' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u53E6\u4E00\u79CD\u5355\u5217\u5E03\u5C40\u6837\u5F0F"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: simpleDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetDefault3,
    onChange: setPresetDefault3,
    variant: "default",
    preset: {
      variant: '3'
    },
    renderItem: function renderItem(option) {
      return /*#__PURE__*/React.createElement(Selector.Item, option, /*#__PURE__*/React.createElement("div", {
        style: {
          height: 60,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#dfdfdf'
        }
      }, "container"));
    }
  }), renderValueDisplay(presetDefault3)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 4 - \u81EA\u9002\u5E94\u5BBD\u5EA6\uFF08\u53D8\u4F53\uFF09",
    description: "preset={{ variant: '4' }} \u2192 \u53E6\u4E00\u79CD Flex \u81EA\u9002\u5E94\u5E03\u5C40"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: simpleDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetDefault4,
    onChange: setPresetDefault4,
    variant: "default",
    preset: {
      variant: '4'
    },
    renderItem: function renderItem(option) {
      return /*#__PURE__*/React.createElement(Selector.Item, option, /*#__PURE__*/React.createElement("div", {
        style: {
          height: 60,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#dfdfdf'
        }
      }, 'container'.repeat(1 + Math.floor(Math.random() * 10))));
    }
  }), renderValueDisplay(presetDefault4)))), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #fa8c16',
      paddingLeft: 16
    }
  }, "\u4E09\u3001Card Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "Card \u53D8\u4F53\u652F\u6301 5 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2' | '3' | '4' | '5'\uFF09\uFF0C \u9002\u7528\u4E8E\u5361\u7247\u5F0F\u3001\u5957\u9910\u5F0F\u7684\u9009\u9879\u5C55\u793A\u3002"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 32
    }
  }, /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 1 - \u56FA\u5B9A\u5BBD\u5EA6\u7F51\u683C\uFF08209px\uFF09",
    description: "preset={{ variant: '1' }} \u2192 CSS Grid \u5E03\u5C40\uFF0C\u6BCF\u5217\u56FA\u5B9A 209px"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetCard1,
    onChange: setPresetCard1,
    variant: "card",
    preset: {
      variant: '1'
    }
  }), renderValueDisplay(presetCard1)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 2 - \u56FA\u5B9A\u5BBD\u5EA6\u7F51\u683C + Filled \u6307\u793A\u5668",
    description: "preset={{ variant: '2' }} \u2192 209px Grid \u5E03\u5C40\uFF0C\u81EA\u52A8\u5E94\u7528 filled \u98CE\u683C\u7684 indicator"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetCard2,
    onChange: setPresetCard2,
    variant: "card",
    preset: {
      variant: '2'
    }
    // itemProps={{
    //   renderContent: (option) => (
    //     <div>
    //       <div style={{ fontSize: 16, fontWeight: 600, textAlign: 'center' }}>
    //         {option.dataSource.title}
    //       </div>
    //     </div>
    //   ),
    // }}
  }), renderValueDisplay(presetCard2)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 3 - \u5355\u5217\u5361\u7247\u5E03\u5C40",
    description: "preset={{ variant: '3' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u9002\u5408\u6A2A\u5411\u5361\u7247"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetCard3,
    onChange: setPresetCard3,
    variant: "card",
    preset: {
      variant: '2'
    },
    itemProps: {
      layout: 'vertical',
      indicatorPosition: 'right',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", {
          style: {
            flex: 1
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 16,
            fontWeight: 600
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 18,
            margin: '4px 0'
          }
        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#999',
            fontSize: 13
          }
        }, option.dataSource.desc));
      }
    }
  }), renderValueDisplay(presetCard3)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 4 - \u5927\u5C3A\u5BF8\u7F51\u683C\uFF08325px\uFF09",
    description: "preset={{ variant: '4' }} \u2192 CSS Grid \u5E03\u5C40\uFF0C\u6BCF\u5217\u56FA\u5B9A 325px\uFF08\u9002\u5408\u5185\u5BB9\u4E30\u5BCC\u7684\u5361\u7247\uFF09"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "object",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetCard4,
    onChange: setPresetCard4,
    variant: "card",
    preset: {
      variant: '4'
    },
    itemProps: {
      renderContent: function renderContent(option) {
        var _option$dataSource$fe;
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 20,
            fontWeight: 600,
            marginBottom: 12
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 24,
            marginBottom: 12
          }
        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#666',
            fontSize: 14,
            marginBottom: 16
          }
        }, option.dataSource.desc), /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 13,
            color: '#333',
            lineHeight: 1.8
          }
        }, (_option$dataSource$fe = option.dataSource.features) === null || _option$dataSource$fe === void 0 ? void 0 : _option$dataSource$fe.map(function (f, i) {
          return /*#__PURE__*/React.createElement("div", {
            key: i
          }, "\u2713 ", f);
        })));
      }
    }
  }), renderValueDisplay(presetCard4)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 5 - \u5355\u5217\u5927\u5361\u7247",
    description: "preset={{ variant: '5' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u9002\u5408\u8BE6\u7EC6\u4FE1\u606F\u5C55\u793A"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: presetCard5,
    onChange: setPresetCard5,
    variant: "card",
    preset: {
      variant: '5'
    },
    itemProps: {
      layout: 'horizontal',
      indicatorPosition: 'right',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", {
          style: {
            flex: 1
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            alignItems: 'center',
            gap: 16
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            flex: 1
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 18,
            fontWeight: 600,
            marginBottom: 4
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#999',
            fontSize: 14
          }
        }, option.dataSource.desc)), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 24,
            fontWeight: 600
          }
        }, option.dataSource.price)));
      }
    }
  }), renderValueDisplay(presetCard5)))), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #722ed1',
      paddingLeft: 16
    }
  }, "\u56DB\u3001Media Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "Media \u53D8\u4F53\u652F\u6301 2 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2'\uFF09\uFF0C \u9002\u7528\u4E8E\u56FE\u7247\u3001\u89C6\u9891\u7B49\u5A92\u4F53\u5185\u5BB9\u7684\u9009\u62E9\u573A\u666F\u3002\u81EA\u52A8\u5E94\u7528 filled \u98CE\u683C\u7684\u6307\u793A\u5668\u3002"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 32
    }
  }, /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 1 - \u81EA\u9002\u5E94\u5A92\u4F53\u7F51\u683C",
    description: "preset={{ variant: '1' }} \u2192 Flex \u5E03\u5C40\uFF0C\u81EA\u52A8\u5E94\u7528 filled \u6307\u793A\u5668"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: mediaDataSource,
    mode: "multiple",
    valueType: "primitive",
    fieldNames: {
      value: 'value',
      label: 'label',
      cover: 'cover'
    },
    value: presetMedia1,
    onChange: setPresetMedia1,
    variant: "media",
    preset: {
      variant: '1'
    }
  }), renderValueDisplay(presetMedia1)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "Preset 2 - \u81EA\u9002\u5E94\u5A92\u4F53\u7F51\u683C\uFF08\u53D8\u4F53\uFF09",
    description: "preset={{ variant: '2' }} \u2192 \u53E6\u4E00\u79CD Flex \u5A92\u4F53\u5E03\u5C40"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: mediaDataSource,
    mode: "single",
    valueType: "object",
    fieldNames: {
      value: 'value',
      label: 'label',
      cover: 'cover'
    },
    value: presetMedia2,
    onChange: setPresetMedia2,
    variant: "media",
    preset: {
      variant: '2'
    }
  }), renderValueDisplay(presetMedia2)))), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #eb2f96',
      paddingLeft: 16
    }
  }, "\u4E94\u3001Preset vs \u624B\u52A8\u914D\u7F6E"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "\u5BF9\u6BD4\u4F7F\u7528 preset \u548C\u624B\u52A8\u914D\u7F6E grid \u7684\u533A\u522B\uFF0C\u5C55\u793A preset \u7684\u4FBF\u6377\u6027\u3002"), /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u4F7F\u7528 Preset - \u7B80\u6D01\u914D\u7F6E",
    description: "\u53EA\u9700\u4E00\u884C preset \u914D\u7F6E\uFF0C\u81EA\u52A8\u5E94\u7528\u5E03\u5C40\u548C\u6837\u5F0F"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: comparePreset,
    onChange: setComparePreset,
    variant: "card",
    preset: {
      variant: '1'
    },
    itemProps: {
      layout: 'vertical',
      indicatorPosition: 'topRight',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 16,
            fontWeight: 600
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 18,
            margin: '8px 0'
          }
        }, option.dataSource.price));
      }
    }
  }), renderValueDisplay(comparePreset), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 12,
      padding: 12,
      background: '#f6ffed',
      borderRadius: 6
    }
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    style: {
      color: '#52c41a'
    }
  }, "\u2713 \u4F7F\u7528 Preset \u7684\u4EE3\u7801\uFF1A"), /*#__PURE__*/React.createElement("pre", {
    style: {
      margin: '8px 0 0',
      fontSize: 12
    }
  }, "<Selector\n  preset={{ variant: '1' }}  // \u2728 \u4EC5\u9700\u8FD9\u4E00\u884C\n  variant=\"card\"\n  // ... \u5176\u4ED6\u914D\u7F6E\n/>"))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u624B\u52A8\u914D\u7F6E Grid - \u590D\u6742\u914D\u7F6E",
    description: "\u9700\u8981\u624B\u52A8\u914D\u7F6E grid \u7684 layoutType\u3001baseWidth \u7B49\u591A\u4E2A\u53C2\u6570"
  }, /*#__PURE__*/React.createElement(Selector, {
    dataSource: cardDataSource,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: compareManual,
    onChange: setCompareManual,
    variant: "card",
    layout: {
      containerStyle: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(209px, 100%), 1fr))'
      }
    },
    itemProps: {
      layout: 'vertical',
      indicatorPosition: 'topRight',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 16,
            fontWeight: 600
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 18,
            margin: '8px 0'
          }
        }, option.dataSource.price));
      }
    }
  }), renderValueDisplay(compareManual), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 12,
      padding: 12,
      background: '#fff7e6',
      borderRadius: 6
    }
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    style: {
      color: '#fa8c16'
    }
  }, "\u26A0 \u624B\u52A8\u914D\u7F6E\u7684\u4EE3\u7801\uFF1A"), /*#__PURE__*/React.createElement("pre", {
    style: {
      margin: '8px 0 0',
      fontSize: 12
    }
  }, "<Selector\n  grid={{                    // \u9700\u8981\u8BE6\u7EC6\u914D\u7F6E\n    layoutType: 'grid',\n    baseWidth: '209px',\n    wrap: true,\n  }}\n  variant=\"card\"\n  // ... \u5176\u4ED6\u914D\u7F6E\n/>")))), /*#__PURE__*/React.createElement("section", {
    style: {
      marginBottom: 80
    }
  }, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #13c2c2',
      paddingLeft: 16
    }
  }, "\u516D\u3001\u5B9E\u9645\u5E94\u7528\u573A\u666F"), /*#__PURE__*/React.createElement(Paragraph, {
    style: {
      fontSize: 15,
      marginTop: 16,
      marginBottom: 32
    }
  }, "\u5C55\u793A Preset \u5728\u771F\u5B9E\u4E1A\u52A1\u573A\u666F\u4E2D\u7684\u5E94\u7528\uFF0C\u5982\u7535\u5546\u9009\u89C4\u683C\u3001\u652F\u4ED8\u65B9\u5F0F\u9009\u62E9\u7B49\u3002"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 48
    }
  }, /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u573A\u666F1\uFF1A\u7535\u5546\u5546\u54C1\u89C4\u683C\u9009\u62E9",
    description: "\u4F7F\u7528 preset={{ variant: '1' }} + card variant\uFF0C\u914D\u5408\u6570\u91CF\u9009\u62E9\u5668"
  }, /*#__PURE__*/React.createElement(Selector, {
    title: "\u9009\u62E9\u5546\u54C1\u89C4\u683C",
    dataSource: productSpecs,
    mode: "single",
    valueType: "object",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: productSpec,
    onChange: setProductSpec,
    variant: "card",
    preset: {
      variant: '1'
    },
    itemProps: {
      layout: 'vertical',
      indicatorPosition: 'topRight',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 16,
            fontWeight: 600,
            marginBottom: 6
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 20,
            fontWeight: 600,
            marginBottom: 6
          }
        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#999',
            fontSize: 13
          }
        }, "\u5E93\u5B58\uFF1A", option.dataSource.stock, " \u4EF6"));
      }
    },
    titleProps: {
      visible: true,
      icon: {
        visible: true,
        icon: /*#__PURE__*/React.createElement(StarOutlined, {
          style: {
            color: '#faad14'
          }
        })
      }
    }
  }), renderValueDisplay(productSpec)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u573A\u666F2\uFF1A\u652F\u4ED8\u65B9\u5F0F\u9009\u62E9",
    description: "\u4F7F\u7528 preset={{ variant: '3' }} + card variant\uFF0C\u5355\u5217\u6A2A\u5411\u5E03\u5C40"
  }, /*#__PURE__*/React.createElement(Selector, {
    title: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
    dataSource: paymentMethods,
    mode: "single",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: paymentMethod,
    onChange: setPaymentMethod,
    variant: "card",
    preset: {
      variant: '3'
    },
    itemProps: {
      layout: 'horizontal',
      indicatorPosition: 'right',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            flex: 1
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 32
          }
        }, option.dataSource.icon), /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 16,
            fontWeight: 500
          }
        }, option.dataSource.title));
      }
    }
  }), renderValueDisplay(paymentMethod)), /*#__PURE__*/React.createElement(DemoSection, {
    title: "\u573A\u666F3\uFF1A\u589E\u503C\u670D\u52A1\u9009\u62E9",
    description: "\u4F7F\u7528 preset={{ variant: '3' }} + \u591A\u9009\u6A21\u5F0F\uFF0C\u9009\u62E9\u591A\u4E2A\u589E\u503C\u670D\u52A1"
  }, /*#__PURE__*/React.createElement(Selector, {
    title: "\u589E\u503C\u670D\u52A1\uFF08\u53EF\u9009\uFF09",
    dataSource: serviceOptionsList,
    mode: "multiple",
    valueType: "primitive",
    fieldNames: {
      value: 'id',
      label: 'title'
    },
    value: serviceOptions,
    onChange: setServiceOptions,
    variant: "card",
    preset: {
      variant: '3'
    },
    ruleConfig: {
      max: 3
    },
    itemProps: {
      layout: 'horizontal',
      indicatorPosition: 'left',
      renderContent: function renderContent(option) {
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flex: 1
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            fontSize: 15
          }
        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#ff4d4f',
            fontSize: 15,
            fontWeight: 600
          }
        }, option.dataSource.price));
      }
    },
    titleProps: {
      visible: true,
      tip: {
        visible: true,
        text: '最多选择3项'
      }
    }
  }), renderValueDisplay(serviceOptions)))), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Title, {
    level: 2,
    style: {
      borderLeft: '4px solid #595959',
      paddingLeft: 16
    }
  }, "\u4E03\u3001Preset \u4F7F\u7528\u603B\u7ED3"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 24,
      padding: 24,
      background: '#fafafa',
      borderRadius: 8
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 16
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    style: {
      fontSize: 15
    }
  }, "\uD83C\uDFAF Preset \u7684\u4F18\u52BF\uFF1A"), /*#__PURE__*/React.createElement("ul", {
    style: {
      marginTop: 8,
      paddingLeft: 20
    }
  }, /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "\u7B80\u5316\u914D\u7F6E"), "\uFF1A\u65E0\u9700\u624B\u52A8\u8BBE\u7F6E\u590D\u6742\u7684 grid \u5E03\u5C40\u53C2\u6570"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "\u5FEB\u901F\u5E94\u7528"), "\uFF1A\u4E00\u884C\u4EE3\u7801\u5373\u53EF\u5E94\u7528\u9884\u8BBE\u6837\u5F0F"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "\u54CD\u5E94\u5F0F\u5E03\u5C40"), "\uFF1A\u9884\u8BBE\u5DF2\u4F18\u5316\u597D\u54CD\u5E94\u5F0F\u6548\u679C"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "\u4F4E\u4EE3\u7801\u53CB\u597D"), "\uFF1A\u9002\u5408\u5728\u4F4E\u4EE3\u7801\u5E73\u53F0\u4E2D\u5FEB\u901F\u914D\u7F6E"))), /*#__PURE__*/React.createElement(Divider, {
    style: {
      margin: '8px 0'
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    style: {
      fontSize: 15
    }
  }, "\uD83D\uDCCB \u652F\u6301\u7684 Preset Variant\uFF1A"), /*#__PURE__*/React.createElement("ul", {
    style: {
      marginTop: 8,
      paddingLeft: 20
    }
  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "default"), ": \u652F\u6301 variant '1', '2', '3', '4'"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "card"), ": \u652F\u6301 variant '1', '2', '3', '4', '5'"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "media"), ": \u652F\u6301 variant '1', '2'\uFF08\u81EA\u52A8\u5E94\u7528 filled \u6307\u793A\u5668\uFF09"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
    code: true
  }, "select"), ": \u4EC5\u652F\u6301 variant '1'\uFF08\u4E0B\u62C9\u9009\u62E9\u5668\uFF09"))), /*#__PURE__*/React.createElement(Divider, {
    style: {
      margin: '8px 0'
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    style: {
      fontSize: 15
    }
  }, "\uD83D\uDD27 \u9AD8\u7EA7\u7528\u6CD5\uFF1A"), /*#__PURE__*/React.createElement("ul", {
    style: {
      marginTop: 8,
      paddingLeft: 20
    }
  }, /*#__PURE__*/React.createElement("li", null, "\u2022 Preset \u548C\u624B\u52A8 grid \u914D\u7F6E\u53EF\u5171\u5B58\uFF0C\u624B\u52A8\u914D\u7F6E\u4F18\u5148\u7EA7\u66F4\u9AD8"), /*#__PURE__*/React.createElement("li", null, "\u2022 indicatorProps \u4F1A\u6839\u636E preset \u81EA\u52A8\u8C03\u6574\uFF08\u5982 media/card-2 \u81EA\u52A8\u5E94\u7528 filled\uFF09"), /*#__PURE__*/React.createElement("li", null, "\u2022 \u53EF\u901A\u8FC7 itemProps \u8FDB\u4E00\u6B65\u5B9A\u5236\u9009\u9879\u5185\u5BB9\u7684\u6E32\u67D3")))))));
};
export default SelectorDemo;