<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('menu.tools')" />
		</view>
		<Spin v-show="loading" />
		<view class="content" v-if="detail" >
			<view class="news-title" >{{detail.title}}</view>
			<view class="news-desc">
				<image class="icon" src="/static/clock.svg"></image>
				<text>{{detail.release_time}}</text>
			</view>
			<view class="news-content" v-html="detail.content"></view>
		</view>
	</view>
</template>

<script>
 
import { getToolsDetail } from '@/services/toolsAndReport';
// #ifndef H5
import * as cheerio from 'cheerio';
// #endif

export default {
	data() {
		return {
			loading: false,
			id: undefined,
			detail: undefined
		}
	},
	methods: {
		handleImages(htmlContent) {
		  // #ifdef H5
		  var parser = new DOMParser();
		  var doc = parser.parseFromString(htmlContent, 'text/html');
		  var images = doc.getElementsByTagName('img');
		  Array.from(images).forEach(function(img) {
		    var width = img.getAttribute("width");
		    if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
		      img.setAttribute('width', '100%');
			  img.setAttribute('height', 'auto');
		    }
		  });
		  return doc.documentElement.innerHTML;
		  // #endif
		  
		  // #ifndef H5
		  const $ = cheerio.load(htmlContent);
		  const images = $('img')
		  Array.from(images).forEach(function(img) {
			  var width = $(img).attr('width')
			  if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
				  $(img).attr('width', '100%');
				  $(img).attr('height', 'auto');
			  }
		  })
		  return $.html();
		  // #endif
		}
	},
	onLoad(options) {
		const {id} = options
		this.id = id
		this.loading = true
		getToolsDetail({id}).then(resp => {
			if (resp.code == 0) {
				if (resp.data.content) {
					resp.data.content = this.handleImages(resp.data.content)
				}
				this.detail = resp.data
			}
			this.loading = false
		}).catch(() => {
			this.loading = false
		})
	}
}
</script>

<style lang="scss" scoped>
@import './detail.scss';
</style>
<style>
	.news-content {
		width: 100%;
		overflow-y: auto;
		word-wrap: break-word;
	}
</style>