<template>
	<view class="page-container">
		<view class="content-box" v-if="order != null">
			<view class="upload-img-box">
				<image @click="doPreImg" :data-value="order.goodsDTO.goodsPhoto" :src="order.goodsDTO.goodsPhoto"
					mode="scaleToFill" style="width: 400rpx;height: 500rpx;">
				</image>
			</view>
			<view class="content-container">
				<view class="tab-nav">
					<view class="tab-nav-scroll">
						<view @click="bindChangeTab" :data-value="0"
							:class="[curTab==0? 'tab-item-active':'tab-item-inactive']">订单信息
						</view>
						<view @click="bindChangeTab" :data-value="1"
							:class="[curTab==1? 'tab-item-active':'tab-item-inactive']">软著信息
						</view>
						<view @click="bindChangeTab" :data-value="2"
							:class="[curTab==2? 'tab-item-active':'tab-item-inactive']">
							<view>资料补充</view>
							<view v-if="order.waitCorrectionCount>0" class="info-tag">{{order.waitCorrectionCount}}
							</view>
						</view>

						<view v-if="order.buyUserDTO != null && kind=='buy'" @click="bindChangeTab" :data-value="3"
							:class="[curTab==3? 'tab-item-active':'tab-item-inactive']">受让人信息</view>
						<view v-if="kind=='buy' && order.orderStatus=='过户已完成'" @click="bindChangeTab" :data-value="4"
							:class="[curTab==4? 'tab-item-active':'tab-item-inactive']">证书详情</view>
					</view>
					<view class="tab-bottom-line"></view>
				</view>
				<view class="box" v-if="curTab==0">
					<view class="section">
						<view class="item">
							<text class="label">订单金额</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.goodsDTO.goodsPrice}}</view>
							</view>
						</view>
						<view class="item">
							<text class="label">订单状态</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.orderStatus}}</view>
							</view>
						</view>
						<view class="item">
							<text class="label">下单时间</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.createTime}}</view>
							</view>
						</view>
						<view class="item">
							<text class="label">付款时间</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.payTime ==''?'未付款':order.payTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="curTab==1" class="box">
					<view class="section">
						<view class="item">
							<text class="label">软著名称</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.goodsDTO.goodsName}}</view>
							</view>
						</view>

						<view class="item">
							<text class="label">售卖价格</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.goodsDTO.goodsOpenPrice}}</view>
							</view>
						</view>
						<view class="item">
							<view class="label">上架时间</view>
							<view class="select-content-item" style="align-items: center;">
								<view class="select-time v-select">{{order.goodsDTO.goodsStatusTime}}</view>
							</view>
						</view>
					</view>
					<block v-if="kind=='sell'">
						<view class="info-title">著作权人信息</view>
						<view class="section">
							<view class="item">
								<text class="label">类别</text>
								<view class="select-content-item">
									<view class="select-time v-select">{{order.sellUserDTO.type}}</view>
								</view>
							</view>
							<view class="item">
								<text class="label">姓名或机构名称</text>
								<view class="select-content-item">
									<view class="value v-select">{{order.sellUserDTO.name}}</view>
								</view>
							</view>
							<view class="item">
								<text class="label">所在省市</text>
								<view class="select-content-item">
									<view class="select-time v-select">{{order.sellUserDTO.city}}</view>
								</view>
							</view>
							<view class="item">
								<text class="label">联系电话</text>
								<view class="select-content-item">
									<view class="value v-select">{{order.sellUserDTO.phone}}</view>
								</view>
							</view>
							<view class="item">
								<text class="label">证件类型</text>
								<view class="select-content-item" style="border-bottom: none;">
									<view class="value v-select">{{order.sellUserDTO.idcardType}}</view>
								</view>
							</view>
							<view class="item">
								<text class="label">证件号码</text>
								<view class="select-content-item" style="border-bottom: none;">
									<view class="value v-select">{{order.sellUserDTO.idcard}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>

				<view class="box" v-if="curTab==2">
					<ContainerLoading :loadingVisible="loadingState" style="height: 50vh;" bindrefresh="doRefreshList">
						<scroll-view :scroll-y="true" style="height: 50vh;" refresher-enabled
							refresher-triggered="{{listRefreshTrig}}" @scrolltolower="doLoadMore" lower-threshold='30'>
							<view class="list-box">
								<block v-for="(item,index) in replenlishList" :key="index">
									<view class="list-item">
										<view style="display: flex;flex-direction: column;">
											<view class="item-content">
												<view class="item-title" @click="doShowReplishDetail" :data-item="item">
													{{item.correctionTitle}}
												</view>
												<view class="item-btns">
													<view :data-value="item" @click="goReplenish" class="btn-blue"
														v-if="kind=='buy' && item.buyId==''">去补充</view>
													<view :data-value="item" @click="goReplenish" class="btn-blue"
														v-if="kind=='sell' && item.sellId==''">去补充</view>
												</view>
											</view>
											<view class="item-desc" @click="doShowReplishDetail" :data-item="item">
												{{item.correctionRemark}}
											</view>
										</view>
										<view class="item-bottom">
											<!-- 卖家 -->
											<block v-if="kind=='sell'">
												<view
													:class="['status-tag' ,item.sellId==''? 'col-primary':'col-green']">
													{{item.sellId==''?'待补充':'已补充'}}
												</view>
											</block>
											<!-- 买家 -->
											<block v-if="kind=='buy'">
												<view
													:class="['status-tag',item.buyId=='' ? 'col-primary' :'col-green']">
													{{item.buyId==''?'待补充':'已补充'}}
												</view>
											</block>
											<view class="item-time">{{item.createTime}}</view>
										</view>
									</view>
								</block>
								<uni-load-more :status="hasMore"></uni-load-more>
							</view>
						</scroll-view>
					</ContainerLoading>
				</view>
				<view v-if="curTab==3 && kind=='buy'" class="box">
					<view class="section">
						<view class="item">
							<text class="label">类别</text>
							<view class="select-content-item">
								<view class="select-time v-select">
									{{order.buyUserDTO.type != ''? order.buyUserDTO.type:'暂无'}}
								</view>
							</view>
						</view>
						<view class="item">
							<text class="label">姓名或机构名称</text>
							<view class="select-content-item">
								<view class="value v-select">{{order.buyUserDTO.name != ''?order.buyUserDTO.name:'暂无'}}
								</view>
							</view>
						</view>
						<view class="item">
							<text class="label">所在省市</text>
							<view class="select-content-item">
								<view class="select-time v-select">
									{{order.buyUserDTO.city != '' ?order.buyUserDTO.city:'暂无'}}
								</view>
							</view>
						</view>
						<view class="item">
							<text class="label">联系电话</text>
							<view class="select-content-item">
								<view class="value v-select">
									{{order.buyUserDTO.phone !='' ?order.buyUserDTO.phone:'暂无'}}
								</view>
							</view>
						</view>
						<view class="item">
							<text class="label">证件类型</text>
							<view class="select-content-item" style="border-bottom: none;">
								<view class="value v-select">
									{{order.buyUserDTO.idcardType != '' ?order.buyUserDTO.idcardType:'暂无'}}
								</view>
							</view>
						</view>
						<view class="item">
							<text class="label">证件号码</text>
							<view class="select-content-item" style="border-bottom: none;">
								<view class="value v-select">
									{{order.buyUserDTO.idcard != ''? order.buyUserDTO.idcardType:'暂无'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="curTab==4 && kind=='buy' && order.orderStatus=='过户已完成'" class="box">
					<view class="item">
						<text class="label">下证时间</text>
						<view class="select-content-item" style="border-bottom: none;">
							<view class="value v-select">{{order.produceTime}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">证书</text>
						<view class="select-content-no-h">
							<view class="select-item-box">
								<view class="value v-select">
									<view class="accessory-box">
										<view class="accessory-item" v-for="(item,index) in files"
											@click="doDownloadFile" :data-item="item" wx:key="index">
											<block v-if="isImg(item.fileType)">
												<image class="accessory-img" mode="scaleToFill" :src="item.netUrl">
												</image>
												<view class="file-name">{{item.fileName}}</view>
											</block>
											<block wx:else>
												<view class="icon-source accessory-img"></view>
												<view class="file-name">{{item.fileName}}</view>
											</block>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer" v-if="order != null">
			<view style="display: flex;flex-direction: row;width: 100%;">
				<view class="bottom-btn-gray" style="flex: auto;" @click="doCancelOrder"
					v-if="order.orderStatus=='买家待付款' ||order.orderStatus=='待填写资料'">取消订单</view>
				<view class="bottom-btn-gray ml-20" style="flex:auto;" v-if="order.orderStatus=='买家待付款' && kind=='buy'"
					@click="doPayOrder">付款</view>
				<!-- 买家填写受让人信息 -->
				<view v-if="order.orderStatus=='待填写资料' && kind=='buy'" @click="bindFill" class="bottom-btn-blue ml-20"
					style="flex:auto;">填报受让人</view>
			</view>
		</view>
		<DownloadProgress :isShow="downloading" :progress="downloadProgress"></DownloadProgress>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :duration="2000" :type="msgType" :message="msgHint"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import DownloadProgress from '@/components/download-progress.vue'
	import ContainerLoading from '@/components/container-loading.vue'
	import Shop from '@/common/js/net/shop.js'
	import {
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	import {
		get
	} from '@/common/js/cache/storage.js'
	import {
		isImg
	} from '@/common/js/conver.js'
	var docFix = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
	var imgFix = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico', 'tiff', 'tif'];

	// 工具函数：检查文件类型
	function getFileExtension(filename) {
		if (!filename || typeof filename !== 'string') return '';
		var lastDot = filename.lastIndexOf('.');
		return lastDot === -1 ? '' : filename.substring(lastDot + 1).toLowerCase();
	}

	function isImageFile(filename) {
		return imgFix.indexOf(getFileExtension(filename)) !== -1;
	}

	function isDocumentFile(filename) {
		return docFix.indexOf(getFileExtension(filename)) !== -1;
	}
	export default {
		components: {
			DownloadProgress,
			ContainerLoading
		},
		setup() {},
		data() {
			return {
				msgHint: '',
				msgType: 'info',
				msgShow: false,
				showType: false,
				goodsId: '',
				goods: null,
				typeNameList: [],
				cardTypeName: '',
				cityName: '',
				leaderType: '',
				needRefresh: false,
				orderId: '',
				order: null,
				curTab: 0,
				loadingState: 'loading',
				pageData: {
					page: 1,
					rows: 10,
					orderId: ''
				},
				isLoadMore: false,
				hasMore: 'more',
				listRefreshTrig: false,
				replenlishList: [], //补充资料
				kind: 'buy', //用来标识 buy买家  sell卖家
				files: [],
				downloadProgress: 0,
				downloading: false,
				underlineOffset: 20
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "详情",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			const orderId = options.orderId
			const kind = options.kind
			if (orderId && orderId != '') {
				this.orderId = orderId
				this.kind = kind
				this.pageData.orderId = orderId
				this.doGetOrderDetail()
			} else {
				this.msgHint = '数据有误,请稍后重试'
				this.msgType = 'error'
				this.$refs.msg.open()
				setTimeout(() => {
					uni.navigateBack()
				}, 1500);
			}
		},
		onShow() {
			if (this.needRefresh) {
				this.needRefresh = false
				this.upPageNeedRefresh()
				this.doGetOrderDetail()
				this.doRefreshList()
			}
		},
		methods: {
			isImg,
			// 更新下划线位置
			//显示补充详情
			doShowReplishDetail(e) {
				const item = e.currentTarget.dataset.item
				if (this.kind == 'buy' && item.buyId == '') {
					this.msgHint = '请补充内容'
					this.msgType = 'error'
					this.$refs.msg.open()
					return
				}
				if (this.kind == 'sell' && item.sellId == '') {
					this.msgHint = '请补充内容'
					this.msgType = 'error'
					this.$refs.msg.open()
					return
				}

				uni.navigateTo({
					url: '/pages/shop/replenishStuffDetail/replenishStuffDetail?id=' + item.correctionId +
						'&kind=' + this.kind
				})
			},
			bindChangeTab(e) {
				const tabIndex = e.currentTarget.dataset.value
				this.curTab = tabIndex
				if (this.curTab == 2) {
					//加载补充资料
					this.doRefreshList()
				}
			},
			//加载补充资料
			doRefreshList() {
				this.loadingState = 'loading'
				this.listRefreshTrig = true
				this.replenlishList = []
				this.isLoadMore = false
				this.hasMore = 'more'
				this.pageData.page = 1
				this.doGetReplenish(true)
			},
			//加载更多
			doLoadMore() {
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				//判断是否有更多
				this.isLoadMore = true
				this.hasMore = 'loading'
				this.pageData.page = ++this.pageData.page
				_self.doGetReplenish(false)
			},
			//获取补充资料
			doGetReplenish(isRefresh) {
				const _self = this
				Shop.doGetReplenishList(_self.kind, _self.pageData)
					.then(res => {
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.replenlishList = _self.replenlishList.concat(res.rows)
						_self.isLoadMore = false
						_self.listRefreshTrig = false
						_self.hasMore = _self.replenlishList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						_self.loadingState = 'error'
						_self.isLoadMore = false
						_self.hasMore = 'more'
						_self.listRefreshTrig = false
					})
			},
			//获取订单详情
			doGetOrderDetail() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				Shop.doGetOrderDetail(_self.orderId)
					.then(res => {
						uni.hideLoading()
						res.goodsDTO.goodsPhoto = sImgPrefix + res.goodsDTO.goodsPhoto
						_self.order = res
						if (res.orderStatus == '过户已完成' && res.producePhoto != '') {
							_self.doGetFileInfo(res.producePhoto)
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1800);
					})
			},
			// 添加baseUrl
			addPrefix: function(list) {
				return list.map(function(item) {
					item.netUrl = sImgPrefix + item.fileId;
					return item;
				});
			},
			//获取文件详情
			doGetFileInfo(ids) {
				var that = this;
				var data = {
					ids: ids
				};

				uni.showLoading({
					title: '加载中...'
				});
				Shop.doGetFileInfos(data)
					.then(function(res) {
						uni.hideLoading();
						if (res && res !== null) {
							const list = that.addPrefix(res)
							that.files = list
						}
					})
					.catch(function(err) {
						uni.hideLoading();
						that.showMessage(err.msg || '获取证书详情失败,请稍后重试', 'error');
					});
			},
			showMessage: function(msg, type) {
				this.msgHint = msg
				this.msgType = type || 'info'
				this.$refs.msg.open()
			},
			doPreImg(e) {
				uni.previewImage({
					urls: [e.currentTarget.dataset.value],
				})
			},
			backPageRefresh() {
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.needRefresh = true
				uni.navigateBack()
			},
			//取消订单
			doCancelOrder() {
				uni.showModal({
					title: '提示',
					content: '您确定要取消该订单吗?',
					complete: (res) => {
						if (res.confirm) {
							this.goCancelOrder()
						}
					}
				})
			},
			goCancelOrder() {
				uni.showLoading({
					title: '取消中...',
				})
				const _self = this
				Shop.doCancelOrder(_self.orderId)
					.then(res => {
						uni.hideLoading()
						_self.msgHint = '取消成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.upPageNeedRefresh()
						_self.doGetOrderDetail()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			upPageNeedRefresh() {
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.needRefresh = true
			},
			//付款
			async doPayOrder() {
				try {
					const _self = this
					uni.showLoading({
						title: '付款中...',
					});

					await Shop.doConfirmOrder(_self.orderId);
					uni.hideLoading();
					_self.msgHint = '购买成功'
					_self.msgType = 'success'
					_self.$refs.msg.open()
					setTimeout(() => {
						_self.upPageNeedRefresh()
						_self.doGetOrderDetail()
					}, 1500);
				} catch (err) {
					uni.hideLoading();
					this.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
					this.msgType = 'error'
					this.$refs.msg.open()
				}
			},
			//填报受让人信息
			bindFill() {
				uni.navigateTo({
					url: '/pages/shop/addAssigneeInfo/addAssigneeInfo?orderId=' + this.orderId
				})
			},
			//补充材料
			goReplenish(e) {
				const item = e.currentTarget.dataset.value
				uni.navigateTo({
					url: '/pages/shop/addReplenishStuff/addReplenishStuff?id=' + item.correctionId
				})
			},
			doPreImg: function(e) {
				var url = e.currentTarget.dataset.value;
				uni.previewImage({
					urls: [url]
				});
			},



			// 下载文件
			doDownloadFile: function(e) {
				var item = e.currentTarget.dataset.item;
				// 判断是否是图片
				if (isImageFile(item.fileName)) {
					uni.previewImage({
						urls: [item.netUrl]
					});
				} else {
					// 判断是否支持打开
					if (isDocumentFile(item.fileName)) {
						// 去下载文件
						this.goDownloadFile(item);
					} else {
						this.showMessage('该文件无法在小程序中打开,请前往电脑端查看', 'info');
					}
				}
			},

			async goDownloadFile(item) {
				try {
					console.log(item)
					const _self = this
					_self.downloadProgress = 0 //重置下载进度
					_self.downloading = true //显示进度
					const url = item.netUrl + '.' + item.fileType
					const fileName = item.fileName
					const token = get('token')
					const header = {}
					if (token) {
						header.Auth = `Bearer ${token}`;
					}
					const downloadRes = await _self.doStartDownload(url, header)
					if (downloadRes && downloadRes.statusCode == 200) {
						//判断是txt还是文件
						if (downloadRes.tempFilePath.endsWith('.txt')) {
							_self.msgTxt = '下载成功'
							_self.msgType = 'success'
							_self.$refs.msg.open()
							_self.showDownload = false
							_self.downloading = false
							_self.downloadProgress = 0
							uni.navigateTo({
								url: '/pages/common/readTxt/readTxt?filePath=' +
									downloadRes.tempFilePath
							})
						} else {
							uni.openDocument({
								filePath: downloadRes.tempFilePath,
								fileType: item.fileType,
								showMenu: true,
								success(res) {
									console.log(res)
									_self.showDownload = false
									_self.downloading = false
									_self.downloadProgress = 0
								},
								fail(err) {
									_self.showErr('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。')
								}
							})
						}
					} else {
						_self.showErr('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。')
					}
				} catch (err) {
					_self.showErr('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。')
				}
			},
			//下载文件
			doStartDownload(url, header) {
				const _self = this
				return new Promise((resolve, reject) => {
					const downloadTask = uni.downloadFile({
						url: url,
						header: header,
						success: resolve,
						fail: reject
					})
					downloadTask.onProgressUpdate(res => {
						_self.downloadProgress = res.progress
					})
				})
			},
			showErr(msg) {
				const _self = this
				_self.msgHint = msg
				_self.msgType = 'error'
				_self.downloading = false
				_self.downloadProgress = 0
				_self.$refs.msg.open()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content-box {
		border-radius: 20rpx;
		margin-top: -30rpx;
	}

	.upload-img-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.content-container {
		margin: 0rpx -30rpx 80rpx -30rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.info-title {
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.info-title::before {
		content: "";
		width: 15rpx;
		height: 15rpx;
		background-color: $btn-blue-color-active;
		border-radius: 50%;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.section {
		margin: 10rpx 0rpx 15rpx 10rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 5rpx;
		padding: 10rpx;
		font-size: 28rpx;
	}

	.label {
		color: $text-gray-hint-color;
		font-size: 28rpx;
	}

	.select-content {
		margin-top: 15rpx;
		display: flex;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		background-color: $bg-gray-input-color;
		padding: 0rpx 10rpx;
	}

	.select-content-no-h {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-direction: row;
		border-radius: 5rpx;
	}

	.select-item-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.select-item-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $divider-color;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		color: $text-color;
		margin-right: 15rpx;
		margin-top: 5rpx;
	}



	.desc {
		flex: 1;
		color: #999;
		text-align: left;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 10px;
		align-items: center;
	}

	.select-time {
		color: $text-color;
		flex: 1;
		font-size: 28rpx;
		text-align: left;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: left;
	}


	.value-hint {
		color: $text-gray-hint-color;
	}

	.v-select {
		margin-top: 8rpx;
		color: $text-color;
		font-size: 28rpx;
		font-weight: bold;
	}

	.v-normal {
		color: $text-gray-hint-color;
	}

	.custom-dialog {
		background-color: $white-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	.tab-wrapper {
		position: relative;
	}

	.tab-box {
		display: flex;
		flex-direction: row;
		padding: 15rpx 15rpx 15rpx 0rpx;
		justify-content: space-evenly;
	}

	.select-tab {
		position: relative;
		font-size: 28rpx;
		color: $text-gray-desc-color;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: auto;
		text-align: center;
	}

	.select-tab.line {
		color: $text-color;
		font-weight: bold;
	}

	.select-tab:nth-of-type(n+2) {
		margin-left: 25rpx;
	}

	.border-container {
		position: relative;
		height: 5rpx;
	}

	.bottom-border {
		height: 100%;
		background-color: $divider-color;
	}

	.active-underline {
		position: absolute;
		bottom: 0;
		width: 60rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: $blue-color;
		transform: scaleY(0.5) translateX(-50%);
	}

	// .tab-box {
	// 	position: relative;
	// 	/* 确保父容器建立定位上下文 */
	// 	z-index: 0;
	// 	/* 设置较低的z-index */
	// 	display: flex;
	// 	flex-direction: row;
	// 	padding: 15rpx 15rpx 15rpx 0rpx;
	// 	border-bottom: 5rpx solid $divider-color;
	// 	justify-content: space-evenly;
	// }

	// .select-tab {
	// 	position: relative;
	// 	z-index: 1;
	// 	/* 高于.tab-box的z-index */
	// 	font-size: 28rpx;
	// 	color: $text-gray-desc-color;
	// 	white-space: nowrap;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	flex: auto;
	// }

	// .select-tab:nth-of-type(n+2) {
	// 	margin-left: 25rpx;
	// }

	// .line {
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// 	color: $text-color;
	// 	position: relative;
	// 	text-align: center;
	// 	display: block;
	// 	z-index: 2;
	// 	/* 更高的z-index */
	// }

	// .line::after {
	// 	content: "";
	// 	position: absolute;
	// 	left: 50%;
	// 	/* #ifdef MP-BAIDU */
	// 	top: 20rpx;
	// 	/* #endif */
	// 	/* #ifndef MP-BAIDU */
	// 	top: 54rpx;
	// 	/* #endif */
	// 	width: 60rpx;
	// 	height: 10rpx;
	// 	border-radius: 5rpx;
	// 	background: $blue-color;
	// 	transform: scaleY(0.5) translateX(-50%);
	// 	z-index: 2;
	// 	/* 确保伪元素也有高z-index */
	// }

	.info-tag {
		background-color: $bg-red-color;
		position: absolute;
		color: $white-color;
		top: 0rpx;
		right: 0rpx;
		border-radius: 50%;
		font-size: 24rpx;
		width: 40rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}



	.box {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		min-height: 50vh;
		background-color: $white-color;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 20rpx $divider-color;
	}



	.list-box {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		margin: 10rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.list-item:last-of-type {
		border-bottom: none;
	}

	.item-content {
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		min-width: 0;
		padding: 0rpx 10rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: $text-color;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		box-sizing: border-box;
		min-width: 0;
		flex: 1;
	}

	.item-desc {
		margin-top: 10rpx;
		color: $text-gray-hint-color;
		font-size: 24rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}

	.item-bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 10rpx;
		font-size: 24rpx;
		align-items: flex-end;
	}

	.btn-blue {
		background-color: $btn-blue-color;
		font-size: 24rpx;
		color: $white-color;
		height: 30rpx;
		padding: 8rpx 20rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 10rpx;
	}

	.btn-blue:active {
		background-color: $btn-blue-color-active;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 3rpx 20rpx;
		border-radius: 5rpx;
	}

	.col-primary {
		background-color: $primary-color-active;
		color: $text-brown-color;
	}

	.col-green {
		background-color: $bg-green-status-light-color;
	}

	.accessory-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.accessory-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 40%;
		padding: 15rpx;
		margin: 10rpx;
		border: 1rpx solid $divider-color;
		box-sizing: border-box;
		min-width: auto;
	}

	.accessory-img {
		width: 100%;
		height: 200rpx;
	}

	.file-name {
		width: 100%;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.icon-source {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiB3aWR0aD0iNTIiIGhlaWdodD0iNTIiIHN0eWxlPSIiIGZpbHRlcj0ibm9uZSI+CiAgICAKICAgIDxnPgogICAgPHBhdGggZD0iTTkyOCAxNjFINjk5LjJjLTQ5LjEgMC05Ny4xIDE0LjEtMTM4LjQgNDAuN0w1MTIgMjMzbC00OC44LTMxLjNBMjU1LjIgMjU1LjIgMCAwIDAgMzI0LjggMTYxSDk2Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY1NjhjMCAxNy43IDE0LjMgMzIgMzIgMzJoMjI4LjhjNDkuMSAwIDk3LjEgMTQuMSAxMzguNCA0MC43bDQ0LjQgMjguNmMxLjMuOCAyLjggMS4zIDQuMyAxLjNzMy0uNCA0LjMtMS4zbDQ0LjQtMjguNkM2MDIgODA3LjEgNjUwLjEgNzkzIDY5OS4yIDc5M0g5MjhjMTcuNyAwIDMyLTE0LjMgMzItMzJWMTkzYzAtMTcuNy0xNC4zLTMyLTMyLTMyek00MDQgNTUzLjVjMCA0LjEtMy4yIDcuNS03LjEgNy41SDIxMS4xYy0zLjkgMC03LjEtMy40LTcuMS03LjV2LTQ1YzAtNC4xIDMuMi03LjUgNy4xLTcuNWgxODUuN2MzLjkgMCA3LjEgMy40IDcuMSA3LjV2NDV6bTAtMTQwYzAgNC4xLTMuMiA3LjUtNy4xIDcuNUgyMTEuMWMtMy45IDAtNy4xLTMuNC03LjEtNy41di00NWMwLTQuMSAzLjItNy41IDcuMS03LjVoMTg1LjdjMy45IDAgNy4xIDMuNCA3LjEgNy41djQ1em00MTYgMTQwYzAgNC4xLTMuMiA3LjUtNy4xIDcuNUg2MjcuMWMtMy45IDAtNy4xLTMuNC03LjEtNy41di00NWMwLTQuMSAzLjItNy41IDcuMS03LjVoMTg1LjdjMy45IDAgNy4xIDMuNCA3LjEgNy41djQ1em0wLTE0MGMwIDQuMS0zLjIgNy41LTcuMSA3LjVINjI3LjFjLTMuOSAwLTcuMS0zLjQtNy4xLTcuNXYtNDVjMC00LjEgMy4yLTcuNSA3LjEtNy41aDE4NS43YzMuOSAwIDcuMSAzLjQgNy4xIDcuNXY0NXoiIGZpbGw9InJnYmEoMTI5LDE3OSw1NSwxKSI+PC9wYXRoPgogICAgPC9nPgogIDwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.tab-nav {
		padding: 0 10rpx;
		position: relative;

		.tab-nav-scroll {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
		}

		.tab-item-active {
			color: $blue-color;
			padding: 20rpx 5rpx;
			font-size: 24rpx;
			position: relative;
			flex: auto;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				bottom: 0rpx;
				left: 40rpx;
				right: 40rpx;
				height: 5rpx;
				background-color: $blue-color;
			}
		}

		.tab-item-inactive {
			color: $text-gray-desc-color;
			padding: 20rpx 5rpx;
			font-size: 24rpx;
			transition: color 0.3s;
			position: relative;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: auto;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 16rpx;
				right: 16rpx;
				height: 2rpx;
				background-color: transparent;
				transition: background-color 0.3s;
			}

			&:hover {
				color: $blue-color;

				&::after {
					background-color: rgba(22, 93, 255, 0.2);
				}
			}
		}

		.tab-icon {
			margin-right: 16rpx;
		}

		.tab-bottom-line {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: $divider-color;
			z-index: 1;
		}
	}
</style>