<template>
	<view>
		<u-popup v-model="showPop" mode="center" :border-radius="16" @close="close">
			<view class="bg-white spec">
				<view class="shop-title bold-600 u-p-l-40 u-p-r-40 w-full u-line-1">{{ name }}</view>
				<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 480rpx;">
					<view class="u-m-l-40">
						<view v-for="(item, index1) in specBck" :key="index1">
							<view class="attr nr u-m-t-20 u-m-b-20 ">{{ item.name }}</view>
							<view class="row wrap">
								<view 
									v-for="(attr, index2) in item.spec_value" :key="index2"
									@click="chooseSpec(item, index1, index2, attr)"
									:class="item.spec_value[index2].is_select ? 'attr-list active' : 'attr-list'" 
								>	
									{{ attr.value }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
					
				<view class="mt20">
					<view class="u-m-l-40 u-flex u-flex-wrap">已选规格：
						<view v-for="(item, index) in selectedSpec" :key="index" class="current">
							{{ item.name }}
						</view>
					</view>
					<view class="row u-row-center mt20 u-p-b-20">
						<view class="w-40 mr10">
							<u-button @click="close" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
						</view>
						<view class="w-40 ml10">
							<u-button @click="confirm" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "shop-spec",
		props: {
			value: {
				type: Boolean,
				required: true
			},

			spec: {
				type: [Array, Object],
				default: () => [{}]
			},

			name: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				mobile: '',
				specBck: [],
				selectedSpec: [],
			};
		},
		methods: {
			// 关闭弹窗
			close() {
				this.showPop = false
				this.$emit('close')
			},

			// 选择规格
			chooseSpec(item, index1, index2, attr) {
				if (item.name == '辣度') {
					// 规格-单选
					item.spec_value.map((i, k) => {
						if(k === index2) {
							if (item.spec_value[index2].is_select) {
								this.$set(i, 'is_select', false)
								this.selectedSpec = this.selectedSpec.filter(it => it.id !== item.spec_value[index2].id)
							} else {
								this.$set(i, 'is_select', true)
								this.selectedSpec.push({
									id: item.spec_value[index2].id,
									name: item.spec_value[index2].value
								})
							}
						} else {
							this.$set(i, 'is_select', false)
							this.selectedSpec.map((se, index) => {
								if (se.id == i.id) {
									this.selectedSpec.splice(index, 1)
								}
							})
						}
					})
				} else {
					// 规格-复选
					if (item.spec_value[index2].is_select) {
						this.$set(item.spec_value[index2], 'is_select', false)
						this.selectedSpec = this.selectedSpec.filter(i => i.id !== item.spec_value[index2].id)
					} else {
						// 选中
						this.$set(item.spec_value[index2], 'is_select', true)
						this.selectedSpec.push({
							id: item.spec_value[index2].id,
							name: item.spec_value[index2].value
						})
					}
				}
			},

			// 确认选择的规格
			confirm() {
				this.showPop = false
				this.$emit('confirm', {
					spec: this.selectedSpec
				})
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		watch: {
			spec(val) {
				// 创建副本
				this.specBck = val
			}
		}
	};
</script>

<style lang="scss">
	.spec {
		width: 600rpx;
		
		.shop-title {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 36rpx;
			background-color: #FAFAFA;
		}
		
		.attr {
			color: #212425;
		}
		
		.attr-list {
			color: #37393B;
			background-color: #F9F9F9;
			margin: 0 10rpx 10rpx 0;
			border-radius: 16rpx;
			border: 2rpx solid #F6F6F7;
			padding: 20rpx;
		}
		
		.active {
			border: 2rpx solid #254062;
			color: #254062;
		}
		
		.w-40 {
			width: 40%;
		}

		.current:first-child {
			margin-left: 0;
		}

		.current {
			color: #212425;
			background-color: #F9F9F9;
			margin: 0 10rpx 10rpx 0;
			border-radius: 16rpx;
			border: 2rpx solid #F6F6F7;
			padding: 20rpx;
		}
	}
</style>