<template>
	<view class="app-button-button dir-left-nowrap">
		<view class="app-home dir-top-nowrap main-center cross-center" @click="router">
            <image class="app-icon" src="../../../static/image/icon/index.png"></image>
            <text class="app-text">首页</text>
		</view>
        <view class="app-home dir-top-nowrap main-center cross-center little box-grow-0" @click="setFavorite">
            <image class="app-icon" :src="favorite ? '../../../static/image/icon/icon-favorite-active.png' : '../../../static/image/icon/icon-favorite.png'"></image>
            <text class="app-text">收藏</text>
        </view>
        <view class="app-home dir-top-nowrap main-center cross-center little box-grow-0" @click="kefu">
            <image class="app-icon" :src="root+'/web/statics/img/app/common/icon-kefu.png'"></image>
            <text class="app-text">客服</text>
        </view>
		<view v-if="item.goods_stock > 0 && start_time" class="app-button dir-left-nowrap">
			<view v-if="is_alone_buy === 1" style="height: 80%;" @click.stop="turnOn(false)" class="app-but but dir-top-nowrap box-grow-1  cart-btn" :class="theme === 'b' || theme === 'f' ? theme + '-s-back ' + theme + ' ' + 'text' : theme === 'a' ? 'app-single-button' : theme + '-s-back ' + theme + ' ' + theme + '-m-text'" >
                <text class="app-text">单独购买</text>
                <text class="price">
                    {{singlePrice}}
                </text>
			</view>
			<view class="app-but but dir-top-nowrap box-grow-1  buy-btn" style="height: 80%;color: #ffffff;" :class="theme === 'a' ? 'app-pt-button' : theme+ '-m-back ' + theme"  @click="turnOn(true)">
<!--                <text class="app-text">{{groups[set_group_num].groups.people_num}}人拼团</text>-->
                <text class="app-text">拼团购买</text>
                <text class="price">{{group_price}}</text>
			</view>
		</view>
        <view class="app-button dir-left-nowrap" v-else>
            <view class="app-but app-but-width" style="background-color: #CDCDCD;color: #fff;">
                <view class="but dir-top-nowrap">
                    <text class="out-text" v-if="item.goods_stock === 0">已售罄</text>
                    <text class="out-text" v-else-if="!start_time">活动未开始</text>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import {mapGetters, mapState} from "vuex";
    export default {
        name: 'app-bottom-button',
	    
	    props: {
            selectAttr: Object,
            selectGroupAttrId: {
                type: [String, Number]
            },
            is_alone_buy: {
                type: Number,
            },
			groups: {
                type: Array,
	            default() {
                    return [];
	            }
            },
            level_show: {
                type: Number,
	            default() {
                    return 0;
                }
            },
			member_price_min: {
                type: String,
                default() {
                    return '0.00';
                }
            },

            price: {
                type: String,
	            default() {
                    return '0.00';
	            }
            },
            price_member_min: {
                type: Number,
	            default() {
                    return 0;
                }
            },
		    pt: {
                type: Boolean,
		    },
            item: Object,
			start_time: Boolean,
			end_time: Boolean,
			theme: String,
	    },
	    
	    data() {
            return {
                group_price: '',
                favorite: '',
            }
	    },
	    mounted() {
			this.get_group();
			this.favorite = this.item.favorite
	    },
	    methods: {
            turnOn(bool) {
                this.$emit('click', bool);
            },
		    get_group() {
                if (this.$validation.isEmpty(this.selectAttr)) {
                    if (this.level_show === 1) {
                        if (Number(this.member_price_min) === 0) {
                            this.group_price = '免费';
                        } else {
                            this.group_price = `￥${this.member_price_min}`;
                        }
                    } else {
                        if (Number(this.groups[0].price_min) ===  0) {
                            this.group_price =  '免费';
                        } else {
                            this.group_price = `￥${this.groups[0].price_min}`;
                        }
                    }
                } else {
                    if (this.level_show === 1) {
                        if (Number(this.selectAttr.price_member) === 0) {
                            this.group_price = '免费';
                        } else {
                            this.group_price = `￥${this.selectAttr.price_member}`;
                        }
                    } else {
                        if (Number(this.selectAttr.price) ===  0) {
                            this.group_price = '免费';
                        } else {
                            this.group_price = `￥${this.selectAttr.price}`;
                        }
                    }
                }
		    },
            setFavorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.item.id
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false
                        });
                    }
                });
            },
            kefu(){
                uni.navigateTo({
                    url: "/pages/web/web?url="+this.mall.setting.web_service_url
                })
            },
            router() {
                uni.reLaunch({
                    url: `/pages/index/index`
                });
            }
	    },
	    computed: {
            // 单价
            singlePrice() {
                if (this.pt) return;
                if (this.$validation.isEmpty(this.selectAttr)) {
                    if (this.level_show === 1) {
                        if (this.price_member_min === 0) {
                            return '免费';
                        } else {
                            let price = this.price_member_min;
                            return `￥${price.toFixed(2)}`
                        }
                    } else {
                        if (Number(this.price) ===  0) {
                            return '免费';
                        } else {
                            return `￥${this.price}`
                        }
                    }
                } else {
                    if (this.level_show === 1) {
                        if (Number(this.selectAttr.price_member) === 0) {
                            return '免费';
                        } else {
                            return `￥${this.selectAttr.price_member}`;
                        }
                    } else {
                        if (Number(this.price) ===  0) {
                            return '免费';
                        } else {
                            return `￥${this.selectAttr.price}`
                        }
                    }
                }
            },
		    
		    set_group_num() {
                for (let i = 0; i < this.groups.length; i++) {
                    if (this.groups[i].groups.id == this.selectGroupAttrId) {
                        return i;
                    }
                }
		    },
            ...mapState({
                mall: state => state.mallConfig.mall,
            }),
            root(){
                return this.$siteInfo.root
            }
	    },
	    
	    watch: {
            selectAttr: {
                handler() {
                    if (this.pt) {
                        if (this.$validation.isEmpty(this.selectAttr)) {
                            if (this.level_show === 1) {
                                if (Number(this.member_price_min) === 0) {
                                    this.group_price = '免费';
                                } else {
                                    this.group_price =  `￥${this.member_price_min}`;
                                }
                                
                            } else {
                                if (Number(this.groups[0].price_min) ===  0) {
                                    this.group_price =  '免费';
                                } else {
                                    this.group_price =  `￥${this.groups[0].price_min}`;
                                }
                            }
                            
                        } else {
                            if (this.level_show === 1) {
                                if (Number(this.selectAttr.price_member) === 0) {
                                    this.group_price =  '免费';
                                } else {
                                    this.group_price =  `￥${this.selectAttr.price_member}`;
                                }
                            } else {
                                if (Number(this.selectAttr.price) ===  0) {
                                    this.group_price =  '免费';
                                } else {
                                    this.group_price =  `￥${this.selectAttr.price}`;
                                }
                            }
                        }
                    }
                },
	            immediate: true,
	            deep: true,
            },

			groups: {
            	handler(data) {
            		if (data.length > 0) {
						this.$nextTick(() => {
							this.get_group();
						})
					}
				},
				immediate: true
			}
	    }
    }
