<template>
	<view>
		<view class='bk_box'>
			<view class='bkspan'>
				<block v-for="(item, index) in CategoryList" :key="index">
					<view @click="ChoosePlate(item)" :id="item.story_category_id" :name="item.story_category_name">
						<view :class="'bkspan_span ' + (item.story_category_id==storyCategoryId?'borred':'')">
							{{item.story_category_name}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<view @click="AddPlate" class="zhuige-base-button">
			<view>{{__('确定')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data: function() {
			return {
				CategoryList: [],
				storyCategoryId: 0,
				storyCategory: {},
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			var that = this;

			uni.setNavigationBarTitle({
				title: this.__('板块')
			});
			if (options.storyCategoryId) {
				this.setData({
					storyCategoryId: options.storyCategoryId
				})
			}
			that.GetCategoryList()
		},
		methods: {
			/* 版块 */
			GetCategoryList: function() {
				var that = this,
					params = {};

				that.$.request({
					url: that.Config.URL.sns.category_lists,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status && data.items.length > 0) {
							that.CategoryList = data.items
						} else {}
					}
				});
			},
			ChoosePlate: function(item) {
				console.log(item)
				this.setData({
					storyCategory: item,
					storyCategoryId: item.story_category_id
				})
				console.log(this.storyCategoryId)
			},
			AddPlate: function() {
				var that = this;
				that.$.backpage(1, function() {
					var data = {
						storyCategory: that.storyCategory
					};
					that.notice.postNotificationName("RefreshPlate", data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bk_box {
		background-color: #fff;
		padding: 30rpx;
	}

	.bkspan_span {
		border: 1rpx solid #b6b6b6;
		color: #878787;
		font-size: 28rpx;
		margin: 8rpx 7rpx;
		border-radius: 35rpx;
		text-align: center;
		padding: 5rpx 20rpx;
		display: inline-block;
	}

	.bkspan {
		display: flex;
		flex-wrap: wrap;
	}

	.zhuige-base-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 40rpx 0;
		z-index: 3;
	}

	.zhuige-base-button view {
		width: 360rpx;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		background: #db384c;
	}

	.borred {
		border: 1rpx solid #db384c;
		color: #db384c;
	}
</style>