<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				分类
			</block>
		</cu-custom>
		<view class="main-box flex flex-wrap">
			<view v-for="item in list" :key="item.categoryId" class="item" :class="categoryId==item.categoryId?'active-item':''" @tap="choose(item.categoryId)">
				{{item.categoryName}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						categoryId: "",
						categoryName: "全部"
					}
				],
				categoryId: ""
			}
		},
		onLoad(options) {
			this.categoryId = options.categoryId
			this.getCaregoryList()
		},
		methods: {

			getCaregoryList() {
                let that = this;
				this.$u.api.categoriesList({
					bizType: this.$bizType
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
                        that.list =that.list.concat(res.data);
					}
				}).catch(error => {
					console.log(error)
				})
			},
			
			//选择分类
			choose(id) {
				this.categoryId = id
				uni.$emit('changeVideoClassify', id)
				uni.navigateBack({
					delta: 1
				});
			}
			
		}
	}
</script>

<style>
page {
	background: #fff;
}
</style>
<style lang="less" scoped>
.main-box {
	border-top: 2rpx solid #eee;
	padding: 54rpx 0rpx 0 26rpx;
}
.item {
	width: 152rpx;
	text-align: center;
	height: 52rpx;
	line-height: 52rpx;
	background: #F1F1F1;
	opacity: 0.54;
	border-radius: 26rpx;
	font-size: 26rpx;
	margin-bottom: 30rpx;
	color: #686868;
    margin-right: 26rpx;
}
.active-item {
	background: linear-gradient(90deg, #ED653F 0%, #F19A91 100%);
	opacity: 1;
	color: #fff;
}
</style>
