<template>
	<view>
		<tn-nav-bar :bottomShadow="false" :fixed="true">
			<view slot="default" style="color: #000000;font-size: 16px;font-weight: 600;">我要了解政策</view>
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view style="padding: 30rpx">
				<tn-swiper height="1230rpx" :autoplay="false" indicatorPosition="bottomCenter" imageMode="widthFix"
					:list="list" @change="selectSwiper" :current="current" name="goods_image" mode="none"></tn-swiper>
			</view>
		</view>
		<view class="swTop" :style="{width:w}">
			<swiper :current="current" class="swiper" :display-multiple-items="3" previous-margin="100rpx"
				next-margin="100rpx" style="margin-top: 30rpx">
				<swiper-item v-for="(item,index) in list" @click="dianSwiper(index)">
					<view :class="index == current ? 'select' : ''" style="width: 150rpx; height: 150rpx;">
						<view style="width: 100%; height: 100%;">
							<image :src="item.goods_image" style="width: 100%; height: 100%; display: block;"
								mode="aspectFill"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view
				style="height: 230rpx;width: 0rpx;position:absolute;top: 0;left: 0;box-shadow: rgba(255, 255, 255, 1) 5px 23px 15px 20px">
			</view>
			<view
				style="height: 230rpx;width: 0rpx;position:absolute;top: 0;right: 0;box-shadow: rgba(255, 255, 255, 1) 0px 23px 15px 20px">
			</view>
		</view>
	</view>
</template>

<script>
	import {
		serviceIndex
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				list: [],
				current: 0,
				w: '100%'
			}
		},
		onLoad(op) {
			const userAgent = navigator.userAgent.toLowerCase();
			if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
				// 移动端
				this.w = '100%';
			} else {
				// pc端
				this.w = '828rpx';
			}
			this.id = op.id;
			this.getService();

		},
		methods: {
			dianSwiper(d) {
				this.current = d;
			},
			selectSwiper(d) {
				this.current = d;
			},
			getService() {
				serviceIndex({
						page: 1,
						length: 100
					})
					.then(res => {
						console.log(res);
						this.list = res.data.map(item => {
							// 确保 item 中有 goods_image 属性
							if (item.goods_image) {
								// 在 goods_image 前添加域名
								item.goods_image = 'https://loan.dev88.0rui.cn' + item.goods_image;
							}
							return item;
						});
						const index = this.list.findIndex(item => item.id == this.id);
						this.current = index;
						this.getAgentList(this.list[0].id);
					})
					.catch(error => {
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						});
					})
			},
		}
	}
</script>

<style scoped>
	.select {
		border: 10rpx solid #5AC26F;
	}

	.swTop {
		text-align: center;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186, 189, 199, 0.2);
		height: 230rpx;
	}
</style>