<template>
	<view class="min-page bg-gray u-font-28 color-333">
		<view class="top bg-fff default-box-padding">
			<view class="tab">
				<my-tabs @change="tabsChange" :list="pageData.tabs.list" :defaultIndex="pageData.tabs.active"></my-tabs>
			</view>
			<view class="u-m-t-32">
				<my-search :placeholder="pageData.tabs.active===0?'搜索用户昵称/手机号/酒名':'搜索酒名' "></my-search>
			</view>
			<view class="u-m-t-24" v-if="pageData.tabs.active===0">
				<my-tags :list="pageData.status.list" @change="statusChange"></my-tags>
			</view>
		</view>


		<view class="default-box-padding">
			<template v-if="wineRecoders.list.length">
				<view v-for="(item,index) in wineRecoders.list" :key="index">
					<recoder-item></recoder-item>
				</view>
			</template>
			<template v-else>
				<my-empty text="暂没有存酒记录"></my-empty>
			</template>
			<view style="height: 200rpx;"></view>
		</view>
	</view>


	<view class="u-fixed bottom u-flex bg-fff ">
		<view class="u-flex-1 u-relative border-r">
			<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
				@tap="">存酒</my-button>
		</view>
		<view class="u-flex-1">
			<my-button bgColor="#333" color="#fff" borderRadius="0 0 0 0" plain type="primary" @tap="">添加酒品</my-button>
		</view>
		<view class="u-flex-1">
			<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="">
				<view class="u-flex">
					<uni-icons type="scan" color="#fff" size="16"></uni-icons>
					<text class="u-m-l-12">取酒</text>
				</view>
			</my-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import myTabs from '@/components/my-components/my-tabs'
	import myEmpty from '@/components/my-components/my-empty'
	import myButton from '@/components/my-components/my-button'
	import myTags from './compoents/my-tags'
	import recoderItem from './compoents/recoder-item'
	import mySearch from '@/components/my-components/my-search'
	const pageData = reactive({
		searchValue: ' ',
		tabs: {
			list: ['存酒记录', '可存酒管理'],
			active: 0
		},
		status: {
			list: ['全部', '储存中', '已取完', '已过期'],
			active: 0
		}
	})

	function tabsChange(i) {
		pageData.tabs.active = i
	}

	function statusChange(i) {
		pageData.status.active = i
	}

	const wineRecoders = reactive({
		list: [1, 3, 4, 5]
	})
</script>

<style lang="scss" scoped>
	.border-r{
		position: relative;
		&::after{
			content: '';
			display: block;
			position: absolute;
			right: 0;
			top: 14rpx;
			bottom: 14rpx;
			width: 2rpx;
			background-color: rgba(255, 255, 255, 0.19);
		}
	}
	.bottom {
		background-color: transparent;
		bottom: 100rpx;
		left: 28rpx;
		right: 28rpx;
	}

	.top {
		.tab {
			padding: 0 140rpx;
		}
	}
</style>