<template>
	<view >
		<!-- 我的库存 -->
		<view class="content-top">
			<u-navbar :background="background" back-icon-color="#ffffff" is-fixed>
				<u-search placeholder="请输入轮胎规格" :show-action="false" v-model="keyword" style="margin-right: 26rpx;" @change="handleSearch"></u-search>
			</u-navbar>
			<u-tabs ref="tabs" :list="list" bg-color="#0094FE" active-color="#ffffff" inactive-color="#ffffff" font-size="30" :current="current" @change="handleFilterBrand"></u-tabs>
		</view>
		<view class="content-center">
			<view class="list-row u-flex list-title">
				<view class="list-left">轮胎规格</view>
				<view class="list-right">库存</view>
			</view>
			<view class="list-row u-flex">
				<view class="list-left">赛轮 12R22.5 152/149K 18PR S838</view>
				<view class="list-right">160</view>
			</view>
			<view class="list-row u-flex">
				<view class="list-left">赛轮 12R22.5 152/149K 18PR S838</view>
				<view class="list-right">160</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: "#0291FD",
				},
				keyword: "",
				current: 0,
				list: [{
					name: "全部"
				},{
					name: "黑骑士"
				},{
					name: "路极"
				},{
					name: "黑盾"
				},{
					name: "赛轮"
				}]
			}
		},
		methods: {
			handleSearch: function(v){
				console.log(v)
			},
			handleFilterBrand: function(v2){
				this.current = v2
				console.log(arguments);
				console.log(v2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-top{
		background-color: #0094FE;
		padding-bottom: 119rpx;
	}
	.content-center{
		width: 712rpx;
		margin: -106rpx auto 0 auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		height: 335rpx;
		padding: 26rpx;
		.list-row{
			justify-content: space-between;
			border-bottom: 1px solid #E8E8E8;
			padding: 32rpx 0;
			.list-right{
				color: #149EE2;
				text-decoration: underline;
			}
		}
		.list-row.list-title{
			padding-top: 0;
			font-weight: 600;
			.list-right{
				color: #4D4D4D;
				font-weight: 400;
				text-decoration: none;
			}
		}
		
	}
	
</style>
