import PisellDateTimeDisplay from "./PisellDateTimeDisplay";

/**
 * PisellDateTimeDisplay 组件 Storybook
 */
var meta = {
  title: 'Data Display/PisellDateTimeDisplay',
  component: PisellDateTimeDisplay,
  tags: ['autodocs'],
  argTypes: {
    layout: {
      control: 'radio',
      options: ['horizontal', 'vertical', 'inline'],
      description: '布局方向'
    },
    textAlign: {
      control: 'radio',
      options: ['left', 'center', 'right'],
      description: '文本对齐方式'
    },
    locale: {
      control: 'select',
      options: ['zh-cn', 'en', 'ja'],
      description: '语言'
    }
  }
};
export default meta;
/**
 * 基础示例
 */
export var Basic = {
  args: {}
};

/**
 * 水平布局（默认）
 */
export var HorizontalLayout = {
  args: {
    layout: 'horizontal'
  }
};

/**
 * 垂直布局
 */
export var VerticalLayout = {
  args: {
    layout: 'vertical'
  }
};

/**
 * 单行布局
 */
export var InlineLayout = {
  args: {
    layout: 'inline'
  }
};

/**
 * 单行布局 - 自定义分隔符
 */
export var InlineWithCustomSeparator = {
  args: {
    layout: 'inline',
    inlineSeparator: ' | '
  }
};

/**
 * 中文完整日期格式：2025-12-31 - 2:00 周四
 * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
 */
export var InlineDateTimeWeekdayZh = {
  args: {
    layout: 'inline',
    locale: 'zh-cn',
    fields: {
      fieldOrder: ['date', 'time', 'weekday'],
      inlineSeparators: [' - ', ' ']
    },
    dateFormat: {
      order: 'YMD',
      showYear: true,
      separator: '-',
      showChineseUnit: false,
      showRelativeDay: false
    }
  }
};

/**
 * 12小时制
 */
export var Time12Hour = {
  args: {
    timeFormat: {
      use12Hour: true
    }
  }
};

/**
 * 显示秒
 */
export var TimeWithSeconds = {
  args: {
    timeFormat: {
      showSeconds: true
    }
  }
};

/**
 * 12小时制 + 显示秒
 */
export var Time12HourWithSeconds = {
  args: {
    timeFormat: {
      use12Hour: true,
      showSeconds: true
    }
  }
};

/**
 * 小时补零
 */
export var TimePadHour = {
  args: {
    timeFormat: {
      use12Hour: true,
      padHour: true
    }
  }
};

/**
 * 只显示小时
 */
export var TimeOnlyHour = {
  args: {
    timeFormat: {
      onlyShowHour: true
    }
  }
};

/**
 * 完整日期（Y-M-D）
 */
export var DateFullYMD = {
  args: {
    dateFormat: {
      order: 'YMD',
      showYear: true,
      showMonth: true,
      showDay: true
    }
  }
};

/**
 * 月-日-年 格式
 */
export var DateMDY = {
  args: {
    locale: 'en',
    dateFormat: {
      order: 'MDY',
      showYear: true
    }
  }
};

/**
 * 日-月-年 格式
 */
export var DateDMY = {
  args: {
    locale: 'en',
    dateFormat: {
      order: 'DMY',
      showYear: true
    }
  }
};

/**
 * 中文日期带单位
 */
export var DateChinese = {
  args: {
    locale: 'zh-cn',
    dateFormat: {
      showYear: true,
      showChineseUnit: true
    }
  }
};

/**
 * 相对日：今天/昨天/明天
 * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
 * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
 */
export var RelativeDay = {
  args: {
    layout: 'horizontal',
    dateFormat: {
      showRelativeDay: true,
      showYear: true,
      showChineseUnit: true
    },
    locale: 'zh-cn'
  }
};

/**
 * 相对日 - 英文
 */
export var RelativeDayEn = {
  args: {
    layout: 'horizontal',
    dateFormat: {
      showRelativeDay: true,
      order: 'MDY',
      showYear: true
    },
    locale: 'en'
  }
};

/**
 * 相对日 - 自定义文案
 */
