<template>
	<view class="doc-tag">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" :title="titles[type]" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<!-- 合作商或品牌标签列表 -->
		<view class="label-content">
			<view v-for="(label, index) in labels" :key="index" class="label-item">
				<!-- 选中为蓝底，非选中状态为灰底 -->
				<view :class="['label-normal', {'selected': label[keys[type]] == selectedId}]"
					@click="handleClick(label, index)">
					<text class="label-text">{{label[nameKeys[type]]}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labels: [], // 标签列表
				selectedId: '', // 已选中标签的id
				classifyId: '',
				type: '1',  // '1': '合作商', '2': '品牌'， '9': '物料品牌'
			};
		},
		onLoad(e) {
			if (e && e.selectedId) { // 有已选中标签的id
				this.selectedId = e.selectedId
			}
			if (e && e.classifyId) { // 有已选中标签的id
				this.classifyId = e.classifyId
			}
			if (e && e.categoryId) { // 有品类
				this.type = '9'
				this.getBrandList(e.categoryId)
			} else if (e && e.partnerCompanyId) { // 有合作商id，获取品牌标签
				this.type = '2'
				this.loadFileLabel(e.partnerCompanyId)
			} else { // 无合作商id，获取合作商标签
				this.type = '1'
				this.loadFileLabel()
			}
		},
		computed:{
			titles() {
				return {
					'1': '合作商',
					'2': '品牌',
					'9': ' ' // 物料品牌
				}
			},
			keys() {
				return {
					'1': 'id', // 合作商
					'2': 'id', // 品牌
					'9': 'id' // 物料品牌
				}
			},
			nameKeys() {
				return {
					'1': 'name', // 合作商
					'2': 'name', // 品牌
					'9': 'name' // 物料品牌
				}
			}
		},
		methods: {
			// 选中标签
			handleClick(label, index) {
				this.selectedId =  label[this.keys[this.type]]
				
				// 向上个页面传值
				var pages = getCurrentPages();
				if (pages.length >= 2) {
					var page = pages[pages.length - 2];
					page.selectedItem = {
						type: this.type,
						id: this.selectedId,
						item: label,
						index: index
					}
				}
				
				uni.navigateBack()
			},

			// 获取合作商列表
			async loadFileLabel(partnerCompanyId) {
				let param = {
					type: this.type, // 1:合作商标签，2：品牌标签
				}
				if (this.type == '2') {
					param.partnerCompanyId = partnerCompanyId // 品牌的时候有效
				}
				let res = await this.$u.api.fileLabel(param)
				if (res && res.code == 200) {
					this.labels = res.data || []
				}
			},
			// 获取物料品牌
			getBrandList(categoryId) {
			  this.$u.api.getBrandList({categoryId: categoryId, classifyId: this.classifyId}).then(res => {
					if (res.code === 200) {
						const data = res.data
						let lists
						if (this.classifyId == 1) {
							lists = data.partnerCompany
						} else {
							lists = data.classify
						}
						this.labels = lists || []
					}
			  })
			},
		}
	};
</script>

<style lang="scss" scoped>
	.doc-tag {
		background-color: #F4F5F7;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.label-content {
			width: 100%;
			display: flex;
			align-items: center;
			overflow: auto;
			flex-wrap: wrap;
			padding: 0 10rpx 14rpx 30rpx;

			.label-item {
				padding-right: 20rpx;
				padding-bottom: 30rpx;
				flex-shrink: 0;

				.label-normal {
					height: 104rpx;
					width: 216rpx;
					font-size: 26rpx;
					color: #666666;
					background-color: #FFFFFF;
					border-radius: 8rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					.label-text {
						word-break: break-all;
					}

					&.selected {
						color: #FFFFFF;
						background-color: #2272FF;
					}
				}
			}
		}
	}
</style>
