<template>
	<view class="container">
		<up-collapse accordion>
			<up-collapse-item :title="item.helpClassifyName" :name="item.helpClassifyId" v-for="item in list" :key="item.helpClassifyId">
				<view class="row-wrap">
					<view class="u-collapse-content row" v-for="val in item.helpWordList" :key="val.helpWordId" @click="toHelpDetal(val)">
						{{ val.helpWordTitle }}
					</view>
				</view>
			</up-collapse-item>
		</up-collapse>
		<view class="footer-wrap">
			<view class="footer">
				<view class="item" @click="linkTo('/pages/me/contact')">
					<up-icon name="email" size="24" />
					联系客服
				</view>
				<view class="item" @click="linkTo('/pages/me/feedback')">
					<up-icon name="edit-pen" size="24" />
					意见反馈
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { selectHelpList } from '@/api/me/me.js';
import { linkTo } from '@/utils/app.js';

// 获取帮助中心列表
const list = ref([]);
async function selectHelpListAjax() {
	try {
		const res = await selectHelpList({ types: 1 });
		list.value = res;
	} catch (error) {
		console.log(error);
	}
}

function toHelpDetal(item) {
	uni.setStorageSync('helpDetail', item);
	linkTo('/pages/me/help_center_detail');
}

onLoad(() => {
	selectHelpListAjax();
});
</script>

<style scoped lang="scss">
.footer-wrap {
	padding: 28upx;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	.footer {
		background-color: #f5f5f5;
		height: 108upx;
		display: flex;
		border-radius: 20upx;
		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			position: relative;
			&:first-child {
				&::after {
					content: '';
					height: 20upx;
					border-right: 1upx solid #999;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -10upx;
				}
			}
		}
	}
}
</style>
