<template>
	<view class="backView">
		<view class="ph-pr-arr" v-for="(dataItem, index) in list" :key="index">
			<template v-if="dataItem.data.length > 0">
				<view class="topTitle"><text>{{ dataItem.title }}</text></view>
				<view class="ph-pr-content">
					<view v-for="(item,ikey) in dataItem.data"
						:class="param[dataItem.type] === item.id ? 'select-item-view' : 'item-view'"
						@click="itemClick(dataItem.type, item, ikey)" :key="item.id">
						<text class="itemTitle">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>
		<u-button class="ph-pr-button" type="primary" shape="circle" @click="handleClick"
			:hover-class="selectedAll ? '' : 'none'" :custom-style="buttonStyle">下一步</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifyList: [],
				systemList: [],
				brandList: [],
				param: {
					classifyId: '',
					systemId: '',
					brandId: '',
				},
				brandName: '',
				selectedAll: false,
			}
		},
		computed: {
			list() {
				return [{
						title: '请选择类别',
						type: 'classifyId',
						data: this.classifyList
					},
					{
						title: '请选择系统',
						type: 'systemId',
						data: this.systemList
					},
					{
						title: '请选择品牌',
						type: 'brandId',
						data: this.brandList
					}
				]
			},
			buttonStyle() {
				return this.selectedAll ? {
					'color': '#FFFFFF',
					'background-color': '#2272FF;',
					'width': '600rpx',
					'height': '104rpx'
				} : {
					'color': '#FFFFFF',
					'background-color': '#D1D4D4;',
					'width': '600rpx',
					'height': '104rpx'
				}
			}
		},
		onLoad(e) {
			getApp().trackPage('选择产品页')
			this.getRelationDictionaryV2()
		},
		onShareAppMessage(res) {
			let shareObj = {
				title: '',
				path: '/pages/photo/product',
				imageUrl: '',
				success() {},
				fail() {}
			}
			return shareObj
		},
		methods: {
			//选择 点击
			itemClick: function(type, item, ikey) {

				switch (type) {
					case 'classifyId':
						this.param = {
							classifyId: item.id,
							systemId: '',
							brandId: ''
						}
						this.selectedAll = false
						this.systemList = this.classifyList[ikey].child
						this.brandList = []
						break
					case 'systemId':
						this.param = {
							classifyId: this.param.classifyId,
							systemId: item.id,
							brandId: ''
						}

						this.selectedAll = false
						this.brandList = this.systemList[ikey].child

						break
					case 'brandId':
						this.param.brandId = item.id
						this.selectedAll = true
						this.brandName = item.name
						break
					default:
						break
				}
			},

			// 点击下一步
			handleClick() {
				// 点击下一步设置全局拍照品牌品类
				if (!this.selectedAll) {
					return
				}
				const globalData = getApp().globalData
				// if (!globalData.token) {
				// 	uni.navigateTo({
				// 		url: '/pages/login/index'
				// 	})
				// 	return
				// }
				let keys = ['brandId', 'brandName', 'classifyId', 'systemId']
				keys.map(key => {
					globalData.photo.product[key] = this[key] || this.param[key]
				})
				uni.navigateTo({
					url: '/pages/photo/list' +
						'?brandId=' + this.param.brandId +
						'&brand=' + this.brandName +
						'&classifyId=' + this.param.classifyId +
						'&systemId=' + this.param.systemId,
				})
			}
		}
	}
</script>

<style>
	.backView {
		background-color: #F4f5f7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}

	.topTitle {
		margin-top: 50rpx;
		padding-left: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.ph-pr-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		padding: 22rpx 22rpx;
	}

	.ph-pr-arr {
		width: 100%;
	}

	.item-view {
		background-color: #FFFFFF;
		/* width: 548rpx; */
		margin: 0rpx 8rpx 24rpx 8rpx;
		/* flex: 1 1 0%;
		max-width: 33%; */
		width: 222rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-style: solid;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.05);
		border-width: 0rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.select-item-view {
		background-color: #2272FF;
		margin: 0rpx 8rpx 24rpx 8rpx;
		/* 	flex: 1 1 0%;
		max-width: 33%; */
		width: 222rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-style: solid;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.05);
		border-width: 0rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.ph-pr-button {
		position: absolute;
		bottom: 76rpx;
		font-size: 32rpx;
	}
</style>
