<template>
	<view class="box">
		<up-search v-model="query.shopName" @search="getData" @custom="getData"></up-search>
		<view class="u-m-t-32">
			<view class="u-flex list-item" v-for="(item,index) in list" :key="index">
				<up-avatar size="84rpx" shape="square" round="16rpx" :src="item.logo"></up-avatar>
				<view class="u-p-l-8 u-flex-1 u-flex u-flex-between">
					<view>
						<view class="color-333 font-14">{{item.shopName}}</view>
						<view class="color-666 font-12 u-m-t-8">可用积分：{{item.accountPoints}}</view>
					</view>
					<view class="color-1 font-14">
						<view class="" @click="toDetail(item)">积分明细</view>
						<view class="u-m-t-8" @click="toDuihuan(item)">去兑换</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		pointsShopList
	} from '@/common/api/market/points.js'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';

	const list = ref([])
	const query = reactive({
		shopName: ''
	})
	async function getData() {
		const res = await pointsShopList(query)
		if (res) {
			list.value = res || []
		}
	}

	function toDuihuan(item) {
		// uni.showToast({
		// 	title: '待开放！',
		// 	icon: 'none'
		// })
		uni.navigateTo({
			url:'/scoreShop/index/index?shopId=' + item.shopId+'&id='+item.id
		})
	}

	function toDetail(item) {
		uni.navigateTo({
			url: '/pages/user/member/billDetails?type=2&shopId=' + item.shopId+'&id='+item.id
		})
	}
	onMounted(getData)
</script>

<style lang="scss" scoped>
	.box {
		padding: 32rpx 28rpx;
	}

	.color-1 {
		color: #FF6300;
	}

	.list-item {
		padding: 36rpx 0;
		border-bottom: 1px solid #EDEDED;
	}
</style>