<template>
	<view class="amms-page">
		<cu-custom>
			<block v-slot:content>使用帮助</block>
		</cu-custom>
		<!--  -->
		<view class="list">
			<view class="work_nav">
				<view class="container">
					<view v-for="(item, index) in helpList" :key="index">
						<view class="item" @tap="listClick(item)">
							<view class="left">{{ item.label }}</view>
							<view class="right">
								<image class="icon" :src="iconImg"></image>
							</view>
						</view>
						<view class="x" v-if="index != helpList.length - 1"></view>
					</view>
				</view>
			</view>
		</view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	import dictionaryApi from '../../../utils/dictionary';
	import { ref, onMounted, getCurrentInstance } from 'vue';

	const iconImg = ref('../../../static/img/ammsHome/icon1.png');
	const helpList = ref([]);
	const { proxy } = getCurrentInstance();
	
	onMounted(() => {
		dictionaryApi.getDictionarySpecial('ammsFujian').then((res: any) => {
			helpList.value = res.list
		});
	})

	function listClick(_val : any) {
		if (_val.remarks) {
			proxy.$refs.loading.open();
			uni.downloadFile({
				url: _val.remarks,
				success: (res) => {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						complete: () => {
							proxy.$refs.loading.close();
						},
						success: (res) => {
							console.log('打开文档成功');
						}
					});
				},
				fail: (err) => {
					console.log(err);
					proxy.$refs.loading.close();
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #F2F6F9;
		height: 100%;
	}

	.bj {
		background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		padding-bottom: 125rpx;
	}

	.container {
		padding: 0rpx 32rpx;
	}

	// 
	.head {
		.container {
			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 10rpx 32rpx;
			background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);

			.pic {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	// 
	.list {
		// margin-top: 100rpx;
	}

	//
	.work_nav {
		background: #FFFFFF;
		margin-bottom: 24rpx;

		.container {
			.item {
				padding: 28rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #444D54;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;

					.icon {
						width: 20rpx;
						height: 20rpx;
						margin-left: 16rpx;
					}
				}
			}

			.x {
				border-bottom: 1rpx solid #DDDDDD;
			}
		}
	}
</style>