<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-padding-left-40 w-full">商品标题</view>
				<view class="u-m-l-40">
					<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 500rpx;">
						<view>
							<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
							<view class="row wrap">
								<view class="attr-list active">要葱</view>
								<view class="attr-list">要香菜</view>
								<view class="attr-list">葱和香菜多要</view>
								<view class="attr-list">葱和香菜不要</view>
							</view>
						</view>
						
						<view>
							<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
							<view class="row wrap">
								<view class="attr-list">要葱</view>
								<view class="attr-list">要香菜</view>
								<view class="attr-list">葱和香菜多要</view>
								<view class="attr-list">葱和香菜不要</view>
							</view>
						</view>
						
						<view>
							<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
							<view class="row wrap">
								<view class="attr-list">要葱</view>
								<view class="attr-list">要香菜</view>
								<view class="attr-list">葱和香菜多要</view>
								<view class="attr-list">葱和香菜不要</view>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="mt20">
					<view class="u-m-l-40">已选规格：</view>
					<view class="row u-row-center mt20">
						<view class="w-40 mr10">
							<u-button @click="mobileLogin" 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="mpLogin" 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
			}
		},
		data() {
			return {
				mobile: ''
			};
		},
		methods: {
			close() {
				this.showPop = false
				this.$emit('close')
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		}
	};
</script>

<style lang="scss">
	.spec {
		width: 600rpx;
		height: 800rpx;
		
		.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%;
		}
	}
</style>