<template>
	<!-- 选择产品规格 -->
	<view class="specification-view">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="选择产品规格" titleColor="#333333" :border-bottom="false"
			title-bold></u-navbar>
		<view class="specification-content">
			<view v-for="(item, index) in info.fieldsOptions" :key="index">
				<view @tap="handleClick(item.key)" class="item-view" hover-class='hover-class'>
					<view class="item-title">
						<text>{{item.label}}</text>
					</view>
					<view class="icon-view">
						<!-- 选中显示打勾 -->
						<u-icon name="checkbox-mark" v-if="item.key == selectedId"></u-icon>
					</view>
				</view>
				<view class="line-view"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {fieldsName: 'specificationId', fieldsOptions: []},
				selectedId: '' // 选中id
			};
		},
		onLoad(e) {
			getApp().trackPage('完工-规格选择页面')
			if (e && e.selectedId) { // 选中id
				this.selectedId = e.selectedId
			}
			var pages = getCurrentPages();
			if (pages.length >= 2) { // 上个页面传过来的参数
				var page = pages[pages.length - 2];
				this.info = page.info
			}
		},
		methods: {
			handleClick(selectedId) {
				this.selectedId = selectedId
				
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				let data = {}
				data[this.info.fieldsName] = selectedId
				prevPage.$vm.setData(data) //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.specification-view {
		height: 100vh;
		display: flex;
		flex-direction: column;
		
		.specification-content {
			height: 100%;
			width: 100%;
			overflow-y: auto;
			padding-bottom: 44rpx;
			.item-view {
				height: 104rpx;
				background-color: #FFFFFF;
				line-height: 104rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.item-title {
					text-align: center;
					min-width: 400rpx;
				}
				.icon-view {
					color: #2272FF;
					text-align: left;
				}
			}
			.hover-class {
				background-color: #f7f8f9;
			}
			.line-view {
				height: 2rpx;
				padding: 0 30rpx;
				background-color: #F4F5F7;
			}
		}
	}
</style>
