<template>
	<view style="width: calc(100vw - 20px);margin: 10px auto 0;border-radius: 8px;overflow: hidden;">
		<view class="bannerContainer u-skeleton g_bg_f_5 g_border_e_b">
			<view class="" v-if="false">
				<swiper class="banner g_mb_10 u-skeleton-fillet" :autoplay="true" previous-margin="-3px" next-margin="-3px" :circular="true" current="0" current-item-id interval="3000" duration="300" display-multiple-items="1" :skip-hidden-item-layout="false">
					<swiper-item class item-id v-for="(item, index) in bannerList" :key="index">
						<image
							@tap="
								handleClickNum({
									item: item,
								})
							"
							:data-path="item.path"
							class="size100 br8"
							:src="item.icon"
							mode="aspectFit|aspectFill|widthFix"
						/>
					</swiper-item>
				</swiper>
			</view>
			<view class="g_positino_rela g_bg_f" v-if="serviceListBefore.length > 0">
				<!-- :style="{
						height: currentIndex == 0 ? swiperFirstHeight + 'px' : swiperSecondHeight + 'px',
					next-margin="28px"
					}" -->
				<swiper class="u-skeleton-fillet utran" 
								:autoplay="false" :circular="false" :current="currentIndex" 
								current-item-id interval="3000" duration="300" 
								display-multiple-items="1" :skip-hidden-item-layout="false" 
								@transition="handleTransition" @animationfinish="handleAnimationFinish"
								:style="{
									height: serviceListBefore && serviceListBefore.length <= 5 ? '86px' : '150px',
								}"
				>
					<swiper-item style="overflow: unset" class="g_flex_column_center">
						<!-- (imageSize*0.8 - ml) -->
						<div
							class="m-first-panel g_flex_row_start"
							style=""
							:style="{
								transform: 'translateX(' + (currentIndex == 1 && dx <= 0 ? 0 : '0') + 'px)',
							}"
						>
							<div
								v-for="(item, index) in serviceListBefore"
								:key="index"
								@click="
									handleClickNum({
										item: item,
									})
								"
								:style="{
									width: '20%',
								}"
								hover-class="thover"
							>
								<div
									class="g_flex_c"
									:style="{
										width: imageSize + 'px',
										height: imageSize + 'px',
										overflow: 'hidden',
										margin: '0 auto',
									}"
								>
									<img
										:src="item.icon"
										:style="{
											width: imageSize * 0.8 + 'px',
											height: imageSize * 0.8 + 'px',
										}"
									/>
								</div>
								<view
									class="g_ell_1 g_fs_14 g_c_3"
									:style="{
										width: basicsSize + 'px',
										height: '20px',
										padding: '0px 0 10px',
										'text-align': 'center',
									}"
									>{{ item.name }}</view
								>
							</div>
						</div>
					</swiper-item>
					<swiper-item v-if="serviceListAfter && serviceListAfter.length > 0" style="overflow: unset">
						<!-- (imageSize*0.8 - ml)  -->
						<!-- 'margin-left': currentIndex == 0 ? '0' : (ml + 'px') -->
						<div
							class="m-second-panel g_flex_row_start"
							style="width: 100vw; column-gap: 5.5px"
							:style="{
								transform: 'translateX(-' + (currentIndex == 0 && dx >= 0 ? 0 : '0') + 'px)',
							}"
						>
							<div
								v-for="(item, index) in serviceListAfter"
								:key="index"
								@click="
									handleClickNum({
										item: item,
									})
								"
								:style="{
									width: basicsSize + 'px',
								}"
								class="second-item"
								hover-class="thover"
							>
								<div
									class="g_flex_c"
									:style="{
										width: imageSize + 'px',
										height: imageSize + 'px',
										overflow: 'hidden',
										margin: '0 auto',
									}"
								>
									<img
										:src="item.icon"
										:style="{
											width: imageSize * 0.69 + 'px',
											height: imageSize * 0.69 + 'px',
										}"
									/>
								</div>
								<view
									class="g_ell_1 g_fs_14 g_c_3"
									:style="{
										width: basicsSize + 'px',
										height: '20px',
										padding: '0px 0 10px',
										'text-align': 'center',
									}"
									>{{ item.name }}</view
								>
							</div>
						</div>
					</swiper-item>
				</swiper>
				<div class="mdoc" v-if="serviceListAfter && serviceListAfter.length > 0" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)">
					<view class="g_w_all g_flex_row_center">
						<view class="doa" :class="currentIndex == index ? 'doa_active' : 'g_bg_c'" :style="currentIndex == index ? {'background-color': themeColor} : {}" v-for="(item, index) in 2" :key="index"></view>
					</view>
				</div>
				<!-- <g-panel-card-num :list="serviceList" :loading="loading" class="" :speed="1" cusType="image" :height="44" :num="serviceList.length" :cusTitle="false" @clickItem="handleClickNum" /> -->
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#ededed"></u-skeleton>
		<u-popup v-model="connectModalShow" mode="center" :closeable="true" border-radius="16" width="80%" :mask-close-able="true">
			<div class="g_text_c">
				<div class="g_pt_32 g_fw_600 g_pb_24 g_fs_18">联系我们</div>
				<div class="g_pb_4 g_fs_14 g_c_6">门店联系人: {{ currentStore.contactUserName }}</div>
				<div class="g_pb_32 g_fs_14 g_c_6" @click.stop="makePhoneCall" :mark:tel="currentStore.contactTel">联系电话: {{ currentStore.splitPhone }}</div>
				<image class="g_w_184 g_h_184" :src="currentStore.contactWechatQrcode" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" show-menu-by-longpress> </image>
				<div class="g_mt_16 g_fs_14 g_pb_32 g_fw_600">长按识别二维码</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
