
<template>
	<view class="hl88-lr-control">
		<!-- 底部菜单 -->
		<view class="hl88-lr-control-main" :class="{ 'hl88-lr-control-main--live': state == 1 && showCommerceToolbar }">
			<view class="hl88-lr-control-left">
				<view v-if="showCommerceToolbar && state == 1" class="hl88-lr-btn-icon" @tap="handlePopup('goods','open')">
					<image class="hl88-lr-btn-icon-img" src="/static/images/live/goods.png" mode="aspectFit" />
				</view>
				<view class="hl88-lr-btn-icon" @tap="handleLive('snapshot')">
					<image class="hl88-lr-btn-icon-img" src="/static/imgs/save_screenshot.png" mode="aspectFit" />
				</view>
				<view class="hl88-lr-btn-icon" @tap="handleLive('switch')">
					<image class="hl88-lr-btn-icon-img" src="/static/imgs/camera_flip.png" mode="aspectFit" />
				</view>
			</view>
			<view class="hl88-lr-control-right">
				<view class="hl88-lr-control-right-start hl88-lr-control-right-start--primary" v-if="state == 0" @tap="handlePopup('start','open')">
					<text class="hl88-lr-control-right-start-text">{{ startCopy.startBtn }}</text>
				</view>
				<view class="hl88-lr-control-right-list" v-if="showCommerceToolbar && state == 1">
					<view class="hl88-lr-control-right-list-btn" @tap="handlePopup('livegoods','open')">
						<view class="hl88-lr-btn-icon hl88-lr-btn-ghost">
							<image class="hl88-lr-btn-icon-img hl88-lr-btn-icon-img--shop" src="/static/images/live/shop.png" mode="aspectFit" />
							<view class="hl88-lr-btn-badge" v-if="goodsSelected.length > 0">
								<text class="hl88-lr-btn-badge-text">{{numFormat(goodsSelected.length)}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 准备直播 :maskClick='false' --> 
		<view class="hl88-lr-ctlPopHost">
			<uni-popup ref="start" type="bottom">
				<view class="hl88-lr-popup hl88-lr-popup--start" :style="startPopupWrapStyle">
					<view class="hl88-lr-start-hero">
						<view class="hl88-lr-start-hero-main">
							<text class="hl88-lr-start-hero-badge">{{ startCopy.badge }}</text>
							<text class="hl88-lr-start-hero-title">{{ startCopy.title }}</text>
						</view>
						<view class="hl88-lr-start-hero-close" @tap="handlePopup('start','close')">
							<image class="hl88-lr-start-hero-close-img" src="/static/imgs/close.png" mode="aspectFit" />
						</view>
					</view>
					<scroll-view 
						:show-scrollbar="false" 
						scroll-y="true" 
						class="hl88-lr-start-scroll" 
						:style="startScrollStyle"
						:scroll-into-view="scrollIntoView"
						:scroll-with-animation="true"
					>
						<view class="hl88-lr-start-body" :style="startBodyStyle">
							<view class="hl88-lr-start-card">
								<view class="hl88-lr-start-card-hd">
									<text class="hl88-lr-start-card-icon">🖼</text>
									<view class="hl88-lr-start-card-meta">
										<text class="hl88-lr-start-card-title">{{ startCopy.cover }}</text>
										<text class="hl88-lr-start-card-hint">{{ startCopy.coverHint }}</text>
									</view>
								</view>
								<view class="hl88-lr-start-cover-wrap" :style="startCoverStyle" @tap="uploadCover()">
									<image class="hl88-lr-start-cover-img" :style="startCoverStyle" :src="stcOss(start.image)" mode="aspectFill" />
								</view>
							</view>
							<view v-if="showPaymentSettings" class="hl88-lr-start-card">
								<view class="hl88-lr-start-card-hd">
									<text class="hl88-lr-start-card-icon">💎</text>
									<view class="hl88-lr-start-card-meta">
										<text class="hl88-lr-start-card-title">{{ startCopy.payment }}</text>
									</view>
								</view>
								<view class="hl88-lr-start-segment">
									<view
										class="hl88-lr-start-segment-item"
										:class="start.is_paid == 0 ? 'hl88-lr-start-segment-item--active' : ''"
										@tap="handlePaymentChange(0)"
									>
										<text
											class="hl88-lr-start-segment-text"
											:class="start.is_paid == 0 ? 'hl88-lr-start-segment-text--active' : ''"
										>{{ startCopy.free }}</text>
									</view>
									<view
										class="hl88-lr-start-segment-item"
										:class="start.is_paid == 1 ? 'hl88-lr-start-segment-item--active' : ''"
										@tap="handlePaymentChange(1)"
									>
										<text
											class="hl88-lr-start-segment-text"
											:class="start.is_paid == 1 ? 'hl88-lr-start-segment-text--active' : ''"
										>{{ startCopy.paid }}</text>
									</view>
								</view>
								<view
									class="hl88-lr-start-field"
									v-if="start.is_paid == 1"
									id="paidAmountInput"
								>
									<text class="hl88-lr-start-field-label">{{ startCopy.paidAmount }}</text>
									<input 
										class="hl88-lr-start-field-input"
										type="number"
										:style="startFieldStyle"
										v-model.number="start.paid_money"
										:placeholder="startCopy.paidAmountPh"
										placeholder-class="hl88-lr-start-field-ph"
										:adjust-position="startPopupInputAdjustPosition"
										:cursor-spacing="8"
										@focus="onPaidAmountFocus"
										@blur="onPaymentInputBlur"
									/>
								</view>
								<view
									class="hl88-lr-start-field"
									v-if="start.is_paid == 1"
									id="freeWatchTimeInput"
								>
									<text class="hl88-lr-start-field-label">{{ startCopy.freePreview }}</text>
									<input 
										class="hl88-lr-start-field-input"
										type="number"
										:style="startFieldStyle"
										v-model.number="start.free_look_time"
										:placeholder="startCopy.freePreviewPh"
										placeholder-class="hl88-lr-start-field-ph"
										:adjust-position="startPopupInputAdjustPosition"
										:cursor-spacing="8"
										@focus="onFreeWatchTimeFocus"
										@blur="onPaymentInputBlur"
									/>
								</view>
							</view>
							<view class="hl88-lr-start-card" id="startThemeIntro">
								<view class="hl88-lr-start-card-hd">
									<text class="hl88-lr-start-card-icon">✎</text>
									<view class="hl88-lr-start-card-meta">
										<text class="hl88-lr-start-card-title">{{ startCopy.theme }}</text>
									</view>
									<text class="hl88-lr-start-theme-count">{{ themeIntroLength }}/50</text>
								</view>
								<textarea 
									class="hl88-lr-start-theme-input"
									:style="startFieldStyle"
									:placeholder="startCopy.themePh"
									placeholder-class="hl88-lr-start-field-ph"
									:adjust-position="startPopupInputAdjustPosition"
									:cursor-spacing="12"
									confirm-type="done"
									maxlength="50"
									v-model="start.content"
									@focus="onThemeIntroFocus"
									@blur="onThemeIntroBlur"
									@input="onThemeIntroInput"
								/>
							</view>
							<view :style="{ width: '100%', height: startKeyboardSpacerHeight + 'px' }"></view>
						</view>
					</scroll-view>
					<view class="hl88-lr-start-foot" :style="startFootStyle">
						<view class="hl88-lr-start-submit" @tap="goLive()">
							<text class="hl88-lr-start-submit-text">{{ startCopy.startBtn }}</text>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 商品列表 -->
		<view class="hl88-lr-ctlPopHost">
			<uni-popup ref="goods" type="bottom">
				<view class="hl88-lr-popup">
					<view class="hl88-lr-popup-title">
						<text class="hl88-lr-popup-title-text">Products</text>
						<text class="hl88-lr-popup-title-close-text" @tap="handlePopup('goods','close')">&#xe66b;</text>
					</view>
					<!-- 搜索条件-->
					<view class="hl88-lr-search">
						<picker mode="selector" class="hl88-lr-search-picker" :range='shopSelected.categoryList' range-key="name" selector-type="select" @change="searchPicker">
							<text class="hl88-lr-search-picker-text">{{search.category_name !== null ? search.category_name : 'All'}}</text>
							<text class="hl88-lr-search-picker-icon">&#xe65c;</text>
						</picker>
						<input 
							class="hl88-lr-search-input" 
							type="text"
							:adjust-position="false"
							confirm-type="search"
							v-model="search.q"
						>
						<view class="hl88-lr-search-input-icon" @tap="searchGoods()">
							<text class="hl88-lr-search-input-icon-text">&#xe684;</text>
						</view>
					</view>
					<view class="hl88-lr-search-title">
						<!-- <text class="hl88-lr-search-title-icon-text">&#xe68b;</text> -->
						<text class="hl88-lr-search-title-text">- Selected {{goodsSelected.length}} piece -</text>
					</view>
					<scroll-view :show-scrollbar="false" scroll-y="true" class="hl88-lr-popup-list" :style="{height: screenHeight * 0.57 +'px'}">
						<view class="hl88-lr-goods-list-item" :class="[item.choose ? 'hl88-lr-goods-list-item-active':'']" v-for="(item, index) in goodsData" :key="item.id" @tap="handleGoods(index)">
							<view class="hl88-lr-goods-list-item-img">
								<image :src="stcOss(item.image)" class="hl88-lr-goods-list-item-image"></image>
							</view>
							<view class="hl88-lr-goods-list-item-subject">
								<view class="hl88-lr-goods-list-item-subject-title">
									<text class="hl88-lr-goods-list-item-subject-title-text">{{formatEllipsis(item.title, 28)}}</text>
								</view>
								<view class="hl88-lr-goods-list-item-subject-operation">
									<view class="hl88-lr-goods-list-item-subject-operation-price">
										<text class="hl88-lr-goods-list-item-subject-operation-price-text">HKD{{item.price}}</text>
									</view>
									<view class="hl88-lr-operation-button">
										<text v-if="item.choose" class="hl88-lr-operation-button-text">&#xe67c;</text>
										<text v-else class="hl88-lr-operation-button-text">&#xe692;</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="goodsData.length == 0" class="hl88-lr-goods-list-empty">
							<text class="hl88-lr-goods-list-empty-icon">&#xe610;</text>
							<text class="hl88-lr-goods-list-empty-text">No products found yet</text>
						</view>
					</scroll-view>
					<view class="hl88-lr-popup-start hl88-lr-control-right-start" :style="{bottom: statusFootHeight + 9 + 'px'}" @tap="handlePopup('goods','close')">
						<text class="hl88-lr-control-right-start-text">OK</text>
					</view>
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 直播购物袋 -->
		<view class="hl88-lr-ctlPopHost">
			<uni-popup ref="livegoods" type="bottom">
				<view class="hl88-lr-popup">
					<view class="hl88-lr-popup-title">
						<text class="hl88-lr-popup-title-text">Live Shopping Bag</text>
						<text class="hl88-lr-popup-title-close-text" @tap="handlePopup('livegoods','close')">&#xe66b;</text>
					</view>
					<scroll-view :show-scrollbar="false" scroll-y="true" class="hl88-lr-popup-list" :style="{height: screenHeight * 0.6 +'px'}">
						<view class="hl88-lr-goods-list-item" v-for="(item, index) in goodsSelected" :key="item.id">
							<view class="hl88-lr-goods-list-item-img">
								<image :src="stcOss(item.image)" class="hl88-lr-goods-list-item-image"></image>
							</view>
							<view class="hl88-lr-rank-tag" :class="['tagbg_' + (index + 1)]">
								<text class="hl88-lr-rank-tag-text">{{index + 1}}</text>
							</view>
							<view class="hl88-lr-goods-list-item-subject">
								<view class="hl88-lr-goods-list-item-subject-title">
									<text class="hl88-lr-goods-list-item-subject-title-text">{{formatEllipsis(item.title, 28)}}</text>
								</view>
								<view class="hl88-lr-goods-list-item-subject-operation">
									<view class="hl88-lr-goods-list-item-subject-operation-price">
										<text class="hl88-lr-goods-list-item-subject-operation-price-text">HKD{{item.price}}</text>
									</view>
									<view class="hl88-lr-operation-button" @tap="handleGoodsSelected(item.id)">
										<text class="hl88-lr-operation-button-text">&#xe724;</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="hl88-lr-popup-start hl88-lr-control-right-start" :style="{bottom: statusFootHeight + 9 + 'px'}" @tap="handlePopup('livegoods','close')">
						<text class="hl88-lr-control-right-start-text">OK</text>
					</view>
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 店铺列表 -->
		<view class="hl88-lr-ctlPopHost">
			<uni-popup ref="shop" type="bottom">
				<view class="hl88-lr-popup">
					<view class="hl88-lr-popup-title">
						<text class="hl88-lr-popup-title-text">Shop List</text>
						<text class="hl88-lr-popup-title-close-text" @tap="handlePopup('shop','close')">&#xe66b;</text>
					</view>
					<scroll-view :show-scrollbar="false" scroll-y="true" class="hl88-lr-popup-list" :style="{height: screenHeight * 0.6 +'px'}">
						<view class="hl88-lr-shop-list-item" :class="[item.choose ? 'hl88-lr-shop-list-item-active':'']" v-for="(item, index) in shopList" :key="item.id" @tap="handleShop(index)">
							<view class="hl88-lr-shop-list-item-img">
								<image :src="stcOss(item.avatar)" class="hl88-lr-shop-list-item-image"></image>
							</view>
							<view class="hl88-lr-shop-list-item-title">
								<text class="hl88-lr-shop-list-item-title-text">{{item.shopname}}</text>
							</view>
							<view class="hl88-lr-operation-button hl88-lr-shop-list-item-button">
								<text v-if="item.choose" class="hl88-lr-operation-button-text">&#xe67c;</text>
								<text v-else class="hl88-lr-operation-button-text">&#xe692;</text>
							</view>
						</view>
						<view v-if="shopList.length == 0" class="hl88-lr-goods-list-empty">
						<text class="hl88-lr-goods-list-empty-icon">&#xe610;</text>
						<text class="hl88-lr-goods-list-empty-text">No live streaming permission or shop not created yet</text>
					</view>
					</scroll-view>
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { fetchUploadConfig, uploadImageFile } from '@/features/dynamics/publish-gateway'
	import { fetchBroadcastPermission } from '@/features/live/broadcast-gateway'
	import {
		pullRealnameFlagFromApi,
		REALNAME_APPROVED
	} from '@/features/mine-panel/realname-bridge'

	export default {
		name: 'LiveRoomControl',
		props: {
			screenHeight: {
				default: 0
			},
			screenWidth: {
				default: 0
			},
			statusFootHeight: {
				default: 0
			},
			liveId: {
				default: 0
			},
			like: {
				type: Number,
				default: 0
			},
			state: {
				default: 0
			}
		},
		beforeCreate() {
			// #ifdef APP-NVUE
			var domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				fontFamily: 'iconfont',
				src: "url('/static/style/iconfont.ttf')"
			});
			// #endif
		},
		data() {
			return {
				/** 商品/购物袋入口，暂时隐藏，后续开放时改为 true */
				showCommerceToolbar: false,
				/** 付费设置，暂时隐藏，后续开放时改为 true */
				showPaymentSettings: false,
				search: {
					q: null,
					shop_category_id: null,
					category_name: null
				},
				scrollIntoView: '',
				start: {
					content: 'Wow~ the live stream has new arrivals~',
					image: null,
					goods_ids: null,
					is_paid: 0, // 是否付费,0=>免费,1=>付费
					paid_money: 0, // 
					free_look_time: 60 // 免费看直播 时间(秒)，默认60秒
				},
				message: null,
				shopList: [],
				shopSelected: {
					id: null,
					categoryList: []
				},
				goodsData: [],
				goodsSelected: [],
				/** 开始直播弹窗：系统键盘高度（App/小程序由 onKeyboardHeightChange 更新） */
				startKeyboardHeight: 0,
				_startKeyboardHeightListener: null,
				/** 仅在为 true 时应用底部键盘留白，简介输入时不为 true */
				startPaymentInputFocused: false,
				startPaymentBlurTimer: null,
				startThemeIntroFocused: false,
				startThemeIntroBlurTimer: null,
				startCopy: {
					badge: 'LIVE',
					title: 'Prepare broadcast',
					cover: 'Cover',
					coverHint: 'Upload cover (16:9)',
					payment: 'Access',
					free: 'Free',
					paid: 'Paid',
					paidAmount: 'Paid amount',
					paidAmountPh: 'Enter amount',
					freePreview: 'Free preview (sec)',
					freePreviewPh: 'e.g. 60',
					theme: 'Title',
					themePh: 'Live title (max 50 chars)',
					startBtn: 'Start live'
				}
			};
		},
		computed: {
			startPanelWidthPx() {
				const w = Number(this.screenWidth)
				if (w > 0) return w
				try {
					return uni.getSystemInfoSync().screenWidth || uni.upx2px(750)
				} catch (_) {
					return uni.upx2px(750)
				}
			},
			startPopupWrapStyle() {
				return {
					width: this.startPanelWidthPx + 'px',
					paddingBottom: this.startFootPadding + 'px'
				}
			},
			startScrollStyle() {
				return {
					width: this.startPanelWidthPx + 'px',
					height: this.startScrollHeight + 'px'
				}
			},
			startBodyStyle() {
				return {
					width: this.startPanelWidthPx + 'px'
				}
			},
			startFieldStyle() {
				const inner = this.startPanelWidthPx - uni.upx2px(56 + 48)
				return {
					width: Math.max(200, inner) + 'px'
				}
			},
			startCoverStyle() {
				const inner = this.startPanelWidthPx - uni.upx2px(56 + 48)
				const width = Math.max(200, inner)
				const height = Math.round(width * 9 / 16)
				return {
					width: width + 'px',
					height: Math.max(120, height) + 'px'
				}
			},
			startFootStyle() {
				return {
					width: this.startPanelWidthPx + 'px',
					paddingBottom: (Number(this.statusFootHeight) || 0) + 16 + 'px'
				}
			},
			startFootPadding() {
				return uni.upx2px(120) + (Number(this.statusFootHeight) || 0)
			},
			startScrollHeight() {
				const h = Number(this.screenHeight) || 667
				const popupMax = h * 0.78
				const heroH = uni.upx2px(220)
				const footH = uni.upx2px(132) + (Number(this.statusFootHeight) || 0)
				return Math.max(240, popupMax - heroH - footH)
			},
			themeIntroLength() {
				const s = this.start && this.start.content != null ? String(this.start.content) : '';
				return s.length;
			},
			/** 付费或简介聚焦时增加 scroll-view 底部留白（与 onKeyboardHeightChange 配合） */
			startKeyboardSpacerHeight() {
				if (!this.startPaymentInputFocused && !this.startThemeIntroFocused) return 0;
				const h = this.startKeyboardHeight;
				if (!h || h <= 0) return 0;
				return Math.max(0, h * 0.88 - uni.upx2px(8));
			},
			/** H5 用系统顶起；App 弹层内用底部留白 + scroll-into-view，避免与系统顶起冲突 */
			startPopupInputAdjustPosition() {
				// #ifdef H5
				return true;
				// #endif
				return false;
			}
		},
		mounted() {
			this.startCopy = this.buildStartCopy();
			this._onBroadcastStartOk = () => {
				this.handlePopup('start', 'close');
			};
			uni.$on('liveBroadcastStartOk', this._onBroadcastStartOk);
			// #ifndef H5
			if (typeof uni.onKeyboardHeightChange === 'function') {
				this._startKeyboardHeightListener = (res) => {
					const h = res && res.height ? res.height : 0;
					this.startKeyboardHeight = h;
					if (h <= 0) {
						this.startPaymentInputFocused = false;
						this.startThemeIntroFocused = false;
						if (this.startPaymentBlurTimer) {
							clearTimeout(this.startPaymentBlurTimer);
							this.startPaymentBlurTimer = null;
						}
						if (this.startThemeIntroBlurTimer) {
							clearTimeout(this.startThemeIntroBlurTimer);
							this.startThemeIntroBlurTimer = null;
						}
					}
				};
				uni.onKeyboardHeightChange(this._startKeyboardHeightListener);
			}
			// #endif
		},
		beforeDestroy() {
			if (this._onBroadcastStartOk) {
				uni.$off('liveBroadcastStartOk', this._onBroadcastStartOk);
				this._onBroadcastStartOk = null;
			}
			if (this.startPaymentBlurTimer) {
				clearTimeout(this.startPaymentBlurTimer);
				this.startPaymentBlurTimer = null;
			}
			if (this.startThemeIntroBlurTimer) {
				clearTimeout(this.startThemeIntroBlurTimer);
				this.startThemeIntroBlurTimer = null;
			}
			this.startPaymentInputFocused = false;
			this.startThemeIntroFocused = false;
			// #ifndef H5
			if (this._startKeyboardHeightListener && typeof uni.offKeyboardHeightChange === 'function') {
				uni.offKeyboardHeightChange(this._startKeyboardHeightListener);
				this._startKeyboardHeightListener = null;
			}
			this.startKeyboardHeight = 0;
			// #endif
		},
		methods: {
			buildStartCopy() {
				const lang = uni.getLocale();
				if (lang === 'zh-cn') {
					return {
						badge: 'LIVE',
						title: '准备开播',
						cover: '直播封面',
						coverHint: '上传封面图（16:9）',
						payment: '观看方式',
						free: '免费',
						paid: '付费',
						paidAmount: '付费金额',
						paidAmountPh: '请输入金额',
						freePreview: '免费试看（秒）',
						freePreviewPh: '例如 60',
						theme: '直播标题',
						themePh: '填写直播主题（最多50字）',
						startBtn: '开始直播'
					};
				}
				if (lang === 'zh-Hant') {
					return {
						badge: 'LIVE',
						title: '準備開播',
						cover: '直播封面',
						coverHint: '上傳封面圖（16:9）',
						payment: '觀看方式',
						free: '免費',
						paid: '付費',
						paidAmount: '付費金額',
						paidAmountPh: '請輸入金額',
						freePreview: '免費試看（秒）',
						freePreviewPh: '例如 60',
						theme: '直播標題',
						themePh: '填寫直播主題（最多50字）',
						startBtn: '開始直播'
					};
				}
				return {
					badge: 'LIVE',
					title: 'Prepare broadcast',
					cover: 'Cover',
					coverHint: 'Upload cover (16:9)',
					payment: 'Access',
					free: 'Free',
					paid: 'Paid',
					paidAmount: 'Paid amount',
					paidAmountPh: 'Enter amount',
					freePreview: 'Free preview (sec)',
					freePreviewPh: 'e.g. 60',
					theme: 'Title',
					themePh: 'Live title (max 50 chars)',
					startBtn: 'Start live'
				};
			},
			clearStartPaymentBlurTimer() {
				if (this.startPaymentBlurTimer) {
					clearTimeout(this.startPaymentBlurTimer);
					this.startPaymentBlurTimer = null;
				}
			},
			clearStartThemeIntroBlurTimer() {
				if (this.startThemeIntroBlurTimer) {
					clearTimeout(this.startThemeIntroBlurTimer);
					this.startThemeIntroBlurTimer = null;
				}
			},
			onThemeIntroBlur() {
				this.clearStartThemeIntroBlurTimer();
				this.startThemeIntroBlurTimer = setTimeout(() => {
					this.startThemeIntroFocused = false;
					this.startThemeIntroBlurTimer = null;
				}, 160);
			},
			onPaymentInputBlur() {
				this.clearStartPaymentBlurTimer();
				this.startPaymentBlurTimer = setTimeout(() => {
					this.startPaymentInputFocused = false;
					this.startPaymentBlurTimer = null;
				}, 160);
			},
			// 处理付费状态切换
			handlePaymentChange(value) {
				this.start.is_paid = value;
				// 如果切换到付费，延迟滚动到输入框位置
				if (value == 1) {
					// 如果免费观看时长为0或未设置，设置默认值为60秒
					if (!this.start.free_look_time || this.start.free_look_time <= 0) {
						this.start.free_look_time = 60;
					}
					this.$nextTick(() => {
						setTimeout(() => {
							this.scrollToPaymentInputs();
						}, 200);
					});
				}
			},
			// 滚动到付费输入框位置
			scrollToPaymentInputs() {
				this.scrollStartPopupToField('paidAmountInput');
			},
			/** 将开始直播弹窗滚动到指定字段（scroll-view 子节点 id） */
			scrollStartPopupToField(fieldId) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollIntoView = fieldId;
						setTimeout(() => {
							this.scrollIntoView = '';
						}, 450);
					}, 120);
				});
			},
			onPaidAmountFocus(e) {
				this.clearStartPaymentBlurTimer();
				this.clearStartThemeIntroBlurTimer();
				this.startThemeIntroFocused = false;
				this.startPaymentInputFocused = true;
				const h = e && e.detail && typeof e.detail.height === 'number' ? e.detail.height : 0;
				if (h > 0) this.startKeyboardHeight = h;
				this.scrollStartPopupToField('paidAmountInput');
			},
			onFreeWatchTimeFocus(e) {
				this.clearStartPaymentBlurTimer();
				this.clearStartThemeIntroBlurTimer();
				this.startThemeIntroFocused = false;
				this.startPaymentInputFocused = true;
				const h = e && e.detail && typeof e.detail.height === 'number' ? e.detail.height : 0;
				if (h > 0) this.startKeyboardHeight = h;
				this.scrollStartPopupToField('freeWatchTimeInput');
			},
			/** 简介聚焦：与付费区共用底部留白（App），略延迟再 scroll-into-view 等布局稳定 */
			onThemeIntroFocus(e) {
				this.clearStartPaymentBlurTimer();
				this.clearStartThemeIntroBlurTimer();
				this.startPaymentInputFocused = false;
				this.startThemeIntroFocused = true;
				const h = e && e.detail && typeof e.detail.height === 'number' ? e.detail.height : 0;
				if (h > 0) this.startKeyboardHeight = h;
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollIntoView = 'startThemeIntro';
						setTimeout(() => {
							this.scrollIntoView = '';
						}, 520);
					}, 200);
				});
			},
			/** 简介最多 50 字（部分端 maxlength 与中文输入法偶发不同步，此处兜底截断） */
			onThemeIntroInput(e) {
				const maxLen = 50;
				const v = e.detail && e.detail.value != null ? e.detail.value : this.start.content;
				if (v && v.length > maxLen) {
					this.start.content = v.slice(0, maxLen);
				}
			},
			// 开始直播（接口失败或未完成实名认证时不关闭弹窗、不推流）
			async goLive() {
				const lang = uni.getLocale();
				if (!this.start.image) {
					const t = lang === 'zh-cn' ? '请上传直播封面' : (lang === 'zh-Hant' ? '請上傳直播封面' : 'cover cannot be empty');
					uni.showToast({ title: t, icon: 'none' });
					return;
				}
				if (!this.start.content || !String(this.start.content).trim()) {
					const t = lang === 'zh-cn' ? '请填写直播标题' : (lang === 'zh-Hant' ? '請填寫直播標題' : 'Title cannot be empty');
					uni.showToast({ title: t, icon: 'none' });
					return;
				}
				if (!this.showPaymentSettings) {
					this.start.is_paid = 0;
					this.start.paid_money = 0;
					this.start.free_look_time = 0;
				} else if (this.start.is_paid == 1) {
					if (!this.start.paid_money || this.start.paid_money <= 0) {
						const t = lang === 'zh-cn' ? '付费金额须大于 0' : (lang === 'zh-Hant' ? '付費金額須大於 0' : 'Paid amount must be greater than 0');
						uni.showToast({ title: t, icon: 'none' });
						return;
					}
					if (this.start.free_look_time == null || this.start.free_look_time < 0) {
						const t = lang === 'zh-cn' ? '试看时长不能为负' : (lang === 'zh-Hant' ? '試看時長不能為負' : 'Free watch time cannot be negative');
						uni.showToast({ title: t, icon: 'none' });
						return;
					}
				} else {
					this.start.paid_money = 0;
					this.start.free_look_time = 0;
				}
				this.start.goods_ids = this.goodsSelected.map((item) => item.id);

				const rn = await pullRealnameFlagFromApi();
				if (rn.ok && rn.is_real !== REALNAME_APPROVED) {
					let title = '提示';
					let content = '请先完成实名认证后再开播';
					let confirmText = '去认证';
					let cancelText = '取消';
					if (lang === 'zh-Hant') {
						content = '請先完成實名認證後再開播';
						confirmText = '去認證';
					} else if (lang !== 'zh-cn') {
						content = 'Please complete real-name verification before going live';
						confirmText = 'Verify';
						cancelText = 'Cancel';
					}
					uni.showModal({
						title,
						content,
						confirmText,
						cancelText,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({ url: '/pages/account/realname-add' });
							}
						}
					});
					return;
				}

				this.handleLive('start', this.start);
			},
			// 操作弹出框
			async handlePopup(name, method) {
				// 关闭商品列表同步云端
				if(name == 'goods' && method == 'close' && this.state == 1){
					// 隐藏强制商品选择
					// if(this.goodsSelected.length < 2){
					// 	uni.showToast({title: '商品至少选择2件', icon: 'error'});
					// }else{
						await uni.request({
							url: '/wanlshop/live/cloud',
							data: {
								id: this.liveId,
								goods_ids: this.goodsSelected.map(item => { return item.id })
							}
						});
						this.$refs.goods.close();
					// }
				// 请选择直播店铺
				}
				// else if(name == 'goods' && method == 'open' && this.state == 0){
				// 	if (!this.shopSelected.id) {
				// 		uni.showToast({title: '请选择直播店铺', icon: 'error'});
				// 		this.handlePopup('shop','open');
				// 	}else{
				// 		this.$refs.goods.open();
				// 	}
				// // 检查直播权限获取店铺列表、商家类目 ------------
				// }
				else if(name == 'start' && method == 'open'){
					this.startCopy = this.buildStartCopy();
					try {
						const list = await fetchBroadcastPermission();
						if (this.shopList.length === 0) {
							this.shopList = list;
						}
						this.$refs.start.open();
					} catch (_) {
						// 接口失败（含未实名等）已由拦截器提示，不打开开播弹窗
					}
				}else{
					this.$refs[name][method]();
				}
			},
			handleShop(index){
				var j, len;
				for(j = 0, len = this.shopList.length; j < len; j++) {
					this.shopList[j].choose = j == index ? true : false;
				}
				this.shopSelected = this.shopList[index];
				this.handleLive('user', this.shopSelected);
				this.handlePopup('shop','close');
			},
			// 监听搜索
			searchPicker(e){
				var category = this.shopSelected.categoryList[e.detail.value];
				this.search.shop_category_id = category.id;
				this.search.category_name = category.name;
			},
			// 获取商品列表,  查询条件 ------------
			async searchGoods(){
				await uni.request({
					url: '/wanlshop/live/goods',
					data: {
						shop_id: this.shopSelected.id,
						q: this.search.q,
						shop_category_id: this.search.shop_category_id
					},
					success: res => {
						// 通过goodsSelected过滤已选择
						var selectedIdArr = this.goodsSelected.map(item => { return item.id });
						res.data.map(item => {
							item.choose = selectedIdArr.findIndex(id => {if (item.id == id) {return true}}) !== -1 ? true : false;
						});
						this.goodsData = res.data;
					}
				});
			},
			handleGoods(index){
				if(!this.goodsData[index].choose){
					this.goodsData[index].choose = true;
					// 追加到goodsSelected选择器中
					this.goodsSelected = this.goodsSelected.concat(this.goodsData[index]);
				}else{
					this.handleGoodsSelected(this.goodsData[index].id);
				}
			},
			// 删除选择 并取消商品列表勾选
			handleGoodsSelected(id){
				var selecteIndex = this.goodsSelected.findIndex(item => {if (item.id == id) {return true}});
				var goodsIndex = this.goodsData.findIndex(item => {if (item.id == id) {return true}});
				if(selecteIndex !== -1){
					this.goodsSelected.splice(selecteIndex, 1);
				}
				if(selecteIndex !== -1){
					this.goodsData[goodsIndex].choose = false;
				}
			},
			// 操作直播
			handleLive(method, data){
				this.$emit('change', method, data);
			},
			// 传递给live 消息
			send(type, index){
				switch(type) {
					// 发送消息
					case 'msg': 
						if (this.message) {
							this.$emit('send',{
								type: 'msg',
								message: this.message
							});
							this.message = '';
						}
						// 收起键盘
						uni.hideKeyboard();
						break;
					// 点赞
					case 'like':
						this.$emit('send',{type: 'like'});
						break;
				} 
			},
			// 上传封面：App 走系统原生裁剪（不遮挡开播弹窗），其它端直接上传
			uploadCover() {
				const opts = {
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					count: 1,
					success: (res) => {
						const filePath = res.tempFilePaths && res.tempFilePaths[0]
						if (filePath) this.uploadCoverFile(filePath)
					}
				}
				// #ifdef APP-PLUS
				opts.crop = {
					width: 1280,
					height: 720,
					quality: 90
				}
				// #endif
				uni.chooseImage(opts)
			},
			async uploadCoverFile(filePath) {
				if (!filePath) return
				const lang = uni.getLocale()
				let loadingTitle = 'Uploading'
				if (lang === 'zh-cn') loadingTitle = '上传中'
				else if (lang === 'zh-Hant') loadingTitle = '上傳中'
				uni.showLoading({ title: loadingTitle, mask: true })
				try {
					const config = await fetchUploadConfig()
					const url = await uploadImageFile(filePath, config)
					this.start.image = url
					let okTitle = 'Uploaded'
					if (lang === 'zh-cn') okTitle = '封面上传成功'
					else if (lang === 'zh-Hant') okTitle = '封面上傳成功'
					uni.showToast({ title: okTitle, icon: 'success' })
				} catch (err) {
					console.error('live cover upload failed', err)
					let errTitle = 'Upload failed'
					if (lang === 'zh-cn') errTitle = '封面上传失败'
					else if (lang === 'zh-Hant') errTitle = '封面上傳失敗'
					uni.showToast({
						title: (err && err.message) ? err.message : errTitle,
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			stcOss(url) {
				let oss = (this.$store.state.shell && this.$store.state.shell.appUrl && this.$store.state.shell.appUrl.oss) || '';
				let image = '';
				if (url) {
					if ((/^(http|https):\/\/.+/.test(url))) {
						image = url;
					} else {
						image = oss + url;
					}
				} else {
					image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
				}
				return image;
			},
			formatEllipsis(str = '', limitLen = 24) {
				let len = 0,
				reg = /[\x00-\xff]/, //半角字符的正则匹配
				strs = str.split(''),
				inx = strs.findIndex(s => {
					len += reg.test(s) ? 1 : 2
					if (len > limitLen) return true
				})
			    return inx === -1 ? str : str.substr(0, inx) + '...'
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + 'w') : num
			}
		}
	};
</script>

<style>
@import '@/static/style/wanlnvue.css';
.hl88-lr-control {
	background-color: transparent;
	width: 750rpx;
}
.hl88-lr-ctlPopHost {
	width: 750rpx;
}
/* nvue 内嵌 webview：uni-popup 容器须占满屏宽 */
.hl88-lr-ctlPopHost .uni-popup__wrapper-box {
	width: 750rpx;
}
.hl88-lr-control-main{
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	padding-left: 18rpx;
	padding-right: 18rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.hl88-lr-control-main--live{
	padding-right: 120rpx;
}
	.hl88-lr-control-left {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
		.hl88-lr-btn-icon{
			position: relative;
			width: 76rpx;
			height: 76rpx;
			margin-right: 18rpx;
			border-radius: 38rpx;
			background-color: rgba(0, 0, 0, 0.2);
			align-items: center;
			justify-content: center;
		}
		.hl88-lr-btn-icon-img{
			width: 44rpx;
			height: 44rpx;
		}
		.hl88-lr-btn-icon-img--shop{
			width: 48rpx;
			height: 48rpx;
		}
		.hl88-lr-btn-ghost{
			background-color: transparent;
		}
		.hl88-lr-btn-badge{
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			min-width: 32rpx;
			height: 32rpx;
			padding-left: 8rpx;
			padding-right: 8rpx;
			border-radius: 16rpx;
			background-color: #311564;
			align-items: center;
			justify-content: center;
			z-index: 1;
		}
		.hl88-lr-btn-badge-text{
			color: #ffffff;
			font-size: 20rpx;
			line-height: 32rpx;
		}
		.hl88-lr-btn-icon-text{
			font-size: 38rpx;
			color: rgba(255, 255, 255, 0.85);
		}
	.hl88-lr-control-right{
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
		.hl88-lr-control-right-start{
			flex: 1;
			width: 100%;
			background: #4a8cff;
			align-items: center;
			justify-content: center;
			height: 76rpx;
			border-radius: 40rpx;
		}
		.hl88-lr-control-right-start--primary {
			background-color: #4a8cff;
			background-image: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
		}
			.hl88-lr-control-right-start-text{
				color: #fff;
				font-size: 30rpx;
				font-weight: 600;
			}
		.hl88-lr-control-right-list {
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
		}
		.hl88-lr-control-right-list-btn {
			position: relative;
		}
		/* 购物袋颜色 */
		.hl88-lr-control-right-list-btn-text {
			color: #3ed656;
			font-size: 56rpx;
		}
/* 弹框 */
.hl88-lr-popup{
	position: relative;
	width: 750rpx;
	background: rgba(255, 255, 255, 0.93);
	padding-left: 18rpx;
	padding-right: 18rpx;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
}
	.hl88-lr-popup-list{
		margin-bottom: 108rpx;
	}
		.hl88-lr-goods-list-empty {
			align-items: center;
			justify-content: center;
			height: 600rpx;
		}
			.hl88-lr-goods-list-empty-icon {
				font-size: 100rpx;
				color: #888;
				/* #ifndef APP-PLUS */
				font-family: "iconfont";
				/* #endif*/
				font-family: iconfont;
				margin-bottom: 30rpx;
			}
			.hl88-lr-goods-list-empty-text {
				color: #888;
				font-size: 28rpx;
			}
	.hl88-lr-popup-title {
		height: 100rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
		.hl88-lr-popup-title-text {
			font-size: 32rpx;
		}
		.hl88-lr-popup-title-close-text{
			font-size: 32rpx;
			/* #ifndef APP-PLUS */
			font-family: "iconfont";
			/* #endif*/
			font-family: iconfont;
			width: 40rpx;
			height: 40rpx;
		}
	.hl88-lr-search {
		flex-direction: row;
		align-items: center;
		height: 78rpx;
		margin-bottom: 40rpx;
		border-left: 2rpx solid rgba(0, 0, 0, 0.1);
		border-right: 2rpx solid rgba(0, 0, 0, 0.1);
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 18rpx;
		overflow: hidden;
	}
		.hl88-lr-search-picker {
			flex-direction: row;
			height: 78rpx;
			line-height: 78rpx;
			align-items: center;
			justify-content: center;
			padding-left: 30rpx;
			padding-right: 18rpx;
			margin-right: 18rpx;
			border-radius: 18rpx;
			background: rgba(0, 0, 0, 0.06);
		}
			.hl88-lr-search-picker-text {
				color: rgba(0, 0, 0, 0.4);
				font-size: 30rpx;
				margin-right: 4rpx;
			}
			.hl88-lr-search-picker-icon {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.15);
				/* #ifndef APP-PLUS */
				font-family: "iconfont";
				/* #endif*/
				font-family: iconfont;
			}
	.hl88-lr-search-input { 
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}
	.hl88-lr-search-input-icon {
		height: 78rpx;
		line-height: 78rpx;
		width: 80rpx;
		align-items: center;
		justify-content: center;
	}
		.hl88-lr-search-input-icon-text {
			font-size: 38rpx;
			color: rgba(0, 0, 0, 0.5);
			/* #ifndef APP-PLUS */
			font-family: "iconfont";
			/* #endif*/
			font-family: iconfont;
		}
	.hl88-lr-search-title {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 18rpx;
	}
	.hl88-lr-search-title-text {
		font-size: 28rpx;
		color: #666;
	}
	.hl88-lr-search-title-icon-text {
		font-size: 24rpx;
		color: #3ed656;
		/* #ifndef APP-PLUS */
		font-family: "iconfont";
		/* #endif*/
		font-family: iconfont;
	}
	.hl88-lr-popup-start {
		position: absolute;
		right: 18rpx;
		left: 18rpx;
	}
	.hl88-lr-operation-button{
		flex-direction: row;
		
	}
		.hl88-lr-operation-button-text {
			font-size: 44rpx;
			color: #3ed656;
			/* #ifndef APP-PLUS */
			font-family: "iconfont";
			/* #endif*/
			font-family: iconfont;
		}
	/* 准备直播 */
	.hl88-lr-start-list-item-name {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}
	
		.hl88-lr-start-list-item-name-left{
			flex-direction: row;
			align-items: center;
		}
			.hl88-lr-start-list-item-name-left-icon-text {
				font-size: 24rpx;
				color: #3ed656;
				/* #ifndef APP-PLUS */
				font-family: "iconfont";
				/* #endif*/
				font-family: iconfont;
			}
			.hl88-lr-start-list-item-name-text {
				font-size: 28rpx;
			}
		.hl88-lr-start-list-item-name-right {
			flex-direction: row;
			align-items: center;
		}
			.hl88-lr-start-list-item-name-right-text{
				font-size: 26rpx;
				color: #3ed656;
			}
		.hl88-lr-start-theme-count {
			flex-shrink: 0;
		}
			.hl88-lr-start-theme-count-text {
				font-size: 24rpx;
				color: #999999;
			}
	
	.hl88-lr-start-list-item-content-select {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		margin-bottom: 18rpx;
		border-left: 2rpx solid rgba(0, 0, 0, 0.04);
		border-right: 2rpx solid rgba(0, 0, 0, 0.04);
		border-top: 2rpx solid rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		border-radius: 18rpx;
	}
		.hl88-lr-start-list-item-content-select-text {
			font-size: 26rpx;
			color: #888;
			/* #ifndef APP-PLUS */
			font-family: "iconfont";
			/* #endif*/
			font-family: iconfont;
			padding-right: 8rpx;
			padding-left: 8rpx;
		}
	
	
	.hl88-lr-start-list-item-content-img {
		position: relative;
		width: 280rpx;
		height: 350rpx;
		padding-top: 18rpx;
		padding-right: 18rpx;
		padding-bottom: 18rpx;
		padding-left: 18rpx;
		border-left: 2rpx solid rgba(0, 0, 0, 0.04);
		border-right: 2rpx solid rgba(0, 0, 0, 0.04);
		border-top: 2rpx solid rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		border-radius: 18rpx;
		margin-bottom: 22rpx;
	}
		.hl88-lr-start-list-item-content-image {
			border-radius: 18rpx;
			width: 240rpx;
			height: 310rpx;
		}
	
	.hl88-lr-start-list-item-goods-image {
		margin-bottom: 22rpx;
	}
	.hl88-lr-start-list-item-goods-item {
		flex-direction: row;
		align-items: center;
		background: rgba(255, 255, 255, 0.8);
		padding-top: 18rpx;
		padding-bottom: 18rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
		border-radius: 18rpx;
		margin-bottom: 18rpx;
	}
		.hl88-lr-start-list-item-goods-item-img {
			width: 70rpx;
			height: 70rpx;
		}
			.hl88-lr-start-list-item-goods-item-img-image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 5000rpx;
			}
		.hl88-lr-start-list-item-goods-item-title {
			flex: 1;
			padding-left: 18rpx;
			padding-right: 18rpx;
		}
			.hl88-lr-start-list-item-goods-item-title-text {
				color: #333;
				font-size: 28rpx;
			}
		
	/* Weex 仅支持单类名选择器，勿用 .a.b 链式；简介框合并为一类 */
	.hl88-lr-start-list-item-content-textarea-intro {
		font-size: 28rpx;
		color: #888;
		height: 120rpx;
		max-height: 120rpx;
		border-left: 2rpx solid rgba(0, 0, 0, 0.04);
		border-right: 2rpx solid rgba(0, 0, 0, 0.04);
		border-top: 2rpx solid rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		padding-top: 18rpx;
		padding-right: 18rpx;
		padding-bottom: 18rpx;
		padding-left: 18rpx;
		border-radius: 18rpx;
		margin-bottom: 22rpx;
	}
	.hl88-lr-start-list-item-content-placeholder {
		font-size: 28rpx;
		color: #888;
	}
	
	/* 商品列表 */
	.hl88-lr-goods-list-item {
		flex-direction: row;
		background: rgba(255, 255, 255, 0.8);
		border-left: 2rpx solid rgba(0, 0, 0, 0.04);
		border-right: 2rpx solid rgba(0, 0, 0, 0.04);
		border-top: 2rpx solid rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		padding-top: 18rpx;
		padding-right: 18rpx;
		padding-bottom: 18rpx;
		padding-left: 18rpx;
		margin-bottom: 18rpx;
		border-radius: 18rpx;
	}
		.hl88-lr-goods-list-item-active {
			background: rgba(62, 214, 86, 0.12);
			border-left: 2rpx solid rgba(62, 214, 86, 0.45);
			border-right: 2rpx solid rgba(62, 214, 86, 0.45);
			border-top: 2rpx solid rgba(62, 214, 86, 0.45);
			border-bottom: 2rpx solid rgba(62, 214, 86, 0.45);
		}
		.hl88-lr-goods-list-item-img {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			overflow: hidden;
			background-color: #f7f7f7;
			margin-right: 20rpx;
		}
			.hl88-lr-goods-list-item-image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 18rpx;
			}
			
		.hl88-lr-goods-list-item-subject{
			flex: 1;
			justify-content: space-between;
		}
			
			.hl88-lr-goods-list-item-subject-title-text{
				color: rgba(0, 0, 0, 0.7);
				font-size: 28rpx;
				/* #ifdef APP-PLUS */
				/* lines: 2; */
				/* text-overflow: ellipsis; */
				line-height: 36rpx;
				/* #endif */
			}
			
			.hl88-lr-goods-list-item-subject-operation{
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
			}
				.hl88-lr-goods-list-item-subject-operation-price-text{
					color: #2fb04a;
					font-size: 32rpx;
					font-weight: 500;
				}
			
	.hl88-lr-shop-list-item {
		align-items: center;
		flex-direction: row;
		margin-bottom: 24rpx;
		background-color: rgba(0, 0, 0, 0.02);
		border-left: 2rpx solid rgba(0, 0, 0, 0.04);
		border-right: 2rpx solid rgba(0, 0, 0, 0.04);
		border-top: 2rpx solid rgba(0, 0, 0, 0.04);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		padding-left: 18rpx;
		padding-right: 18rpx;
		padding-top: 18rpx;
		padding-bottom: 18rpx;
		border-radius: 18rpx;
	}
		.hl88-lr-shop-list-item-active {
			background: rgba(62, 214, 86, 0.12);
			border-left: 2rpx solid rgba(62, 214, 86, 0.45);
			border-right: 2rpx solid rgba(62, 214, 86, 0.45);
			border-top: 2rpx solid rgba(62, 214, 86, 0.45);
			border-bottom: 2rpx solid rgba(62, 214, 86, 0.45);
		}
		.hl88-lr-shop-list-item-img {
			width: 100rpx;
			height: 100rpx;
		}
			.hl88-lr-shop-list-item-image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 5000rpx;
			}
		.hl88-lr-shop-list-title{
			flex: 1;
			margin-left: 18rpx;
		}
		.hl88-lr-shop-list-item-title {
			flex: 1;
			margin-left: 18rpx;
			margin-right: 18rpx;
		}
			.hl88-lr-shop-list-item-title-text {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.7);
			}
	
	/* 付费设置 */
	.hl88-lr-payment-setting-item {
		margin-bottom: 30rpx;
		flex-direction: column;
	}
		.hl88-lr-payment-setting-label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 18rpx;
		}
		.hl88-lr-payment-switch {
			flex-direction: row;
			border-left: 2rpx solid rgba(0, 0, 0, 0.1);
			border-right: 2rpx solid rgba(0, 0, 0, 0.1);
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			border-radius: 18rpx;
			overflow: hidden;
			background: #f5f5f5;
		}
			.hl88-lr-payment-switch-item {
				flex: 1;
				height: 76rpx;
				align-items: center;
				justify-content: center;
				background: transparent;
			}
			.hl88-lr-payment-switch-item-active {
				background: #3ed656;
			}
				.hl88-lr-payment-switch-text {
					font-size: 28rpx;
					color: #666;
				}
				.hl88-lr-payment-switch-text-active {
					color: #fff !important;
					font-weight: bold;
				}
		/* 付费输入框容器（滑动动画） */
		.hl88-lr-payment-input-container {
			/* #ifndef APP-NVUE */
			max-height: 0;
			/* #endif */
			opacity: 0;
			overflow: hidden;
			margin-bottom: 0;
			/* #ifndef APP-NVUE */
			transition: all 0.3s ease-in-out;
			/* #endif */
		}
		.hl88-lr-payment-input-container-show {
			/* #ifndef APP-NVUE */
			max-height: 300rpx;
			overflow: visible;
			/* #endif */
			opacity: 1;
			margin-bottom: 30rpx;
		}
		.hl88-lr-payment-input {
			height: 76rpx;
			border-left: 2rpx solid rgba(0, 0, 0, 0.04);
			border-right: 2rpx solid rgba(0, 0, 0, 0.04);
			border-top: 2rpx solid rgba(0, 0, 0, 0.04);
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
			border-radius: 18rpx;
			padding-left: 18rpx;
			padding-right: 18rpx;
			font-size: 28rpx;
			color: #333;
			}