</script>

<style scoped lang="scss">
    .app-pt-button {
        background: linear-gradient(140deg, #ff9460, #ff5c5c);
        text {
            color: white;
        }
    }
	.app-button-button {
		height: #{110rpx};
		width: #{750rpx};
        padding: 0 20rpx;
		.app-home {
			width: 13%;
			height: #{110rpx};
			background-color: white;
			.app-icon {
				width: #{40rpx};
				height: #{40rpx};
			}
			.app-text {
				font-size: #{19rpx};
				color: #707070;
			}
		}
		.app-button {
			width: 87%;
			height: #{110rpx};
			
			.app-but-width {
				width: 100% !important;
			}
			
			.app-but {
				height: #{110rpx};
				width: 50%;
			}
	
			.price {
				font-size: #{32rpx};
                font-weight: 600;
			}
			.app-text {
                margin-top: #{10rpx};
				font-size: #{22rpx};
			}
			.out-text {
                line-height: #{110rpx};
            }
			.app-single-button {
				background-color: #feeeee;
				text {
					color: #ff5c5c;
				}
			}

			.but {
				text-align: center;
			}
		}
	}
	.text {
		color: #ffffff;
	}
    .cart-btn{
        height: 90%;
        border-top-left-radius: #{30rpx};
        border-bottom-left-radius: #{30rpx};
        position: relative;
        transform: translateY(-50%);
        top: 50%;
        background: linear-gradient(to right, #A494F6,#BC8AE7,#E674B2);
        color: #ffffff;
    }
    .cart-btn:after{
        content: "";
        position: absolute;
        right: 0;
        height: 60%;
        background: #ffffff;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
    }
    .buy-btn{
        height: 90%;
        border-top-right-radius: #{30rpx};
        border-bottom-right-radius: #{30rpx};
        position: relative;
        transform: translateY(-50%);
        top: 50%;
        background: linear-gradient(to right, #E674B2,#FE3666);
    }
</style>