export var RelativeDayCustomLabels = {
  args: {
    layout: 'horizontal',
    dateFormat: {
      showRelativeDay: true,
      relativeDayLabels: {
        today: '今日',
        yesterday: '昨日',
        tomorrow: '翌日'
      },
      showYear: true,
      showChineseUnit: true
    },
    locale: 'zh-cn'
  }
};

/**
 * 英文完整月份
 */
export var DateFullMonth = {
  args: {
    locale: 'en',
    dateFormat: {
      order: 'MDY',
      showYear: true,
      shortMonth: false
    }
  }
};

/**
 * 自定义分隔符
 */
export var DateCustomSeparator = {
  args: {
    dateFormat: {
      showYear: true,
      separator: '/'
    }
  }
};

/**
 * 星期完整展示（英文）
 */
export var WeekdayFull = {
  args: {
    locale: 'en',
    weekdayFormat: {
      full: true
    }
  }
};

/**
 * 星期完整展示（中文）
 */
export var WeekdayFullChinese = {
  args: {
    locale: 'zh-cn',
    weekdayFormat: {
      full: true
    }
  }
};

/**
 * 星期单字母展示
 */
export var WeekdaySingleLetter = {
  args: {
    weekdayFormat: {
      singleLetter: true
    }
  }
};

/**
 * 只显示时间
 */
export var OnlyTime = {
  args: {
    fields: {
      showTime: true,
      showDate: false,
      showWeekday: false
    }
  }
};

/**
 * 只显示日期
 */
export var OnlyDate = {
  args: {
    fields: {
      showTime: false,
      showDate: true,
      showWeekday: false
    },
    dateFormat: {
      showYear: true
    }
  }
};

/**
 * 自定义字段顺序
 */
export var CustomFieldOrder = {
  args: {
    layout: 'vertical',
    fields: {
      fieldOrder: ['weekday', 'date', 'time']
    }
  }
};

/**
 * 自定义格式化 - ISO 格式
 */
export var CustomFormatISO = {
  args: {
    customFormat: 'YYYY-MM-DD HH:mm:ss'
  }
};

/**
 * 自定义格式化 - 中文格式
 */
export var CustomFormatChinese = {
  args: {
    customFormat: 'YYYY年MM月DD日 HH:mm'
  }
};

/**
 * 自定义格式化 - 包含星期
 */
export var CustomFormatWithWeekday = {
  args: {
    locale: 'en',
    customFormat: 'YYYY-MM-DD dddd HH:mm'
  }
};

/**
 * 中文环境
 */
export var LocaleChinese = {
  args: {
    locale: 'zh-cn',
    layout: 'vertical',
    dateFormat: {
      showYear: true,
      showChineseUnit: true
    },
    weekdayFormat: {
      full: true
    }
  }
};

/**
 * 英文环境
 */
export var LocaleEnglish = {
  args: {
    locale: 'en',
    layout: 'vertical',
    dateFormat: {
      order: 'MDY',
      showYear: true,
      shortMonth: false
    },
    weekdayFormat: {
      full: true
    }
  }
};

/**
 * 自定义容器样式
 */
export var CustomContainerStyle = {
  args: {
    containerStyle: {
      background: '#f5f5f5',
      borderRadius: 8,
      border: '1px solid #d9d9d9',
      padding: 16
    }
  }
};

/**
 * 自定义文本样式
 */
export var CustomTextStyle = {
  args: {
    layout: 'vertical',
    timeStyle: {
      fontSize: 32,
      fontWeight: 700,
      color: '#1890ff'
    },
    dateStyle: {
      fontSize: 18,
      fontWeight: 400,
      color: '#666'
    },
    weekdayStyle: {
      fontSize: 16,
      fontWeight: 400,
      color: '#999'
    }
  }
};

/**
 * 居中对齐
 */
export var CenterAlign = {
  args: {
    textAlign: 'center',
    containerStyle: {
      border: '1px solid #d9d9d9',
      padding: 16
    }
  }
};

/**
 * 禁用自动刷新
 */
export var DisableRefresh = {
  args: {
    disableAutoRefresh: true
  }
};

