<template>

	<view>
		<nav-bar title="视频教程" bg-color="transparent">
			<template v-slot:statusBar>
				<view class="top-bg-box">
					<image style="width: 100%;" src="/static/image/common/shipinjiaocheng/top-bg.png" mode="widthFix">
					</image>
				</view>
			</template>
		</nav-bar>
		<view class="video-list">
			<view class="video-item" v-for="item in videoHelpList" :key="item.id" @click="clickVideoHelp(item)">
				<image class="video-help-img" :src="item.icon"></image>
				<text class="video-help-title flex-1">{{ item.text }}</text>
				<uni-icons type="forward" size="18" color="#AEAEAE"></uni-icons>
			</view>
		</view>
		
			<ZdySafeBottom bgColor="#f0f3f8"/>

	</view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { storage } from "../../../utils/storage";
import {
	util
} from '@/utils/common.js'
const videoHelpList = ref([]);

import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'

onLoad(() => {
	const configData = storage.get("config")
	videoHelpList.value = configData.config['client.uniapp.alipay.video_help'] || []
})

/**
 * 点击视频教程
 * @param item 
 */
const clickVideoHelp = (item) => {
	const url = item.url
	util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
}

</script>

<style lang="less">
.video-list {
	background-color: #FFFFFF;
	border-radius: 32rpx;
	margin: 0 32rpx;

	.video-item {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx;
		border-bottom: 1rpx solid #E4E4E4;

		&:last-child {
			border-bottom: none;
		}

		.video-help-title {
			width: 100%;
			font-size: 32rpx;
			color: #1A1A1A;
			line-height: 42rpx;
			margin-left: 16rpx;
		}
	}

	.video-help-img {
		flex-shrink: 0;
		width: 72rpx;
		height: 72rpx;
	}
}
</style>
