<template>
	<view>
		<view class="bannerContainer ">
			<view class="u-skeleton" v-if="bannerList && bannerList.length > 0">
				<div class="g_h_10"></div>
				<swiper class="banner  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="m-jingang g_mt_10" v-if="serviceList && serviceList.length > 0" style="position: relative">
				<!-- {{ 'currentIndex= '+currentIndex }}
        {{ 'dx= '+dx }} -->
				<!-- previous-margin="-3px"  -->

				<swiper
					class="u-skeleton-fillet utran"
					:autoplay="false"
					next-margin="28px"
					: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: currentIndex == 0 ? swiperFirstHeight + 'px' : swiperSecondHeight + 'px',
					}"
				>
					<swiper-item style="overflow: unset">
						<!-- (imageSize*0.8 - ml) -->
						<div
							class="m-first-panel g_flex_row_start_none"
							:class="[serviceListAfter.length == 0 && serviceListBefore.length == 5 ? 'g_flex_row_between' : 'g_flex_row_start_none']"
							style="width: 100vw"
							: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: basicsSize + 'px',
								}"
							>
								<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_6"
									: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"
							>
								<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_6"
									: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_main' : 'g_bg_c'" v-for="(item, index) in 2" :key="index"></view>
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
// pages/messageDetail/index.js
export default {
	props: {},
	data() {
		return {
			bannerList: [],
			serviceList: [],
			serviceListBefore: [],
			serviceListAfter: [],
			currentStore: {},
			connectModalShow: false,
			loading: true,
			globalData: getApp().globalData,
			currentIndex: 0,

			swiperFirstHeight: "0",
			swiperSecondHeight: "0",
			basicsSize: "0",
			imageSize: 0,
			dx: 0,
			ml: 0,
			ww: 0,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	created() {
		var that = this;
		that.getBannerList();
		that.getChannelList();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	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) => {
					that.bannerList = res;
				},
				(res) => {}
			);
		},
		getChannelList() {
			let that = this;
			that.G.Get(
				that.api.get_channel_info,
				{
					classify: 1,
				},
				(res) => {
					that.serviceList = res.map((item) => ({
						...item,
						image: item.icon || "",
					}));
					that.serviceListBefore = that.serviceList.filter((item, index) => index < 5);
					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.ml = that.floorToDecimal(Number(uni.getSystemInfoSync().windowWidth / 5) - Number(uni.getSystemInfoSync().windowWidth / 5.35), 1);
					this.ww = uni.getSystemInfoSync().windowWidth;
				},
				(res) => {}
			);
		},
		floorToDecimal(num, $count = 2) {
			const factor = Math.pow(10, $count);
			return Math.floor(num * factor) / factor;
		},
		/**
		 * 拨打电话
		 */
		makePhoneCall(e) {
			var that = this;
			if (!e.mark.tel) {
				uni.showToast({
					title: "暂无联系方式",
					icon: "none",
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: e.mark.tel,
			});
		},
		handleClickNum(e) {
			let that = this;
			if (uni.getStorageSync("apply-userinfo")) {
				if (e.item.type == 1) {
					// 消息列表
					uni.switchTab({
						url: "/pages/message/index",
					});
				}
				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",
					});
				}
			} else {
				uni.navigateTo({
					url: "/root/login/index",
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage1() {},
	},
};
</script>
<style lang="less">
.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;
}
.doa {
	width: 12px;
	height: 4px;
	margin-right: 6px;
	border-radius: 6px;
	&:nth-child(2) {
		margin-right: 0;
	}
}
.doa_active {
	width: 5px;
}

.utran {
	transition: height 0.1s ease-in-out;
}
</style>
