<template>
	<view style="position: relative;">
		<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>
				<tn-swiper :autoplay="false" @click="openUrl('/pages/index/info?id='+list[current].id)" height="100vh"
					indicatorPosition="bottomCenter" imageMode="widthFix" name="goods_image" :list="list" mode="rect"
					@change="selectSwiper"></tn-swiper>
			</view>
		</view>
		<view id="phoneClass" :style="{padding: '30rpx',width:w,position:'absolute',top:'950rpx'}">
			<view style="border-radius: 30rpx;background-color: #ffffff;padding: 30rpx;">
				<view style="margin-bottom: 30rpx;">
					<view style="color: #888888;font-size: 24rpx;text-align: center;">{{selectName}}产品专员汇总表</view>
				</view>
				<view v-for="item in userList" @click="callPhone(item)"
					style="background: #F1F2F8;border-radius: 15rpx;padding:20rpx 30rpx;margin-bottom: 30rpx;">
					<view style="font-size: 32rpx;color: #181818;font-weight: bold;">{{item.name}}</view>
					<view style="margin-top: 10rpx;">
						<text>{{item.agency}}金融服务站</text>
						<text class="tn-icon-title" style="color: #BABDC7;"></text>
						<text style="color: #BABDC7;">电话：</text>
						<text style="color: #666666;">{{item.contact_mobile}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		serviceIndex,
		agentList
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				list: [],
				userList: [],
				current: 0,
				selectName: '',
				classHegiht: 0,
				w: '100%'
			}
		},
		onLoad() {
			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.getService();
		},
		methods: {
			getPhoneClassHeight() {
				var that = this;
				uni.createSelectorQuery().select('#phoneClass').boundingClientRect(data => {
					console.log(data);
					that.classHegiht = data.height;
				}).exec()
			},
			callPhone(item) {
				uni.makePhoneCall({
					phoneNumber: item.contact_mobile
				});
			},
			selectSwiper(d) {
				this.current = d;
				var info = this.list[d];
				console.log(info);
				this.selectName = info.goods_name;
				this.getAgentList(info.id);
			},
			getAgentList(service_id) {
				agentList({
						service_id: service_id,
					})
					.then(res => {
						console.log(res);
						this.userList = res.data;
					})
					.catch(error => {
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						});
					})
			},
			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;
						});
						this.selectName = this.list[0].goods_name;
						this.getAgentList(this.list[0].id);
						setTimeout(() => {
							this.getPhoneClassHeight();
						}, 500)
					})
					.catch(error => {
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						});
					})
			},
			openUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>

</style>