/* 开播准备弹窗（nvue webview 兼容 flex 布局） */
.hl88-lr-popup--start {
	position: relative;
	width: 750rpx;
	background-color: #f5f7fb;
	padding-left: 28rpx;
	padding-right: 28rpx;
	border-top-left-radius: 28rpx;
	border-top-right-radius: 28rpx;
}
.hl88-lr-start-hero {
	width: 694rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 24rpx;
	margin-bottom: 20rpx;
	padding-top: 28rpx;
	padding-bottom: 28rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	border-radius: 28rpx;
	background-color: #4a8cff;
}
.hl88-lr-start-hero-main {
	flex: 1;
	flex-direction: column;
	padding-right: 16rpx;
}
.hl88-lr-start-hero-badge {
	font-size: 22rpx;
	color: #4a8cff;
	background-color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	padding-top: 6rpx;
	padding-bottom: 6rpx;
	padding-left: 18rpx;
	padding-right: 18rpx;
	border-radius: 999rpx;
	margin-bottom: 12rpx;
	align-self: flex-start;
}
.hl88-lr-start-hero-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #ffffff;
	line-height: 48rpx;
}
.hl88-lr-start-hero-close {
	width: 56rpx;
	height: 56rpx;
	border-radius: 28rpx;
	background-color: rgba(255, 255, 255, 0.18);
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hl88-lr-start-hero-close-img {
	width: 28rpx;
	height: 28rpx;
}
.hl88-lr-start-scroll {
	width: 750rpx;
}
.hl88-lr-start-body {
	width: 750rpx;
	padding-bottom: 24rpx;
}
.hl88-lr-start-card {
	width: 694rpx;
	margin-bottom: 20rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	background-color: #ffffff;
	border-radius: 28rpx;
	border-width: 1rpx;
	border-color: rgba(74, 140, 255, 0.12);
	border-style: solid;
}
.hl88-lr-start-card-hd {
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
}
.hl88-lr-start-card-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 18rpx;
	background-color: rgba(74, 140, 255, 0.12);
	font-size: 32rpx;
	text-align: center;
	line-height: 64rpx;
	margin-right: 16rpx;
	flex-shrink: 0;
}
.hl88-lr-start-card-meta {
	flex: 1;
	flex-direction: column;
}
.hl88-lr-start-card-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #1a1d26;
	line-height: 40rpx;
}
.hl88-lr-start-card-hint {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #8a8d9e;
	line-height: 34rpx;
}
.hl88-lr-start-cover-wrap {
	width: 646rpx;
	height: 364rpx;
	border-radius: 20rpx;
	overflow: hidden;
	border-width: 2rpx;
	border-style: dashed;
	border-color: rgba(74, 140, 255, 0.35);
	background-color: #f5f8ff;
}
.hl88-lr-start-cover-img {
	width: 646rpx;
	height: 364rpx;
	border-radius: 18rpx;
}
.hl88-lr-start-segment {
	width: 646rpx;
	flex-direction: row;
	align-items: center;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	padding-left: 8rpx;
	padding-right: 8rpx;
	border-radius: 999rpx;
	background-color: #f5f7fb;
}
.hl88-lr-start-segment-item {
	flex: 1;
	height: 72rpx;
	border-radius: 999rpx;
	align-items: center;
	justify-content: center;
}
.hl88-lr-start-segment-item--active {
	background-color: #4a8cff;
}
.hl88-lr-start-segment-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #8a8d9e;
}
.hl88-lr-start-segment-text--active {
	color: #ffffff;
}
.hl88-lr-start-field {
	margin-top: 20rpx;
	flex-direction: column;
}
.hl88-lr-start-field-label {
	margin-bottom: 12rpx;
	font-size: 26rpx;
	color: #5a6b8a;
	line-height: 36rpx;
}
.hl88-lr-start-field-input {
	height: 76rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-radius: 16rpx;
	background-color: #f5f7fb;
	font-size: 28rpx;
	color: #1a1d26;
}
.hl88-lr-start-theme-input {
	width: 100%;
	height: 120rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-radius: 16rpx;
	background-color: #f5f7fb;
	font-size: 28rpx;
	line-height: 44rpx;
	color: #1a1d26;
}
.hl88-lr-start-field-ph {
	color: #b0b4c0;
	font-size: 28rpx;
}
.hl88-lr-start-theme-count {
	flex-shrink: 0;
	font-size: 24rpx;
	color: #b0b4c0;
	line-height: 34rpx;
}
.hl88-lr-start-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 750rpx;
	padding-top: 12rpx;
	padding-left: 28rpx;
	padding-right: 28rpx;
	background-color: #ffffff;
	border-top-width: 1rpx;
	border-top-color: rgba(74, 140, 255, 0.12);
	border-top-style: solid;
}
.hl88-lr-start-submit {
	width: 694rpx;
	height: 88rpx;
	border-radius: 999rpx;
	align-items: center;
	justify-content: center;
	background-color: #4a8cff;
	background-image: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
}
.hl88-lr-start-submit-text {
	font-size: 30rpx;
	font-weight: 700;
	color: #ffffff;
}
</style>