<template>
	<view class="">
		<u-popup mode="left" :customStyle="{
			minWidth: '220rpx',
			height: '888rpx',
			background: '#FFFFFF',
		}" :show="show" @close="close" @open="open">
			<view class="head">
				<view class="" v-for="(item,index) in list" :key="index">
					<view class="list-menu">
						<div v-if="indexa==item.category_id" style="backgroundColor: #2faa8b; color: #fff;"
							class="df aic jcsa" @click="btn(index)">{{item.category_name}}</div>
						<div v-else class="df aic jcsa" @click="btn(item)">{{item.category_name}}</div>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				indexa: 0,
				listLalis: []
			}
		},
		methods: {
			btn(index) {
				this.indexa = index.category_id
				// console.log(index);
				this.$api.sendRequest({
					url: '/api/goodssku/page',
					data: {
						category_id: index.category_id,
						page_size:'100'
					},
					success: res => {
						console.log(res.data.list, '分类列表');
						this.listLalis = res.data.list
						setTimeout(() => {
							uni.$emit('listLalis', res.data.list)
						}, 500)
					}
				})
			},
			callmethod() {
				this.show = !this.show
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		},
		async created() {
			let res = await this.$api.sendRequest({
				url: '/api/goodscategory/tree',
				data: {},
				async: false,
			})
			console.log(res, '分类');
			this.list = res.data
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		margin-top: 90rpx;
		// background-color: red;
		// color: #fff;
	}

	.list-menu {
		margin-bottom: 30rpx;

		div: {
			// margin: 36rpx 0;
			padding: 35rpx 0;
			box-sizing: border-box;
		}
	}
</style>
