<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars color="primary" title="衣橱" :shadow="0" :showback="false">
			<template #right>
				<view class="pl-24">
					<tm-button theme="indigo" size="s" @click="ruku">入库</tm-button>
				</view>
			</template>
			
		</tm-menubars>
		<tm-tabs @change="change" :fllowTheme="false" bg-color="orange" color="yellow"  v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
		<tm-sheet :shadow="24" :padding="[24,32]">
			<tm-album @click="dapei" :max="4" :gutter="10" :round="0" :grid="3" :list="list2"></tm-album>
		</tm-sheet>
		<view class="flex fulled-height" >
			<view class="fulled-height " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : 'grey-lighten-5'">
				<tm-sliderNav :fontSize="24"  @change="changece"  color="blue" :round="0" :width="120" :list="list3" rang-key="text"></tm-sliderNav>
			</view>
			<view class="fulled-height "  :class="$tm.vx.state().tmVuetify.black ? 'black ' : 'white'" style="width:calc(100% - 160rpx);">
				<tm-album @click="xiangqing" class="shangright" :max="6" :grid="3" :list="list4"></tm-album>
			</view>
		</view>
	</view>
</template>	
<script>
	
export default {
	data() {
		return {
			activeIndex:0,
			list:[ '爸爸','媳妇','儿子'],
			active: 2,
			list2:[{
				src:'https://picsum.photos/300?k=0',
				text:'推荐穿搭1',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=1',
				text:'推荐穿搭2',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=2',
				text:'推荐穿搭3',
				type:'tiao'
			}],
			list3:[
				{text:'苏州'},
				{text:'北京'},
				{text:'广东'},
				{text:'江西',dot:8},
				{text:'深圳'},
			],
			list4:[{
				src:'https://picsum.photos/300?k=0',
				text:'标题0',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=1',
				text:'标题1',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=2',
				text:'标题2',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=1',
				text:'标题1',
				type:'tiao'
			},{
				src:'https://picsum.photos/300?k=2',
				text:'标题2',
				type:'tiao'
			}],
		};
	},
	onLoad() {
		
	},
	created() {

	},
	methods: {
		change(e){
			uni.$tm.toast(`你选中了${e}`);
		},
		changece(e){
			uni.$tm.toast(`您选中了:${e}`)
		},
		dapei(item){
			console.log(item)
		},
		xiangqing(item){
			console.log(item)
		},
		ruku(){
			uni.navigateTo({
				url: "/pages/putstorage/index",
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ uni-scroll-view{
		height: auto !important;
	}
	.shangright{
		padding: 10px;
	}
</style>