const app = getApp();
// pages/messageDetail/index.js
export default {
	props: {},
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			userinfo: uni.getStorageSync("apply-userinfo") || {},
			bannerList: [],
			serviceList: [],
			currentStore: {},
			connectModalShow: false,
			loading: true,

			serviceListBefore: [],
			serviceListAfter: [],
			currentIndex: 0,
			swiperFirstHeight: "0",
			swiperSecondHeight: "0",
			basicsSize: "0",
			imageSize: 0,
			dx: 0,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	created() {
		// var that = this;
		// that.getBannerList();
		// that.getChannelList();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		this.themeColor = getApp().globalData.themeColor;
		var that = this;
		// that.userinfo = uni.getStorageSync("apply-userinfo") || {};
		that.getBannerList();
		that.getChannelList();
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	mounted() {
		var that = this;
		that.$nextTick(() => {
			setTimeout(() => {
				that.getBannerList();
				that.getChannelList();
			}, 100);
		});
	},
	methods: {
		handleTransition(e) {
			this.dx = e.detail.dx;
		},
		handleAnimationFinish(e) {
			this.dx = 0;
			this.currentIndex = e.detail.current;
		},
		/**
		 * 获取banner信息
		 */
		getBannerList() {
			let that = this;
			that.G.Get(
				that.api.get_channel_info,
				{
					classify: 2,
				},
				(res) => {
					// console.log("轮播列表：", res);
					that.bannerList = res;
				},
				(res) => {
					// console.log(res);
				},
			);
		},
		getChannelList() {
			let that = this,
				_auth = false;
			that.G.Get(
				that.api.get_channel_info,
				{
					classify: 1,
				},
				(res) => {
					// console.log("服务地址：", that.api.get_channel_info);

					// console.log("服务地址：", that.api.get_channel_info);
					// console.log("resresresrse", res);
					// console.log("resresresrse", res);

					//     let status = true;
					// if (uni.getStorageSync("agencyInfo")) {
					// 	that.G.Get(
					// 		that.api.get_supplier_info,
					// 		{
					// 			agencyId: uni.getStorageSync("agencyInfo") ? uni.getStorageSync("agencyInfo").id : "",
					// 		},
					// 		(info_res) => {
					// 			if (info_res) {
					// 				// 判断是否全部认证过以控制入驻平台是否显示
					// 				if (info_res.realNameAuth == 2 && info_res.certificationAuth == 2) {
					// 					_auth = true;
					// 				} else {
					// 					_auth = false;
					// 				}
					// 			}
					// 		}
					// 	);
					// }

					//       let list = res.map((item) => {
					// 	return {
					// 		name: item.name,
					// 		path: item.url,
					// 		image: item.icon,
					// 		...item,
					// 		icon: "",
					// 	};
					// });
					// list = list.filter((item) => {
					// 	if (_auth || that.userinfo.agencyStatus != 1) {
					// 		if (_auth) {
					// 			return item.type != 16;
					// 		} else if (that.userinfo.agencyStatus != 1) {
					// 			return item.type != 15;
					// 		}
					// 	} else {
					// 		return true;
					// 	}
					// });
					// that.serviceList = list;
					// that.loading = false;
					// // console.log("serviceList", that.serviceList);

					new Promise((resolve) => {
						let status = true;
						if (uni.getStorageSync("agencyInfo") && uni.getStorageSync("apply-token")) {
							this.G.Get(
								this.api.get_supplier_info,
								{
									agencyId: uni.getStorageSync("agencyInfo") ? uni.getStorageSync("agencyInfo").id : "",
								},
								(info_res) => {
									if (info_res) {
										// 判断是否全部认证过以控制入驻平台是否显示
										if (info_res.realNameAuth == 2 && info_res.certificationAuth == 2) {
											_auth = true;
										} else {
											_auth = false;
										}
										resolve(status);
									}
								},
							);
						} else {
							resolve(status);
						}
					}).then((status) => {
						let list = res.map((item) => {
							return {
								...item,
								image: item.icon || "",
								// name: item.name,
								// path: item.url,
								// image: item.icon,
								// ...item,
								// icon: "",
							};
						});
						list = list.filter((item) => {
							if (_auth || that.userinfo.agencyStatus != 1) {
								if (_auth) {
									return item.type != 16;
								} else if (that.userinfo.agencyStatus != 1) {
									return item.type != 15;
								}
							} else {
								return true;
							}
						});
						that.serviceList = list;
						// that.serviceList = list.map((item) => ({
						// 	...item,
						// 	image: item.icon || "",
						// }));
						that.serviceListBefore = that.serviceList.filter((item, index) => index < 11);
						// that.serviceListAfter = that.serviceList.filter((item, index) => index >= 5);

						that.basicsSize = that.floorToDecimal(Number(uni.getSystemInfoSync().windowWidth / 5.35));
						that.imageSize = that.floorToDecimal(Number(that.basicsSize * 1 - 20));

						that.swiperFirstHeight = that.floorToDecimal(Number(that.basicsSize * 1 + 14));
						// if (that.serviceListAfter.length > 0) {
						// 	that.swiperSecondHeight = that.floorToDecimal(Number(Math.ceil(that.serviceListAfter.length / 5) * (that.basicsSize * 1 + 14)));
						// }
						that.loading = false;
						// console.log("serviceList", that.serviceList);
					});
				},
				(res) => {
					// console.log(res);
				},
			);
		},
		floorToDecimal(num, $count = 2) {
			const factor = Math.pow(10, $count);
			return Math.floor(num * factor) / factor;
		},
		handleClickNum(e) {
			let that = this;
			// console.log("我的服务：", e);
			let isLogin = uni.getStorageSync("apply-userinfo") ? true : false;
			if (!isLogin && e.item.type == 16) {
				uni.navigateTo({
					url: "/root/person/loginIndex",
				});
				return false;
			}
			if (e.item.type == 1) {
				// 消息列表
				uni.switchTab({
					url: "/pages/message/indexcopy",
				});
			}
			if (e.item.type == 2) {
				uni.navigateTo({
					url: `/root/detail/message?id=${e.item.params.ids}`,
				});
			}
			if (e.item.type == 3) {
				// 自有职位
				uni.navigateTo({
					url: `/root/other/channelPage?jobtype=2`,
				});
			}
			if (e.item.type == 4) {
				// 全部职位
				uni.navigateTo({
					url: `/root/other/channelPage`,
				});
			}
			if (e.item.type == 5) {
				// 筛选职位
				uni.navigateTo({
					url: `/root/other/channelPage?manage=${JSON.stringify(e.item.params)}`,
				});
			}
			if (e.item.type == 6) {
				// 特定职位
				uni.navigateTo({
					url: `/root/other/channelPage?shareJobIds=${e.item.params.ids}&from=mine`,
				});
			}
			if (e.item.type == 7) {
				if (!e.item.url) {
					uni.showToast({
						title: "小程序暂不支持",
						icon: "none",
					});
				} else {
					uni.navigateTo({
						url: e.item.url,
					});
				}
			}
			if (e.item.type == 8) {
				// 主推职位(列表)
				uni.navigateTo({
					url: "/root/other/channelPage?istop=1",
				});
			}
			if (e.item.type == 9) {
				// 按工价排序
				uni.navigateTo({
					url: "/root/other/channelPage?sortTag=1",
				});
			}
			if (e.item.type == 11) {
				// 按时间排序
				uni.navigateTo({
					url: "/root/other/channelPage?sortTag=0",
				});
			}
			if (e.item.type == 10) {
				// 按距离排序
				uni.navigateTo({
					url: "/root/other/channelPage?sortTag=2",
				});
			}
			if (e.item.type == 12) {
				// 批量分享
				uni.navigateTo({
					url: "/root/detail/shareJob",
				});
			}
			if (e.item.type == 13) {
				// 按佣金排序
				uni.navigateTo({
					url: "/root/other/channelPage?sortTag=3",
				});
			}
			if (e.item.type == 14) {
				// 甄选职位
				uni.navigateTo({
					url: "/root/other/channelPage?picked=1",
				});
			}
			if (e.item.type == 15) {
				// 今日发单
				uni.navigateTo({
					url: "/root/detail/todayRecord",
				});
			}
			if (e.item.type == 16) {
				// 入驻平台
				uni.navigateTo({
					url: "/root/other/tobeAgencyChoose",
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage1() {},
	},
};
</script>
<style>
.bannerContainer {
	/* background-color: #f5f5f5; */
	/* padding-top: 10px; */
}

.banner {
	width: calc(100vw - 20px);
	height: 70px;
	margin: 0 10px 10px;
	border-radius: 8px;
	overflow: hidden;
	transform: translateY(0);

	/* background-color: #fff; */
}

.banner swiper-item {
	width: 100%;
	box-sizing: border-box;
	padding: 0 3px;
	text-align: center;
}

.size100 {
	width: 100%;
	height: 100%;
}

.br8 {
	border-radius: 8px;
}
.utran {
	transition: height 0.1s ease-in-out;
}
/* @import '../../'; */
</style>
