<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		watch,
		computed,
		onMounted,
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const header_array = ref([{
		title: '健康指导',
		desc: 'Health Instruction'
	}, {
		title: '注意事项',
		desc: 'Physical Examination Notices'
	}])

	const $props = defineProps({
		list: {
			type: Array,
			default: []
		},
		type: {
			type: Number,
			default: 1
		}
	});
	const search_input = ref('')
	const posts_list = ref([])
	const posts_list_show = computed(() => {
		if (!!search_input.value) {
			let list = []
			for (let i in posts_list.value) {
				if (posts_list.value[i].title.includes(search_input.value)) {
					list.push(posts_list.value[i])
				}
			}
			return list
		} else {
			return posts_list.value
		}
	})
	const htmlToText = (content) => {
		return content
	}
	const getDetail = async (item, key) => {
		const response = await $api('ArticleGetDetail', {
			id: item.id
		})
		$response(response, () => {
			posts_list.value[key].content = htmlToText(response.data.info.content)
		})
	}

	const contentShow = (info, key) => {
		posts_list.value[key].open = !posts_list.value[key].open
		if (posts_list.value[key].open && !posts_list.value[key].content) {
			getDetail(info, key)
		}
	}

	watch(
		() => $props.list,
		() => {
			posts_list.value = JSON.parse(JSON.stringify($props.list)).map((item) => {
				return {
					content: '',
					...item,
					open: false
				}
			})
		}, {
			immediate: true
		}
	)
</script>
<template>
	<view class="list_wrapper">
		<view class="header_wrapper">
			<view class="header_icon_wrapper">
				<image src="@/static/assets/posts/icon@2x.png"></image>
			</view>
			<view class="header_info_wrapper">
				<view class="header_title_wrapper">
					{{ header_array[$props.type - 1].title }}
				</view>
				<view class="header_subtitle_wrapper">
					{{ header_array[$props.type - 1].desc }}
				</view>
			</view>
		</view>
		<view class="search_wrapper">
			<view class="search_line_wrapper"></view>
			<view class="search_input_wrapper">
				<view class="search_input_icon_wrapper">
					<image src="@/static/assets/posts/sousuo@2x.png"></image>
				</view>
				<input class="search_input_input_wrapper" v-model="search_input" type="text" placeholder="搜索">
			</view>
		</view>
		<view class="item_list_wrapper">
			<view v-if="posts_list_show.length === 0">
				<view class="no_item_wrapper">暂无内容</view>
			</view>
			<view v-for="(i,k) in posts_list_show" :key="k" class="item_wrapper">
				<view @click="contentShow(i,k)" class="item_title_wrapper">
					<view class="item_title_text_wrapper">{{ i.title }}</view>
					<view class="item_title_icon_wrapper">
						<view class="item_title_icon_text_wrapper">{{ !i.open ? '展开' : '收起' }}</view>
						<image v-if="!i.open" src="@/static/assets/posts/sanjiao@2x.png"></image>
						<image v-else src="@/static/assets/posts/xsanjiao@2x.png"></image>
					</view>
					<image class="item_title_background_wrapper" src="@/static/assets/posts/biaoti@2x.png"></image>
				</view>
				<view v-if="!!i.open" class="item_content_wrapper">
					<view v-if="!i.content" class="item_content_loading_wrapper">
						<uni-icons type="spinner-cycle" size="20"></uni-icons>
					</view>
					<view v-else>
						<text v-html="i.content"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.no_item_wrapper {
		padding: 150rpx 0;
		font-size: 24rpx;
		text-align: center;
		color: #33333340;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.item_content_loading_wrapper {
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translate(-50%, -50%);
		animation: spin 3s ease-in-out infinite;
	}

	.item_content_wrapper {
		padding: 35rpx;
		background: #F1F5F9;
		position: relative;
		font-size: 24rpx;
	}

	.item_list_wrapper {
		padding-bottom: 50rpx;
	}

	.item_wrapper {
		width: 676rpx;
		margin: 25rpx auto 0;
	}

	.item_title_text_wrapper {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		position: relative;
		z-index: 1;
		margin-left: 35rpx;
		width: 240px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item_title_icon_wrapper {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		margin-right: 35rpx;
	}

	.item_title_icon_wrapper image {
		width: 21rpx;
		height: 11rpx;
		display: block;
		object-fit: contain;
	}

	.item_title_icon_text_wrapper {
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 10rpx;
	}

	.item_title_wrapper {
		width: 676rpx;
		height: 81rpx;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
	}

	.item_title_background_wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 676rpx;
		height: 81rpx;
		display: block;
		object-fit: contain;
		z-index: 0;
	}

	.list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
		background: #ffffff;
	}

	.header_wrapper {
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 42rpx auto 0;
	}

	.header_icon_wrapper {
		width: 100rpx;
		height: 100rpx;
		margin-left: 33rpx;
	}

	.header_icon_wrapper image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		object-fit: contain;
	}

	.header_info_wrapper {
		margin-left: 26rpx;
	}

	.header_title_wrapper {
		font-weight: 400;
		font-size: 34rpx;
		color: #0E0E0E;
		line-height: 1;
	}

	.header_subtitle_wrapper {
		font-weight: 400;
		font-size: 16rpx;
		color: #979797;
		line-height: 1;
		margin-top: 10rpx;
	}

	.search_wrapper {
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 15rpx auto 0;
		justify-content: space-between;
	}

	.search_line_wrapper {
		width: 476rpx;
		height: 1rpx;
		background: #EBEAEA;
	}

	.search_input_wrapper {
		width: 175rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		border: 1px solid #A5A6A6;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search_input_input_wrapper {
		width: 80rpx;
		height: 42rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.search_input_icon_wrapper {
		width: 22rpx;
		height: 22rpx;
	}

	.search_input_icon_wrapper image {
		width: 22rpx;
		height: 22rpx;
		display: block;
		object-fit: contain;
	}
</style>