<template>
	<view class="goods-operation">
		<text class="price">￥{{productItem(item).sellingPrice}}</text>
		<text class="m-price">￥{{productItem(item).originalPrice}}</text>
		<view class="pro-box" v-if="progressShow">
			<view class="progress-box">
				<progress :percent="productItem(item).productStock || 0" activeColor="#fa436a" active :stroke-width="getBenchmark(group)" />
			</view>
			<text>仅剩{{getBenchmark(group)}}件</text>
		</view>
		<view @click="addToCart()" v-if="!prohibitBag">
			<image class="bag-add" :src="addBagIcon"></image>
		</view>
		<spec-popup :hasBar="hasBar" :product="item" @changeShow="changeShowBag" :show="specShowNy" />
	</view>
</template>
<script>
	import addBagIcon from '../static/icon/Add-Bag.svg'
	import specPopup from './spec-popup.vue'

	import {
		productItem
	} from '../js/request.js'

	export default {
		components: {
			specPopup
		},
		props: {
			spceParent: {
				default: false
			},
			item: {
				type: Object
			},
			group: {
				type: Object,
				default () {
					return {}
				}
			},
			specShow: {
				type: Boolean,
				default: false
			},
			hasBar: {
				type: Boolean,
				default: true
			},
			progressShow: {
				type: Boolean,
				default: false
			},
			prohibitBag: {
				default: null
			}
		},
		data() {
			return {
				addBagIcon,
				specShowNy: this.specShow
			}
		},
		methods: {
			...{
				productItem
			},
			changeShowBag(val) {
				this.specShowNy = val
			},
			addToCart() {
				if (!this.spceParent) {
					this.specShowNy = !this.specShow
				}
				this.$emit('spec', this.item)
			},
			getBenchmark(item) {
				let data = {}
				if (item.data) data = JSON.parse(item.data)
				return item.benchmark || 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../static/scss/guess.scss';
</style>
