<template>
	<view class="notice">
		<wd-navbar title="进货专区" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<view class="p30">
				<view class="home_block" @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>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import api from '@/api/index';
const active = ref(1);
const categoryId = ref<string | number>('');
const paging = ref(null);
const dataList = ref([]);
const noticeCateList = ref([]);
onLoad(() => {
	api.noticeCatePage().then((res) => {
		noticeCateList.value = res.list;
	});
});

const activeChange = (e, cateId) => {
	active.value = e;
	categoryId.value = cateId;
	paging.value.reload();
};

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

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

const back = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.notice {
	&_block {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 35rpx;
		width: 690rpx;
		height: 106rpx;
		background: #ffffff;
		border-radius: 16rpx;
		position: relative;

		font-weight: 400;
		font-size: 24rpx;
		color: #232323;
	}
}

.home_block {
	width: 690rpx;
	height: 250rpx;
	background: #ffffff;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	padding-right: 25rpx;
	margin-bottom: 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;
		}
	}
}
</style>
