<template>
	<view class="page">
		<view class="tabs-wrap">
			<view :class="swiperCurrent == index ? 'active tab' : 'tab'" v-for="(item,index) in tabsDisplay"
				:key="item.key" @click="onTabClick(index)">
				{{item.name}}
			</view>
			<view class="settings-btn" @click="showNotificationSettings">
				☰
			</view>
		</view>
		<!-- 原来的筛选按钮和时间选择弹窗已移除，时间筛选功能已集成到tab中 -->
		<swiper class="swiper" :current="swiperCurrent" @change="onSwiperChange" :duration="200" :circular="false">
			<swiper-item v-for="(tab) in tabsDisplay" :key="tab.key">
				<scroll-view class="list" scroll-y @scrolltolower="handqixing" refresher-enabled
					@refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
					<view class="cell" v-for="(n,idx) in listByKey(tab.key)" :key="tab.key + idx">
						<view class="content">
							<view class="row1">
								<image class="small-icon" v-if="n.type == 'delete'"
									src="https://api.ccttiot.com/smartmeter/img/static/uzIKbrzVRDbX1TdbALJx"
									mode="aspectFill"></image>
								<image class="small-icon" v-if="n.type == 'unbind'"
									src="https://api.ccttiot.com/smartmeter/img/static/uJ4PSY8O4kde1AdCdf91"
									mode="aspectFill"></image>
								<image class="small-icon" v-if="n.type == 'bind'"
									src="https://api.ccttiot.com/smartmeter/img/static/un9RVkNVxeENkCrtYVug"
									mode="aspectFill"></image>
								<image class="small-icon" v-if="n.type == 'add'"
									src="https://api.ccttiot.com/smartmeter/img/static/uzSrhuScUj743gsVwEqd"
									mode="aspectFill"></image>
								<image class="small-icon" v-if="n.type == 'edit'"
									src="https://api.ccttiot.com/smartmeter/img/static/u42kBohuBIohCoNWYazi"
									mode="aspectFill"></image>
								<text class="time" :style="{color: n.timeColor}">{{ n.time }}</text>
							</view>
							<view class="row2">{{ n.titleKey }}</view>
						</view>
						<image class="thumb thumb-placeholder" :src="n.picture" mode="aspectFill"></image>
					</view>
					<view class="no-more">{{ $i18n.t('noMore') }}</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<!-- 通知设置弹窗 -->
		<view class="settings-modal" v-if="showSettings" @click="hideNotificationSettings">
			<view class="settings-content" @click.stop>
				<view class="settings-header">
					<text class="settings-title">{{ $i18n.t('notificationSettingsTitle') }}</text>
					<text class="close-btn" @click="hideNotificationSettings">×</text>
				</view>
				
				<scroll-view class="settings-list" scroll-y>
					<view class="setting-item" v-for="(category, index) in notificationSettings" :key="index">
						<view class="setting-main" @click="toggleCategory(index)">
							<view class="setting-info">
								<text class="setting-title">{{ $i18n.t(category.titleKey) }}</text>
								<view class="setting-desc-row">
									<text class="setting-desc">{{ getEnabledSubItemsDesc(category) }}</text>
									<text class="arrow" v-if="category.hasSubSettings">〉</text>
								</view>
							</view>
							<view class="setting-controls">
								<switch 
									:checked="category.enabled" 
									@change="onMainSwitchChange(index, $event)"
									@click.stop
									color="#000000"
								/>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 子设置弹窗 -->
		<view class="sub-settings-modal" v-if="showSubSettings" @click="hideSubSettings">
			<view class="sub-settings-content" @click.stop>
				<view class="sub-settings-header">
					<text class="sub-settings-title">{{ getSubSettingsTitle() }}</text>
					<text class="close-btn" @click="hideSubSettings">×</text>
				</view>
				
				<scroll-view class="sub-settings-list" scroll-y>
					<view class="sub-setting-item" v-for="(subItem, index) in currentCategory.subSettings" :key="index">
						<view class="sub-setting-main">
							<view class="sub-setting-info">
								<text class="sub-setting-title">{{ $i18n.t(subItem.titleKey) }}</text>
							</view>
							<switch 
								:checked="subItem.enabled" 
								@change="onSubSwitchChange(index, $event)"
								color="#000000"
							/>
						</view>
					</view>
				</scroll-view>
				
				<view class="save-btn" @click="saveSubSettings">
					<text class="save-btn-text">{{ $i18n.t('saveSettings') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NotificationTab',
		data() {
			return {
				timeindex:0,
				createTimeRange:'',
				swiperCurrent: 0,
				timelist: [
					{ key: 'allTime', name: 'allTime' },
					{ key: 'oneHour', name: 'oneHour' },
					{ key: 'twentyFourHours', name: 'twentyFourHours' },
					{ key: 'oneMonth', name: 'oneMonth' }
				],
				icons: {
					security: 'https://api.ccttiot.com/FleUeHa_R3Rr2RsjlZ30f1xqvjR7',
					picture: 'https://api.ccttiot.com/smartmeter/img/static/usZCKDHBGZ2XQ5FUy0Al',
					malfunctions: 'https://api.ccttiot.com/smartmeter/img/static/usZCKDHBGZ2XQ5FUy0Al',
					control: 'https://api.ccttiot.com/smartmeter/img/static/ui8Gz7gVZYFjS8XSDS45',
					system: 'https://api.ccttiot.com/smartmeter/img/static/uiRElxpcH7NbtJWIRtf1',
					env: 'https://api.ccttiot.com/smartmeter/img/static/uiRElxpcH7NbtJWIRtf1'
				},
				notifications: [],
				isRefreshing: false,
				pageNum: 1,
				pageSize: 10,
				kjid: '',
				total: 0,
				hasMore: true,
				requestInProgress: false,
				// 通知设置相关
				showSettings: false,
				showSubSettings: false,
				currentCategoryIndex: -1,
				notificationSettings: [
					{
						titleKey: 'alertTitle',
						descKey: 'alertDesc',
						enabled: true,
						hasSubSettings: true,
						subSettings: [
							{ titleKey: 'intrusion', enabled: true },
							{ titleKey: 'fire', enabled: false },
							{ titleKey: 'waterLeak', enabled: false },
							{ titleKey: 'serverDisconnected', enabled: false }
						]
					},
					{
						titleKey: 'videoWarningTitle',
						descKey: 'videoWarningDesc',
						enabled: false,
						hasSubSettings: false,
						subSettings: []
					},
					{
						titleKey: 'faultTitle',
						descKey: 'faultDesc',
						enabled: true,
						hasSubSettings: true,
						subSettings: [
							{ titleKey: 'connectionLost', enabled: true },
							{ titleKey: 'lowBattery', enabled: true },
							{ titleKey: 'coverOpen', enabled: false }
						]
					},
					{
						titleKey: 'securityStatusChangeTitle',
						descKey: 'securityStatusChangeDesc',
						enabled: true,
						hasSubSettings: true,
						subSettings: [
							{ titleKey: 'arm', enabled: true },
							{ titleKey: 'disarm', enabled: true },
							{ titleKey: 'nightMode', enabled: false }
						]
					},
					{
						titleKey: 'systemNotificationTitle',
						descKey: 'systemNotificationDesc',
						enabled: true,
						hasSubSettings: true,
						subSettings: [
							{ titleKey: 'hubUpdate', enabled: true },
							{ titleKey: 'maintenance', enabled: true }
						]
					},
					{
						titleKey: 'environmentalNotificationTitle',
						descKey: 'environmentalNotificationDesc',
						enabled: false,
						hasSubSettings: true,
						subSettings: [
							{ titleKey: 'temperature', enabled: false },
							{ titleKey: 'humidity', enabled: false },
							{ titleKey: 'carbonDioxide', enabled: false }
						]
					}
				]
			};
		},
		computed: {
			// 计算当前语言，用于触发更新
			currentLanguage() {
				return this.$i18n.getCurrentLanguage();
			},

			// 生成展示用的标签文案（使用时间列表）
			tabsDisplay() {
				return this.timelist.map((timeItem, index) => ({
					key: `time_${index}`,
					name: this.$i18n.t(timeItem.name)
				}));
			},
			filteredList() {
				// 现在所有tab都显示相同的数据，因为时间筛选在API层面处理
				return this.notifications;
			},
			// 当前选中的分类
			currentCategory() {
				return this.currentCategoryIndex >= 0 ? this.notificationSettings[this.currentCategoryIndex] : null;
			}
		},
		watch: {
			// 监听语言变化
			currentLanguage() {
				console.log('通知页面语言变化:', this.currentLanguage);
				// 语言切换时重新加载设置
				this.loadNotificationSettings();
			}
		},
		mounted() {
			// 监听语言变化事件
			uni.$on('languageChanged', this.handleLanguageChange);
			// 初始化空间ID并首次拉取列表
			this.kjid = uni.getStorageSync('kjid')
			// 初始化时设置默认时间筛选（全部）
			this.timeindex = 0
			this.btntimeindex(0)
			this.getlist()
			// 监听空间切换事件
			uni.$on('spaceChanged', this.handleSpaceChanged)
			// 加载通知设置
			this.loadNotificationSettings()
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('languageChanged', this.handleLanguageChange);
			uni.$off('spaceChanged', this.handleSpaceChanged)
		},
		methods: {
			// 点击选择时间
			btntimeindex(index){
				this.timeindex = index
				// 计算并打印时间范围
				const now = new Date()
				if(index === 0){
					// 全部 -> 清空
					this.createTimeRange = ''
					console.log('时间筛选：全部（清空）')
					return
				}
				let start = new Date(now)
				switch(index){
					case 1: // 1小时
						start = new Date(now.getTime() - 1 * 60 * 60 * 1000)
						break
					case 2: // 24小时
						start = new Date(now.getTime() - 24 * 60 * 60 * 1000)
						break
					case 3: // 1个月
						start.setMonth(start.getMonth() - 1)
						break
					default:
						break
				}
				const startStr = this.formatDate(start)
				const endStr = this.formatDate(now)
				this.createTimeRange = startStr + ',' + endStr
				console.log('时间范围:', { startTime: startStr, endTime: endStr })
			},
			// 格式化时间为 YYYY-MM-DD HH:mm:ss
			formatDate(date){
				const pad = (n) => n < 10 ? ('0' + n) : n
				const y = date.getFullYear()
				const m = pad(date.getMonth() + 1)
				const d = pad(date.getDate())
				const hh = pad(date.getHours())
				const mm = pad(date.getMinutes())
				const ss = pad(date.getSeconds())
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			},
			// 请求通知列表
			getlist() {
				if (this.requestInProgress) return
				this.requestInProgress = true

				// 添加调试日志
				console.log('请求通知列表:', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					spaceId: this.kjid,
					createTimeRange: this.createTimeRange
				})
				this.$http.get(`/bst/notice/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&spaceId=${this.kjid}&classify=&orderByColumn=createTime&isAsc=desc&createTimeRange=${this.createTimeRange}`).then((res) => {
					if (res.code == 200) {
						this.total = Number(res.total || 0)
						const rows = Array.isArray(res.rows) ? res.rows : []
						console.log('原始数据行:', rows)
						const mapped = rows.map(r => ({
							type: r.classify || r.type || 'system', // 优先使用classify字段，兼容type字段
							time: r.createTime,
							timeColor: this.getTimeColor(r.classify || r.type),
							titleKey: r.content || '',
							picture: r.picture || ''
						}))
						console.log('映射后的数据:', mapped)
						if (this.pageNum == 1) {
							this.notifications = mapped
						} else {
							this.notifications = this.notifications.concat(mapped)
						}
						this.hasMore = this.notifications.length < this.total
						console.log('当前通知数据:', this.notifications)
					} else {
						console.error('API请求失败:', res)
					}
				}).catch(error => {
					console.error('请求通知列表失败:', error)
				}).finally(() => {
					this.requestInProgress = false
					if (this.isRefreshing) {
						this.isRefreshing = false
					}
				})
			},
			// 上拉加载更多
			handqixing() {
				if (!this.hasMore) return
				this.pageNum += 1
				this.getlist()
			},
			// 下拉刷新
			onRefresh() {
				if (this.isRefreshing || this.requestInProgress) return
				this.isRefreshing = true
				this.pageNum = 1
				this.getlist()
			},
			onTabChange(index) {
				this.current = index
			},
			// 滑动切换时间标签
			onSwiperChange(e) {
				console.log(':', e.detail.current)
				this.swiperCurrent = e.detail.current
				// 设置时间筛选
				this.timeindex = e.detail.current
				this.btntimeindex(e.detail.current)
				// 分栏切换后重新拉取
				this.pageNum = 1
				// 清空当前数据，避免显示错误的数据
				this.notifications = []
				this.getlist()
			},
            // 监听语言变化事件
			handleLanguageChange(lang) {
				console.log('通知页面语言切换事件:', lang)
			},
			handleSpaceChanged(payload) {
				try {
					this.kjid = (payload && payload.kjid) || uni.getStorageSync('kjid')
					this.pageNum = 1
					this.getlist()
				} catch (e) {
					console.warn('处理空间切换失败:', e)
				}
			},
			// 点击切换时间标签
			onTabClick(index) {
				console.log(':', index, '标签信息:', this.tabsDisplay[index])
				this.swiperCurrent = index
				// 设置时间筛选
				this.timeindex = index
				this.btntimeindex(index)
				// 点击切换分栏时主动刷新当前分类数据
				this.pageNum = 1
				// 清空当前数据，避免显示错误的数据
				this.notifications = []
				this.getlist()
			},
			getTimeColor(classify) {
				switch (classify) {
					case 'security':
						return '#ff4040'
					case 'picture':
						return '#007AFF'
					case 'malfunctions':
						return '#FF3B30'
					case 'control':
						return '#FF8A00'
					case 'system':
						return '#8B8E94'
					case 'env':
						return '#34C759'
					default:
						return '#8B8E94'
				}
			},
			listByKey(key) {
				console.log('listByKey调用:', key, '当前数据:', this.notifications)
				// 现在所有tab都显示相同的数据，因为时间筛选在API层面处理
				console.log('返回所有数据:', this.notifications)
				return this.notifications
			},
			
			// 通知设置相关方法
			showNotificationSettings() {
				this.showSettings = true
			},
			
			hideNotificationSettings() {
				this.showSettings = false
			},
			
			hideSubSettings() {
				this.showSubSettings = false
				this.currentCategoryIndex = -1
			},
			
			// 切换主分类开关
			onMainSwitchChange(index, event) {
				const enabled = event.detail.value
				this.notificationSettings[index].enabled = enabled
				// 如果关闭主开关，则关闭所有子开关
				if (!enabled) {
					this.notificationSettings[index].subSettings.forEach(subItem => {
						subItem.enabled = false
					})
				}
				// 如果开启主开关，则开启所有子开关
				else {
					this.notificationSettings[index].subSettings.forEach(subItem => {
						subItem.enabled = true
					})
				}
				// 保存设置
				this.saveNotificationSettings()
			},
			
			// 切换子分类开关
			onSubSwitchChange(index, event) {
				const enabled = event.detail.value;
				this.notificationSettings[this.currentCategoryIndex].subSettings[index].enabled = enabled
				// 检查是否所有子开关都关闭了，如果是则关闭主开关
				const allSubDisabled = this.notificationSettings[this.currentCategoryIndex].subSettings.every(subItem => !subItem.enabled)
				if (allSubDisabled) {
					this.notificationSettings[this.currentCategoryIndex].enabled = false
				}
				// 如果至少有一个子开关开启，则开启主开关
				else {
					this.notificationSettings[this.currentCategoryIndex].enabled = true
				}
			},
			
			// 点击分类项
			toggleCategory(index) {
				if (this.notificationSettings[index].hasSubSettings) {
					this.currentCategoryIndex = index
					this.showSubSettings = true
				}
			},
			// 保存子设置
			saveSubSettings() {
				this.saveNotificationSettings();
				this.hideSubSettings();
				uni.showToast({
					title: this.$i18n.t('settingsSaved'),
					icon: 'success'
				});
			},
			// 保存通知设置到本地存储
			saveNotificationSettings() {
				try {
					uni.setStorageSync('notificationSettings', this.notificationSettings);
					console.log('通知设置已保存:', this.notificationSettings);
				} catch (error) {
					console.error('保存通知设置失败:', error);
				}
			},
			// 从本地存储加载通知设置
			loadNotificationSettings() {
				try {
					const savedSettings = uni.getStorageSync('notificationSettings');
					if (savedSettings && Array.isArray(savedSettings)) {
						// 检查是否是新的数据结构（包含titleKey）
						if (savedSettings[0] && savedSettings[0].titleKey) {
							this.notificationSettings = savedSettings;
						} else {
							// 旧数据结构，需要转换
							this.convertOldSettingsToNew(savedSettings);
						}
						console.log('通知设置已加载:', this.notificationSettings);
					}
				} catch (error) {
					console.error('加载通知设置失败:', error);
				}
			},
			// 转换旧数据结构到新结构
			convertOldSettingsToNew(oldSettings) {
				// 如果旧数据存在，尝试转换
				// 这里可以根据实际情况进行转换，或者直接使用默认设置
				console.log('检测到旧数据结构，使用默认设置');
				// 清除旧的本地存储数据
				uni.removeStorageSync('notificationSettings');
				// 保存新的默认设置
				this.saveNotificationSettings();
			},
			// 获取已开启的子项描述
			getEnabledSubItemsDesc(category) {
				if (!category.hasSubSettings || !category.subSettings || category.subSettings.length === 0) {
					return this.$i18n.t(category.descKey);
				}
				const enabledItems = category.subSettings.filter(item => item.enabled);
				if (enabledItems.length === 0) {
					return this.$i18n.t('noEnabledItems');
				}
				if (enabledItems.length === category.subSettings.length) {
					return this.$i18n.t(category.descKey);
				}
				return enabledItems.map(item => this.$i18n.t(item.titleKey)).join('、');
			},
			// 获取子设置标题
			getSubSettingsTitle() {
				if (!this.currentCategory) return '';
				return this.$i18n.t(this.currentCategory.titleKey) + this.$i18n.t('saveSettings').replace('保存', '').replace('Save', '').replace('設定', '').replace('Настройки', '');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-top: 20rpx;
	}

	.tabs-wrap {
		padding: 0 50rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0;
		// justify-content: flex-start;
		box-shadow: 1rpx -8rpx 14rpx 4rpx #ccc;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;

		view {
			text-align: center;
			flex-shrink: 0;
		}
	}

	.tab {
		color: #8B8E94;
		font-size: 28rpx;
		padding: 24rpx 12rpx;
		position: relative;
		margin: 0 5rpx;
		max-width: 920rpx;
		white-space: nowrap;
	}

	.tab.active {
		color: #222;
		font-weight: 600;
	}

	.tab.active:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 8rpx;
		height: 6rpx;
		background: #0F0F0F;
		border-radius: 6rpx;
	}

	.swiper {
		height: 74vh;
	}

	.list {
		box-sizing: border-box;
		height: 74vh;
		overflow: scroll;
		padding-bottom: 30rpx;
	}

	.cell {
		width: 700rpx;
		margin: 16rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 0;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.cell-badge {
		position: absolute;
		right: 140rpx;
		top: 20rpx;
		background: #F5F6F7;
		border-radius: 30rpx;
		padding: 6rpx 12rpx 6rpx 36rpx;
		display: flex;
		align-items: center;
		color: #5F6368;
		font-size: 22rpx;
	}

	.badge-icon {
		position: absolute;
		left: 8rpx;
		width: 24rpx;
		height: 24rpx;
	}

	.thumb {
		width: 112rpx;
		height: 112rpx;
		border-radius: 12rpx;
		margin-left: auto;
		background: #E6E6E6;
	}
	.content {
		flex: 1;
		min-width: 0;
		padding-right: 24rpx;
	}
	.row1 {
		display: flex;
		align-items: center;
	}
	.small-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	.time {
		color: #8B8E94;
		font-size: 24rpx;
	}
	.row2 {
		margin-top: 14rpx;
		color: #222;
		font-size: 28rpx;
	}
	.no-more {
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		color: #ccc;
	}
	// 设置按钮样式
	.settings-btn {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		padding: 24rpx 12rpx;
		cursor: pointer;
	}
	// 通知设置弹窗样式
	.settings-modal {
		position: fixed;
        top: 140px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
	}
	.settings-content {
		background: #fff;
		border-radius:0 0 20rpx 20rpx;
		width: 90%;
		width: 750rpx;
		max-height: 80vh;
		overflow: hidden;
	}
	.settings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.settings-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.close-btn {
		font-size: 40rpx;
		color: #999;
		line-height: 1;
	}
	.settings-list {
		max-height: 60vh;
	}
	.setting-item {
		border-bottom: 1rpx solid #f0f0f0;
	}
	.setting-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}
	
	.setting-info {
		flex: 1;
		margin-right: 20rpx;
	}
	
	.setting-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.setting-desc-row {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}
	
	.setting-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
		// flex: 1;
	}
	
	.setting-controls {
		display: flex;
		align-items: center;
	}
	
	.arrow {
		font-size: 20rpx;
		color: #999;
		margin-left: 10rpx;
	}
	
	// 子设置弹窗样式
	.sub-settings-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1001;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sub-settings-content {
		background: #fff;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
	}
	
	.sub-settings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.sub-settings-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.sub-settings-list {
		max-height: 50vh;
	}
	
	.sub-setting-item {
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.sub-setting-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}
	
	.sub-setting-info {
		flex: 1;
	}
	
	.sub-setting-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.save-btn {
		background: #333;
		margin: 30rpx;
		border-radius: 12rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.save-btn-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>