<template>
	<view class="content">
		<view class="goodsBox p-2">
			<yList ref="yListRef" :apiObj="rechargeApi.recharge_list" :params="{ ...params }">
				<template #default="{ list }">
					<view>
						<view v-for="item of list" class="goods">
							<wd-card type="rectangle">
								<template #title>
									<view class="title">

										<view>
											<view>ID：<text class="text-black">{{ item.id || 0 }}</text></view>
										</view>

										<view class="title-tip">
											<span style="font-size: 24rpx;margin-left: 8px;">订单号：{{ item.order_no }}</span>
										</view>
									</view>
								</template>

								<view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
									<view>充值用户：<text class="text-black">{{ item?.user?.nickname }}</text></view>
									<view>充值时间：<text class="text-black">{{ item?.create_time }}</text></view>
								</view>

								<template #footer>
									<!-- <view class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
										<view>
											售后状态:
											
										</view>
									</view> -->

									<view class="flex w-full">

										<view class="bg-gray-50 p-2 mb-2 flex flex-1 justify-between" style="font-size: 22rpx;">
											<view>支付金额：<text class="text-red-600">￥ {{ item.pay_price || 0 }}</text></view>
											<view>赠送金额：<text class="text-red-600">￥ {{ item.gift_money || 0 }}</text></view>
										</view>

									</view>
								</template>
							</wd-card>
						</view>
					</view>
				</template>
			</yList>
		</view>
		<wd-toast />

	</view>
</template>

<script setup>
import rechargeApi from '@/api/store/recharge.js';
import yList from "/components/yList/index.vue";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni';
import { ref } from 'vue';


const params = ref({
	keywords: "",
	coupon_type: 0,
});

const yListRef = ref(null);

const search = ({ value }) => {
	yListRef.value.upData({
		keywords: value,
		coupon_type: params.value.coupon_type
	});
};

const searchType = ref('券名');
const popover = ref(false);

const status = ref([
	{ content: '全部' },
	{ content: '商品' },
	{ content: '分类' },
	{ content: '当面付' },
]);

const menu = ref([
	{ content: '券名' },
	{ content: '券金额' },
]);

/**
 * 切换搜索类型
 * @param {Object} item - 切换的项
 */
function changeSearchType({ item, index }) {
	if (searchType.value == '券名') {
		yListRef.value.upData({
			name: params.value.keywords,
		});
	} else if (searchType.value == '券金额') {
		yListRef.value.upData({
			price: params.value.keywords
		});
	} else {
		yListRef.value.upData({});
	}
}
</script>

<style lang="scss" scoped>
.search-type {
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0 8px 0 10px;
	font-size: 22rpx;
	color: rgba(0, 0, 0, .45);
}

.search-type::after {
	position: absolute;
	content: '';
	width: 1px;
	right: 0;
	top: 5px;
	bottom: 5px;
	background: rgba(0, 0, 0, 0.25);
}

.search-type {
	:deep(.icon-arrow) {
		display: inline-block;
		font-size: 20px;
		vertical-align: middle;
	}
}

.goodsBox {

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
}
</style>