/**
 * 自定义刷新间隔（5秒）
 */
export var CustomRefreshInterval = {
  args: {
    timeFormat: {
      showSeconds: true
    },
    refreshInterval: 5000
  }
};

/**
 * 应用场景 - 后台首页
 */
export var ScenarioDashboard = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        padding: 24,
        background: '#fff',
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        fontSize: 20,
        fontWeight: 600,
        marginBottom: 16
      }
    }, "\u6B22\u8FCE\u56DE\u6765\uFF01"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "horizontal",
      timeFormat: {
        showSeconds: false
      },
      dateFormat: {
        showYear: true,
        showChineseUnit: true
      },
      locale: "zh-cn",
      timeStyle: {
        fontSize: 32,
        fontWeight: 700
      },
      dateStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: '#666'
      },
      weekdayStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: '#666'
      }
    }));
  }
};

/**
 * 应用场景 - 状态栏
 */
export var ScenarioStatusBar = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '12px 24px',
        background: '#001529',
        color: '#fff'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        fontSize: 18,
        fontWeight: 600
      }
    }, "\u7CFB\u7EDF\u7BA1\u7406\u540E\u53F0"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "inline",
      inlineSeparator: " | ",
      timeFormat: {
        showSeconds: false
      },
      dateFormat: {
        showYear: false
      },
      locale: "zh-cn",
      style: {
        color: 'rgba(255, 255, 255, 0.8)'
      }
    }));
  }
};

/**
 * 应用场景 - 欢迎页
 */
export var ScenarioWelcome = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        height: 300,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "vertical",
      textAlign: "center",
      timeFormat: {
        use12Hour: true,
        showSeconds: true
      },
      dateFormat: {
        showYear: true
      },
      locale: "en",
      containerStyle: {
        background: 'rgba(255, 255, 255, 0.2)',
        borderRadius: 16,
        padding: 32
      },
      timeStyle: {
        fontSize: 48,
        fontWeight: 700,
        color: '#fff'
      },
      dateStyle: {
        fontSize: 20,
        fontWeight: 400,
        color: 'rgba(255, 255, 255, 0.9)'
      },
      weekdayStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: 'rgba(255, 255, 255, 0.8)'
      }
    }));
  }
};

/**
 * 应用场景 - 大屏展示
 */
export var ScenarioLargeScreen = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        height: 200,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#000',
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "inline",
      inlineSeparator: " ",
      timeFormat: {
        showSeconds: true
      },
      dateFormat: {
        showYear: true
      },
      customFormat: "YYYY-MM-DD HH:mm:ss",
      containerStyle: {
        padding: 24
      },
      style: {
        fontSize: 48,
        fontWeight: 700,
        color: '#0f0',
        fontFamily: 'monospace'
      }
    }));
  }
};

/**
 * 多语言对比
 */
export var MultiLanguage = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        fontWeight: 600
      }
    }, "\u4E2D\u6587"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "zh-cn",
      dateFormat: {
        showYear: true,
        showChineseUnit: true
      },
      weekdayFormat: {
        full: true
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        fontWeight: 600
      }
    }, "English"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      dateFormat: {
        order: 'MDY',
        showYear: true
      },
      weekdayFormat: {
        full: true
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        fontWeight: 600
      }
    }, "\u65E5\u672C\u8A9E"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "ja",
      dateFormat: {
        showYear: true
      },
      weekdayFormat: {
        full: true
      }
    })));
  }
};

/**
 * 时间格式对比
 */
export var TimeFormats = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "24\u5C0F\u65F6\u5236\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showDate: false,
        showWeekday: false
      },
      timeFormat: {
        use12Hour: false
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "12\u5C0F\u65F6\u5236\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showDate: false,
        showWeekday: false
      },
      timeFormat: {
        use12Hour: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u663E\u793A\u79D2\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showDate: false,
        showWeekday: false
      },
      timeFormat: {
        showSeconds: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "12\u5C0F\u65F6+\u79D2+\u8865\u96F6\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showDate: false,
        showWeekday: false
      },
      timeFormat: {
        use12Hour: true,
        showSeconds: true,
        padHour: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u53EA\u663E\u793A\u5C0F\u65F6\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showDate: false,
        showWeekday: false
      },
      timeFormat: {
        onlyShowHour: true
      }
    })));
  }
};

