<template>
	<view class="home">
		<!-- <view class="my-capsule-like-button" :style="capsuleButtonStyle">自定义按钮</view> -->
		<view style="width: 100%; height: 582rpx" class="home_top">
			<image src="/static/homeBanner.png" style="width: 750rpx; height: 582rpx; position: absolute; top: 0; left: 0; z-index: -1"></image>
			<wd-navbar :bordered="false" custom-style="background-color: transparent !important;" safeAreaInsetTop>
				<template #left>
					<view style="display: flex; align-items: center">
						<image
							src="/static/logo.png"
							style="width: 96rpx; height: 96rpx; margin-right: 25rpx; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%"
						></image>
						<view style="color: #fff; font-size: 40rpx; font-weight: bold">苗草古方</view>
					</view>
				</template>
			</wd-navbar>
			<view class="p30" style="display: flex; align-items: center; justify-content: space-between">
				<view style="background-color: #fff; width: 324rpx; border-radius: 20rpx; overflow: hidden" @click="toPrefecture">
					<wd-swiper customItemClass="bannerRadius" height="292rpx" :list="['/static/homeY.png']" autoplay v-model:current="current">
						<template #indicator="{ current, total }">
							<!-- 						<view style="position: absolute; bottom: -60rpx; right: 24rpx; display: flex; align-items: center; background: #cbcbcb; border-radius: 14rpx">
								<view
									v-for="i in total"
									:key="i"
									style="width: 24rpx; height: 8rpx; border-radius: 14rpx"
									:style="{ background: current + 1 == i ? '#8FAB7F' : '#cbcbcb' }"
								></view>
							</view> -->
							<!-- <view class="custom-insdicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view> -->
						</template>
					</wd-swiper>
					<view style="height: 72rpx; display: flex; align-items: center; padding: 20rpx; font-size: 28rpx; font-weight: bold">进货专区</view>
				</view>
				<view class="home_top_block">
					<view class="home_top_block_view" style="color: #776926" @click="navTo('/pages/equity/equity', true)">
						<image src="/static/hui.png"></image>
						<view>
							<view style="font-size: 32rpx; font-weight: bold">权益包</view>
							<view style="font-size: 24rpx; margin-top: 10rpx">购买权益包</view>
							<view style="font-size: 24rpx">至高享七折优惠</view>
						</view>
					</view>
					<view class="home_top_block_view" style="background: #eef4f1; color: #175b39" @click="openCode">
						<image src="/static/yao.png"></image>
						<view>
							<view style="font-size: 32rpx; font-weight: bold">推荐好友</view>
							<view style="font-size: 24rpx; margin-top: 10rpx">推荐好友加盟</view>
							<view style="font-size: 24rpx">边拿奖励边赚钱</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p30">
			<wd-swiper :list="swiperList" value-key="image" autoplay v-model:current="current"></wd-swiper>
			<view class="mt30" @click="toNotice">
				<wd-notice-bar color="#90B77B" background-color="#E2ECDC">
					<view slot="prefix">
						<image src="/static/warn.png" style="width: 60rpx; height: 60rpx"></image>
					</view>
					<view style="font-size: 28rpx">{{ noticeList.content }}</view>
				</wd-notice-bar>
			</view>

			<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
				<view class="home_block mt30" @click="toGoods(item.id)" v-for="(item, index) in dataList" :key="index">
					<image class="home_block_left" :src="item.cover"></image>
					<view class="home_block_right">
						<view class="home_block_right_title">{{ item.name }}</view>
						<view class="home_block_right_info">{{ item.specs }}</view>
						<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 25rpx">
							<view style="font-size: 36rpx; font-weight: bold; color: #ff2929">￥{{ item.currentPrice }}</view>
							<view class="home_block_right_button">下单</view>
						</view>
					</view>
				</view>
			</z-paging>

			<!-- 			<view>
				
				
				
				
			</view> -->
		</view>

		<uni-popup ref="popup" type="center" border-radius="16rpx">
			<view class="shareBlock">
				<view style="width: 100%; text-align: right"><image @click="$refs.popup.close()" src="/static/icons/cha.png" class="shareBlock_close"></image></view>
				<image class="shareBlock_code" :src="userInfo.inviteCodeImg"></image>
				<view class="shareBlock_info">打开微信扫描二维码，注册时输入邀请码</view>
				<view class="shareBlock_codeInfo">
					<view class="shareBlock_codeInfo_left">
						邀请码：
						<text style="text-decoration: underline">{{ userInfo.inviteCode }}</text>
					</view>
					<view class="shareBlock_codeInfo_right" @click="copy(userInfo.inviteCode)">点击复制</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { Store } from '@/store';
import { copy } from '@/utils/fun';
import api from '@/api/index';

const store = Store();
const userInfo = computed(() => store.userInfo || {});
const popup = ref();
const current = ref<number>(0);
const showShare = ref(false);
const swiperList = ref([]);
const noticeList = ref({
	content: ''
});
const list = ref([]);

const paging = ref(null);
const dataList = ref([]);
import { useNav } from '@/hooks/useNav';
const { navTo } = useNav();

const queryList = (pageNo, pageSize) => {
	api.goodsPage({ pageNo, pageSize,recommended:1 })
		.then((res: any) => {
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

onLoad(() => {
	api.banner({
		imageAddress: 1
	}).then((res) => {
		swiperList.value = res.list;
	});

	api.noticePage({ type: 1 }).then((res) => {
		if (res.list != 0) {
			noticeList.value = res.list[0];
		}
	});
});

const openCode = async () => {
	await store.usersGetInfo();
	popup.value.open();
};

const toGoods = (e) => {
	uni.navigateTo({
		url: `/pages/goods/goods?id=${e}`
	});
};

const toPrefecture = () => {
	uni.navigateTo({
		url: '/pages/goods/prefecture'
	});
};

const toEquity = () => {
	uni.navigateTo({
		url: '/pages/equity/equity'
	});
};

const toNotice = () => {
	uni.navigateTo({
		url: '/pages/notice/notice'
	});
};
</script>

<style lang="scss" scoped>
.home {
	&_top {
		--wot-swiper-radius: 0;

		&_block {
			height: 364rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&_view {
				width: 346rpx;
				height: 170rpx;
				background: #f7f4e5;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding: 25rpx;
				display: flex;
				align-items: center;
				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 24rpx;
				}
			}
		}
	}

	.custom-indicator {
	}

	&_block {
		width: 690rpx;
		height: 250rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-right: 25rpx;
		&_left {
			width: 250rpx;
			height: 250rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 25rpx;
		}
		&_right {
			flex: 1;
			&_title {
				font-weight: 600;
				font-size: 28rpx;
				color: #232323;
			}
			&_info {
				font-weight: 400;
				font-size: 24rpx;
				color: #232323;
				margin-top: 25rpx;
			}
			&_button {
				width: 128rpx;
				height: 48rpx;
				background: #ff2a2a;
				box-shadow: 0rpx 2rpx 4rpx 2rpx #dbdbdb;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 800;
				font-size: 20rpx;
				color: #ffffff;
			}
		}
	}
}

.shareBlock {
	margin: auto;
	width: 650rpx;
	height: 688rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	&_close {
		width: 68rpx;
		height: 68rpx;
	}
	&_code {
		width: 392rpx;
		height: 392rpx;
	}
	&_info {
		font-size: 24rpx;
		color: #cccccc;
		margin: 24rpx 0;
	}
	&_codeInfo {
		display: flex;
		align-items: center;
		&_left {
			font-weight: bold;
			font-size: 32rpx;
			color: #232323;
		}
		&_right {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
</style>
