<style lang="scss" scoped>
.style-pop{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	.shade-box{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
	}
	.style-pop-center{
		position: absolute;
		z-index: 1;
		width: 670rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.style-pop-center-title{
			padding-bottom: 10prx;
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
			.style-pop-center-title-msg{
				position: relative;
				width: calc(100% - 180rpx);
				height: 160rpx;
				padding: 20rpx 0;
				font-size: 30rpx;
				.style-pop-center-title-money{
					position: absolute;
					bottom: 20rpx;
					color: #FF2842;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
		}
		.style-pop-center-caption{
			height: 90rpx;
			color: #666666;
			font-size: 32rpx;
			.style-pop-center-caption-btn{
				i{
					color: #3385FF;
					font-size: 40rpx;
				}
				.style-pop-center-caption-num{
					width: 90rpx;
					font-size: 24rpx;
				}
			}
		}
		.style-pop-center-menu-box{
			display: flow-root;
			.style-pop-center-menu{
				float: left;
				width: 190rpx;
				height: 60rpx;
				margin: 0 10rpx 10rpx 0;
				background: #FFFFFF;
				border: 1px solid #DDDDDD;
				border-radius: 4rpx;
				font-size: 28rpx;
				&.active{
					color: #FFFFFF;
					background: #3385FF;
					border: 1px solid #3385FF;
				}
			}
		}
		.style-pop-center-btn-box{
			margin-top: 40rpx;
			.style-pop-center-btn{
				width: 296rpx;
				height: 90rpx;
				color: #666666;
				background: #FFFFFF;
				border: 1px solid #DDDDDD;
				border-radius: 4rpx;
				font-size: 32rpx;
				&.active{
					background: #3385FF;
					color: #FFFFFF;
					border: 1px solid #3385FF;
				}
			}
		}
	}
}

</style>
<template>
	<view class="flex-center style-pop">
		<view class="shade-box" @tap="cancel"></view>
		<view class="style-pop-center">
			<view class="flex-space style-pop-center-title">
				<image v-if="info.goodsStyleList!=''" :src="info.goodsStyleList[goodsStyleSelectIndex].img"></image>
				<image v-else :src="info.smallImgList[0]"></image>
				<view class="style-pop-center-title-msg">
					{{ info.goodsName }}
					<view class="style-pop-center-title-money" v-if="info.goodsStyleList!=''">￥{{info.goodsStyleList[goodsStyleSelectIndex].price}}</view>
					<view class="style-pop-center-title-money" v-else>￥{{ info.price }}</view>
				</view>
			</view>
			<view class="flex style-pop-center-caption" v-if="info.goodsStyleList!=''">款式</view>

			<view class="style-pop-center-menu-box" v-if="info.goodsStyleList!=''">
				<view class="flex-center style-pop-center-menu" :class="goodsStyleSelectIndex==i?'active':''"
										v-for="(res,i) in info.goodsStyleList" :key="i" @tap="goodsStyleSelectIndex=i">{{ res.styleName }}</view>
			</view>

			<view class="flex-space style-pop-center-caption">
				数量
				<view class="flex style-pop-center-caption-btn">
					<i class="iconfont iconjianqu" :class="delAnimationData?'animation':''" v-if="bigCountNum > 0" @tap="minusBigCount"></i>
					<text class="flex-center style-pop-center-caption-num" >
						<text v-if="bigCountNum > 0">{{ bigCountNum }}</text>
					</text>
					<i class="iconfont icontianjia" :class="addAnimationData?'animation':''" @tap="addBigCount"></i>
				</view>
			</view>
			<view class="flex-space style-pop-center-btn-box">
				<view class="flex-center style-pop-center-btn" @tap="cancel">取消</view>
				<view class="flex-center style-pop-center-btn active" @click="ok">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
import animationMins from "@/mixins/animation";
export default {
	name: "appGoodsCommodityStyle",
	mixins: [animationMins],
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
	bigCount: {
		type: Number,
		default: 0
	}
	},
	data() {
		return {
			goodsStyleSelectIndex:0,
			bigCountNum:1,
		};
	},
	created() {},
	mounted() {
		this.bigCountNum = this.bigCount;
	},
	methods: {
		//关闭
		cancel(){
			this.$emit('cancel')
		},
		ok(){
			this.$emit('ok',this.bigCountNum,this.goodsStyleSelectIndex)
		},
		minusBigCount(){
			this.animationFun('del');
			this.bigCountNum--;
		},
		addBigCount(){
			this.animationFun('add');
			this.bigCountNum++;
		},
	},
};
</script>


