<template>
	<view class="page flex-col">
		<view class="section_1 flex-col">
			<view class="block_2 flex-col">
				<view class="swiper">
					<u-swiper height="322rpx" :list="list" keyName="swiperPicture" :autoplay="true" circular
						radius="20"></u-swiper>
				</view>
			</view>
		</view>

		<view class="zhongji1">
			<view class="z-left" @click="getdetils"></view>
			<!-- 	<button class="z-right" open-type="contact"></button> -->
			<view class="z-right" @click="getkefu()"></view>
			<image :src="imagesUrl+'bxWx.png'">

		</view>

		<!-- 	<view class="v-tz" >
			<view class="v-img">
				<image :src="imagesUrl+'repairlight.png'" mode=""></image>
			</view>
			<text style="font-size: 16px; font-weight: bold;">买保险需要提供什么资料.......</text>
		</view> -->


		<!-- 	< open-type="contact" class="bai-yuan" >
				<view style="line-height: 30px;">
					<uni-icons type="person" size="32" color="#3579D5" ></uni-icons>	
					<view class="">客服</view>
				</view>
			
			</> -->

		<view class="goodList">
			<view class="goods" v-for="item,index in insuranceGoods" :key="index" @click="goInsurance(item.id)">
				<u--image class="goodImg" radius="10rpx" width="300rpx" height="180rpx" :showLoading="false"
					:src="baseUrl + item.image"></u--image>
				<view class="goodTitle flex-col justify-between" style="height: 180rpx;">
					<text style=" width: 180px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
						{{ item.title }}
					</text>
					<view class="flex-col justify-between">
						<view class="flex-row justify-between" style="width: 375rpx;">
							<!-- <view>
								<text class="text_5" style="margin-right: 5rpx;">{{ item.price }}</text>
								<text class="text_4">元</text>
							</view> -->
							<view class="text-wrapper_8 padding-left-xs  padding-right-xs flex-row justify-between">
								<text class="text_23">查看详情</text>
							</view>

						</view>
					</view>

				</view>
			</view>
		</view>
		<u-loadmore :status="status" line fontSize="22rpx" />
		<view v-show="insuranceGoods.length===0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" textSize="22rpx" iconSize="120rpx">
			</u-empty>
		</view>
		<view class="flex-col padding text-lg text-bold text-black bg-white radius margin">
			{{ insuranceText }}
		</view>
		<view class="zhongji">
			<image :src="imagesUrl+'baoxiantel.png'" @click="call">
				<view class="baizi">{{insuranceTel}}</view>
		</view>
		<image class="image_7" @click="govip()" :src="imagesUrl+'user_level.png'" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				constants: {},
				list: [],
				urls: [
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg'
				],
				insuranceGoods: [],
				insuranceTel: null,
				isLoadMore: false, //是否加载中
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				status: 'loadmore',
				insuranceText: ''
			};
		},
		onLoad() {
			this.getSwpier()
			this.getConfig()
			this.getInsuranceGoods()
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.status = 'loading';
				this.isLoadMore = true
				this.params.pageNum++
				this.getInsuranceGoods()
			}
		},
		methods: {
			getkefu() {
				console.log('执行');
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc16d3cdc013021c5d'
					},
					corpId: 'ww2a4d01f86ea7ad90',
					success(res) {
						console.log(res);
					}
				})
			},
			govip() {
				uni.navigateTo({
					url: '/pages/tabBar/mine/rules'
				})
			},
			getdetils() {
				uni.navigateTo({
					url: '/subInsurancePages/family/family'
				})
			},
			// 获取轮播图
			async getSwpier() {
				const res = await this.$request({
					url: '/system/swiper/listWx',
					data: {
						moudleName: '保险'
					}
				})
				for (let i = 0; i < res.rows.length; i++) {
					res.rows[i].swiperPicture = getApp().globalData.config.baseUrl + res.rows[i].swiperPicture;
					res.rows[i].title = res.rows[i].swiperName
				}
				this.list = res.rows
				console.log(res.rows);
			},

			// 获取商品列表
			async getInsuranceGoods() {
				const res = await this.$request({
					url: '/system/insuranceGoods/listWx',
					data: this.params
				})
				this.insuranceGoods = this.insuranceGoods.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}
				console.log(1, res);
			},


			// 获取配置:电话
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				console.log(res.rows[0]);
				let num = res.rows[0].insuranceTel
				this.insuranceTel = this.addHyphenEveryThreeChars(num)

				this.insuranceText = res.rows[0].insuranceText
			},
			addHyphenEveryThreeChars(str) {
				let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
				return modifiedPhoneNumber;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.insuranceTel.toString(), //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
			goInsurance(id) {
				this.$tab.navigateTo(`/subInsurancePages/insuranceInfo/insuranceInfo?id=${id}`)
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import './index.rpx.css';

	button::after {
		border: none;
	}

	.button-hover {
		background: yellow;
	}

	.bai-yuan {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: white;
		position: fixed;
		bottom: 60px;
		right: 20px;
		z-index: 99;
		overflow: hidden;
		padding: 0px;
	}

	.goodList {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 700rpx;
		margin: 0 auto;

		.goods {
			width: 100%;
			margin: 20rpx 0;
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #dcdfe6;

			.goodTitle {
				margin-left: 20rpx;
				font-size: 38rpx;
				font-weight: bold;
				height: 68rpx;
			}

			.goodImg {
				border-radius: 10px;
				width: 203rpx;
				height: 172rpx;
				margin: 32rpx 0 0 50rpx;
			}
		}
	}

	.v-tz {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.v-img {
		width: 36rpx;
		height: 27rpx;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zhongji1 {
		width: 95%;
		height: 130px;
		margin: 10px auto;
		position: relative;

		image {
			width: 100% !important;
			height: 100%;

		}
	}

	.z-left {
		position: absolute;
		height: 130px;
		width: 50%;
		left: 0px;
		z-index: 9999999;
	}

	.z-right {
		position: absolute;
		height: 130px;
		width: 50%;
		right: 0px;

		z-index: 9999999;
	}

	.zhongji {
		width: 95%;
		height: 130px;
		margin: 10px auto;
		position: relative;

		image {
			width: 100% !important;
			height: 100%;

		}
	}

	.xindetu {
		width: 95%;
		height: 204rpx;
		margin: 0 auto;
	}

	.baizi {
		width: 100%;
		text-align: center;
		position: absolute;
		transform: translate(-50%);
		left: 50%;
		top: 35px;
		// left: 25%;
		font-size: 26px;
		text-shadow: 0px 0px 7px #42464C;
		font-family: HuXiaoBo-NanShen;
		font-weight: 600;
		z-index: 999;
		color: white;
		font-style: italic
	}
</style>