<template>
	<view class="content-flex" v-if="!loding">
		<scroll-view class="stair" scroll-y>
			<view class="stair-item" :class="{'show': stairIndex == index}" v-for="(item, index) in category" :key="index" @click="stairIndex = index">{{item.name}}</view>
			<view class="ios-bottom"></view>
		</scroll-view>
		<scroll-view class="second" scroll-y>
			<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="onCategory(item.category_id)">
				{{item.name}}<uni-icons class="arrow-icon" type="arrowright" color="#999" size="14"></uni-icons>
			</view>
			<view class="ios-bottom"></view>
		</scroll-view>
	</view>
</template>

<script>
	import { managesCategory } from '@/apis/interfaces/goods'
	export default {
		data() {
			return {
				loding		: true,
				category	: [],
				stairIndex	: 0,
				secondIndex : 0
			};
		},
		created() {
			managesCategory().then(res => {
				this.loding   = false
				this.category = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods:{
			// 选择分类
			onCategory(cid){
				this.$Router.push({name: 'goodsAdd', params: {cid, id: this.category[this.stairIndex].category_id}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-flex{
		background-color: white;
		height: 100vh;
		display: flex;
		font-size: $title-size-m;
		.stair{
			background: #F5F5F5;
			width: 240rpx;
			.stair-item{
				text-align: center;
				padding: 0 $padding;
				line-height: 90rpx;
				color: $text-gray;
				@extend .nowrap;
				&.show{
					position: relative;
					background: white;
					color: $mian-color;
					font-weight: bold;
					&::before{
						position: absolute;
						height: 40rpx;
						width: 5rpx;
						background: $text-price;
						content: " ";
						left: 0;
						top: 20rpx;
					}
				}
			}
		}
		.second{
			width: calc(100% - 240rpx);
			.second-item{
				position: relative;
				padding: 0 ($padding + 80) 0 $padding;
				line-height: 90rpx;
				color: $text-gray;
				.arrow-icon{
					position: absolute;
					right: $padding;
				}
				&::after{
					position: absolute;
					height: 1rpx;
					content: ' ';
					background: $border-color;
					left: $padding;
					right: 0;
					top: 0;
				}
				&:first-child::after{
					display: none;
				}
			}
		}
	}
</style>
