<template>
	<view>
		<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
		<view class="list-container">
			<view class="item" v-for="item in source" :key="item.id"  @click="goPage(item.callUrl,item.name)"
				:style="{ background: ` #FFFFFF` }">
				<view class="content flex flex-align-center">
					<image class="logo" :src="`/static/image/other/bank/${item.icon}.png`" mode=""></image>
					<view class="name flex-1">{{ item.name }}银行</view>
					<view class="right-button">
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<!-- <view class="line" :style="{ background: item.color.lineColor }"></view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		util
	} from '@/utils/common.js';

	const {
		appContext,
		proxy
	} = getCurrentInstance();
	// 列表
	const source = ref([{
			name: '招商',
			color: {
				bgColor: '#F3EAFF',
				lineColor: '#B78EF5',
				buttonColor: '#BA8DFF',
			},
			icon: 'zsyh',
			callUrl: "/pages/other/bank/zsyh"
		},
		{
			name: '工商',
			color: {
				bgColor: '#FFE9E9',
				lineColor: '#FF6969',
				buttonColor: '#FB6767',
			},
			icon: 'gsyh',
			callUrl: "/pages/other/bank/gsyh"
		},
		{
			name: '农业',
			color: {
				bgColor: '#FFF0DD',
				lineColor: '#FFA143',
				buttonColor: '#FFA64D',
			},
			icon: 'nyyh',
			callUrl: "/pages/other/bank/nyyh"
		},
		{
			name: '建设',
			color: {
				bgColor: '#E0FFD9',
				lineColor: '#56B745',
				buttonColor: '#5DCD49',
			},
			icon: 'jsyh',
			callUrl: "/pages/other/bank/jsyh"
		}
	])

	const data = reactive({
		navBar: {
			title: '选择机型',
			bgColor: '#F0F4F9',
		},
		type: "message"
	})

	onLoad((options) => {
		if (options.type) {
			data.type = options.type
		}
		proxy.$apiUserEvent('all', {
			type: 'event',
			key: 'bank',
			prefix: '.uni.other.',
			value:'银行卡首页'
		})
	})

	function goPage(url,name) {
		if (url) {
			proxy.$apiUserEvent('all', {
				type: 'event',
				key: 'bank',
				prefix: '.uni.other.',
				value:name+'银行'
			})
			util.goPage(url)
		} else {
			uni.showToast({
				title: '开发中',
				icon: 'none'
			})
		}
	}
</script>

<style>
	@import '@/common/main.css';
</style>
<style lang="less">
	.list-container {
		background-color: #F0F4F9;
		padding: 24rpx 32rpx;
	}

	.item {
		width: 100%;
		height: 188rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		padding: 40rpx 36rpx 24rpx 28rpx;

		.content {
			.logo {
				width: 96rpx;
				height: 96rpx;
				flex-shrink: 0;
			}

			.name {
				margin-left: 32rpx;
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: 500;
			}

			.right-button {
				width: 140rpx;
				height: 64rpx;
				border-radius: 16rpx;
				color: #ffffff;
				font-size: 28rpx;
				line-height: 64rpx !important;
				text-align: right;
				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}

		.line {
			width: 100rpx;
			height: 8rpx;
			filter: blur(5px);
			opacity: 0.5;
			margin-top: 4rpx;
		}
	}
</style>