<!--姜枫 2021.04.11-->
<template>
	<view class="item-cmd_bx" @click="addEvents">
		<view class="img_bx" @click="addEvents">
			<app-img  :src="info.smallImgList[0]" alt="商品图" mode="aspectFit" :height="160" />
		</view>
		<view class="cmd-info_bx">
			<view class="tit" @click="addEvents">{{ info.goodsName || "" }}</view>
<!--			<view class="kc" @click="addEvents">库存 {{ info.stock }}</view>-->
			<view class="num-open_bx">
<!--				<view class="price">￥{{ showPrice }}</view>-->
				<view class="price">￥{{ info.price }}</view>
				<view class="open-bx" >
					<i class="iconfont iconjianqu" :class="delAnimationData?'animation':''" @click.stop="delEvent" v-if="bigCount > 0"></i>
					<text class="num" >
						<text v-if="bigCount > 0">{{ bigCount }}</text>
					</text>
					<i class="iconfont icontianjia" v-if="info.goodsStyle>0" :class="addAnimationData?'animation':''" @click="isGoodsStyle = true"></i>
					<i class="iconfont icontianjia" v-else :class="addAnimationData?'animation':''" @click.stop="addEvents"></i>
				</view>
			</view>
		</view>
		<goodsCommodityStyle v-if="isGoodsStyle" :bigCount="bigCount" :info="info" @cancel="isGoodsStyle=false" @ok="ok"></goodsCommodityStyle>
	</view>
</template>

<script>
import { COMMODITY_TYPE } from "@/utils/declare";
import AppImg from "@/components/app-img";
import { autoPriceByIdApi, changePriceByIdApi } from '@/api/product/index'
import productMins from "@/mixins/product";
import animationMins from "@/mixins/animation";


import allSelectInput from "@/components/module/allSelectInput";
import goodsCommodityStyle from "@/components/module/app-goods-commodity-style";
import allSelectInputMins from "@/mixins/allSelectInput";
export default {
	name: "Commodity",
	components: {
		AppImg,allSelectInput,goodsCommodityStyle
	},
	mixins: [productMins,animationMins,allSelectInputMins],
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
		bigCount: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			COMMODITY_TYPE,
			isGoodsStyle: false,
			isAloneAllActive: false,
			isAloneAllFocus: false,

			isShowSucceed:false,
			changeAutoPrice:'',
			showPrice:0.00,
			ifFocus:false
		};
	},
	created() {},
	mounted() {
		if(this.info.priceLabel == 2){
			this.changeAutoPrice = this.info.price
		}
		this.showPrice = this.info.price
	},
	methods: {
		ok(bigCount,index){
			let params = {
				...this.info,
				goodsStyleSelectIndex: index,
				bigCount: bigCount
			};
			this.$emit("addGoodsEvent",params);
			console.log(params);
			this.isGoodsStyle = false;
		},
		addEvents() {
			this.animationFun('add');
			this.$emit("addGoods", this.info);
		},
		delEvent() {
			this.animationFun('del');
			this.$emit("del", this.info);
		},
		async changePriceEvent(event) {
			this.isFocus = false;
			let self = this
			await changePriceByIdApi({
				productId: this.info.id,
				price: this.changeAutoPrice
			}).then(res => {
				if(res.code == 1){
					this.showPrice = res.data.price
					this.isShowSucceed = true
					setTimeout(()=>{
						this.isShowSucceed = false
					},1000)
				}else{
					self.$msg(res.msg)
				}
			})
		},
		customNum() {
			// if(!this.info.bigCount){
			if(!this.bigCount && !this.smallCount){
				let params = {
					...this.info,
					bigCount: this.bigCount,
					smallCount: this.smallCount
				};
				this.$emit("addOneEvent", this.info,params);
			}
			this.$emit("customNum", {
				...this.info,
				bigCount: this.bigCount,
				smallCount: this.smallCount
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.item-cmd_bx {
	position: relative;
	margin-bottom: 20px;
	.img_bx {
		height: 160px;
		width: 160px;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.cmd-info_bx {
		position: relative;
		padding-left: 177px;
		height: 170rpx;
		& .tit {
			font-size: 28px;
			font-weight: 400;
			color: #333333;
			padding-top: 10px;
		}
		& .kc {
			color: #999999;
			font-size: 24px;
			padding: 8px 0 24px;
		}
		& .num-open_bx {
			position: absolute;
			width: calc(100% - 177px);
			bottom: 0;
			display: flex;
			align-items: center;
			& .price {
				font-size: 28px;
				color: #ff2842;
				flex: 1;
			}
			& .open-bx {
				display: flex;
				align-items: center;
				& .iconfont {
					//margin-left: 15rpx;
					color: #3385ff;
					font-size: 42px;
				}

				.position{
					display: block;
					width: 70rpx;
					text-align: center;
				}
				.iconcachu {
					margin: 0 6px 0 20px;
					color: #ccc;
					&.edit {
						color: #3385ff;
					}
				}
				& > .num {
					display: inline-block;
					width: 80rpx;
					height:45rpx;
					text-align:center;
					color: #868686;
					font-size: 25rpx;
				}
				.change-input {
					width: 164px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					background: #ffffff;
					border: 1px solid #dddddd;
					border-radius: 4px;
					font-size: 25px;
				}
				.btn-box{
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					background: #3385ff;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}
	}
}

</style>
