<template>
	<view>
		
		   <view class="content"  @scroll="handleScroll">
			
				<view class="title" style="margin-top: 24rpx;">
					<u-row justify="space-between" customStyle="margin-bottom: 10px;position:relative">
						<view class="smtitle">{{listData.xcbt}}
							<text class="classify" v-if="listData.xclx=='1'" :class="{'classify1':listData.xclx=='1'}">{{listData.xclxmc}}</text>
							<text class="classify" v-else-if="listData.xclx=='2'" :class="{'classify2':listData.xclx=='2'}">{{listData.xclxmc}}</text>
							<text class="classify" v-else-if="listData.xclx=='3'" :class="{'classify3':listData.xclx=='3'}">{{listData.xclxmc}}</text>
							<text v-else></text>
						</view>
					</u-row>
					
				</view>
				<view class="static">
					<view class="left">
						<u-row>
							<view class="block">
							{{listData.fbdw}}
							</view>
							<view class="block">
							{{listData.createTime}}
							</view>
						</u-row>
					</view>
					
					<view class="left">
						<u-row>
							<view class="block">
								完成阅读获{{listData.jf}}积分 · {{listData.count?listData.count:0}}浏览
							</view>
						</u-row>
					</view>
				</view>
				<view class="detail">
					<mp-html :content="listData.xcnr|formatRichText" selectable="true"/>
				</view>
			
		</view>
			
	</view>
</template>

<script>
	import { detailApp} from '@/api/ffxc.js'
	export default {
		data(){
			return{
				scrollToView: '',
			}
		},
		
		props:{
			listData:{
				type:Object
			}
		},
		filters:{
			// 假设htmlContent是你的富文本内容
			formatRichText(html) { //控制小程序中图片大小
			if(html){
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					// '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://syqdxs.sdeesp.com');
					'<img style="max-width:calc(100vw - 96rpx);height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
					
				}
		},
		methods:{
			

		  
		}
	}
</script>

<style lang="scss">
	.content{
		text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}
	}
</style>