/**
 * 日期格式对比
 */
export var DateFormats = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u9ED8\u8BA4\uFF08\u4E0D\u663E\u793A\u5E74\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showTime: false,
        showWeekday: false
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "Y-M-D\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      fields: {
        showTime: false,
        showWeekday: false
      },
      dateFormat: {
        order: 'YMD',
        showYear: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "M-D-Y\uFF08\u82F1\u6587\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showWeekday: false
      },
      dateFormat: {
        order: 'MDY',
        showYear: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "D-M-Y\uFF08\u82F1\u6587\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showWeekday: false
      },
      dateFormat: {
        order: 'DMY',
        showYear: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u4E2D\u6587\u5E26\u5355\u4F4D\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "zh-cn",
      fields: {
        showTime: false,
        showWeekday: false
      },
      dateFormat: {
        showYear: true,
        showChineseUnit: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u82F1\u6587\u5B8C\u6574\u6708\u4EFD\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showWeekday: false
      },
      dateFormat: {
        order: 'MDY',
        showYear: true,
        shortMonth: false
      }
    })));
  }
};

/**
 * 星期格式对比
 */
export var WeekdayFormats = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u82F1\u6587\u9ED8\u8BA4\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showDate: false
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u82F1\u6587\u5B8C\u6574\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showDate: false
      },
      weekdayFormat: {
        full: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u82F1\u6587\u5355\u5B57\u6BCD\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "en",
      fields: {
        showTime: false,
        showDate: false
      },
      weekdayFormat: {
        singleLetter: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u4E2D\u6587\u9ED8\u8BA4\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "zh-cn",
      fields: {
        showTime: false,
        showDate: false
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u4E2D\u6587\u5B8C\u6574\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "zh-cn",
      fields: {
        showTime: false,
        showDate: false
      },
      weekdayFormat: {
        full: true
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8,
        width: 150,
        display: 'inline-block',
        color: '#666'
      }
    }, "\u4E2D\u6587\u5355\u5B57\uFF1A"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      locale: "zh-cn",
      fields: {
        showTime: false,
        showDate: false
      },
      weekdayFormat: {
        singleLetter: true
      }
    })));
  }
};

/**
 * 所有布局对比
 */
export var AllLayouts = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 24
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 12,
        fontWeight: 600
      }
    }, "\u6C34\u5E73\u5E03\u5C40\uFF08\u9ED8\u8BA4\uFF09"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "horizontal",
      locale: "zh-cn",
      dateFormat: {
        showChineseUnit: true
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 12,
        fontWeight: 600
      }
    }, "\u5782\u76F4\u5E03\u5C40"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "vertical",
      locale: "zh-cn",
      dateFormat: {
        showYear: true,
        showChineseUnit: true
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #d9d9d9',
        padding: 16,
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 12,
        fontWeight: 600
      }
    }, "\u5355\u884C\u5E03\u5C40"), /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "inline",
      locale: "zh-cn",
      dateFormat: {
        showYear: true,
        showChineseUnit: true
      }
    })));
  }
};

/**
 * 深色主题
 */
export var DarkTheme = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        padding: 32,
        background: '#1f1f1f',
        borderRadius: 8,
        minHeight: 200,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
      layout: "vertical",
      textAlign: "center",
      timeFormat: {
        use12Hour: true,
        showSeconds: true
      },
      dateFormat: {
        showYear: true
      },
      containerStyle: {
        background: 'rgba(255, 255, 255, 0.1)',
        borderRadius: 12,
        padding: 24
      },
      timeStyle: {
        fontSize: 36,
        fontWeight: 700,
        color: '#fff'
      },
      dateStyle: {
        fontSize: 18,
        fontWeight: 400,
        color: 'rgba(255, 255, 255, 0.8)'
      },
      weekdayStyle: {
        fontSize: 16,
        fontWeight: 400,
        color: 'rgba(255, 255, 255, 0.6)'
      }
    }));
  }
};