<template>
	<popup :show="myShow" @clickBackground="toggleSpec">
		<view class="main">
			<view class="top"></view>
			<view class="body">
				<view @tap="select(it)" :key="i" v-for="(it,i) in list" class="item">
					<share v-if="it.share" ref="share">
						<view>
							<image mode="widthFix" :src="it.icon"></image>
						</view>
						<view>{{it.text}}</view>
					</share>
					<view v-else>
						<view>
							<image mode="widthFix" :src="it.icon"></image>
						</view>
						<view>{{it.text}}</view>
					</view>
				</view>
			</view>
		</view>
	</popup>
</template>

<script>
	import popup from '../popup.vue'
	import share from '../share'

	import {
		getByUsrStatusCoupon,
		addCommodityListToBog,
		jumpLink
	} from '../../js/request.js'


	export default {
		props: ['show', 'list'],
		components: {
			popup,
			share
		},
		data() {
			return {
				myShow: this.show || false
			}
		},
		watch: {
			myShow(val) {
				this.$emit('changeShow', val)
			},
			show(val) {
				this.myShow = val
			}
		},
		mounted() {},
		methods: {
			tap(item) {
				this.toggleSpec()
				this.$emit('select', item)
			},
			toggleSpec() {
				this.myShow = !this.myShow
				this.$emit('toggleSpec', this.myShow)
			},
			select(it) {
				if (it.share) {
					this.$refs.share[0].toggleMask()
				}
				this.$emit('select', it)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		border-radius: 10px 10px 0 0;
		background-color: #FFF;
	}

	.top {
		$m: 40upx;
		width: 150upx;
		height: 10upx;
		background-color: #000000;
		border-radius: 20upx;
		margin: $m * 2 auto;
		position: relative;
		top: $m;
	}

	.body {
		display: flex;
		justify-content: space-around;
		padding: 20upx;

		padding-bottom: 80upx;

		.item {
			text-align: center;
			color: #000000;
			font-weight: 600;
			font-size: 26upx;

			image {
				width: 100upx;
				height: 100upx;
			}
		}
	}
</style>
