<template>
	<view class="actionsheet" :style="{ 'padding-bottom': bian ? '28px' : '0px' }">
		<view class="item" style="width:36px;" @click="goCart">
			<view style="width: 22px; margin: auto;"><u-icon name="cart-o" size="44" :color="mc"></u-icon></view>
			<text class="text" :style="{ color: mc }">购物车</text>
		</view>
		<view class="item">
			<view style="width: 22px; margin: auto;"><u-icon name="chat-o" size="44" color="#333"></u-icon></view>
			<text class="text">客服</text>
			<button open-type="contact" :send-message-title="goodName" :send-message-path="path" :send-message-img="g.coverPic" :show-message-card="true">0</button>
		</view>
		<view class="item" @click="setFavorite">
			<view style="width: 22px; margin: auto;"><u-icon :name="favorStatus ? 'like' : 'like-o'" size="44" :color="favorStatus ? mc : '#333'"></u-icon></view>
			<text class="text">收藏</text>
		</view>
		<view class="item2">
			<view style="flex: 1;"><u-button @click="joinCar" :ripple="true" :hair-line="false" :custom-style="btn1">加入购物车</u-button></view>
			<view style="flex: 1;"><u-button @click="buy" :ripple="true" :hair-line="false" :custom-style="btn2">立即购买</u-button></view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
import auth from "@/components/auth/index";
export default {
	props: ['coverPic', 'goodName', 'favorite', 'goodId'],
	data() {
		return {
			mc: '',
			fu: '',
			bian: false,
			btn1: {
				flex: 1,
				height: '100%',
				borderRadius: '40px 0 0 40px',
				border: 'none',
				color: '#FFF',
				fontSize: '13px',
				width: '100%'
			},
			btn2: {
				flex: 1,
				height: '100%',
				borderRadius: '0 40px 40px 0',
				border: 'none',
				color: '#FFF',
				fontSize: '13px',
				width: '100%'
			},
			path: '',
			favorStatus: false,
			//是否显示登陆
			showAuth: false,
			u: {}
		};
	},
	components: {
	  auth
	},
	mounted() {
		this.mc = this.$uiConfig.mainColor;
		this.fu = this.$uiConfig.secondary;
		this.bian = this.$utils.is_biang;
		this.btn1.background = this.fu;
		this.btn2.background = this.mc;
		let t = getCurrentPages();
		this.path = '/' + t[t.length - 1].route;
		//console.log(t[t.length - 1]);
		this.favorStatus = this.favorite;
	},
	methods: {
		goCart() {
			uni.redirectTo({
				url: '/pages/cart/cart'
			});
		},
		setFavorite() {
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				this.request2(
					{
						url: '/api/AppletUser/SetUserCollectionInfo',
						data: {
							GoodsId: this.goodId
						}
					},
					res => {
						this.favorStatus = !this.favorStatus;
					}
				);
			}
		},
		joinCar() {
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				this.$emit('join-car');
			}
		},
		buy() {
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else{
				this.$emit('buy');
			}
		},

		reloadUserinfo() {
			this.u = uni.getStorageSync('mall_UserInfo');
			this.showAuth = false;
		},
		//关闭登录窗口
		gbAuth(){
			this.showAuth=false;
		}
	}
};
</script>

<style>
.actionsheet {
	display: flex;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 50px;
	align-items: center;
}
.actionsheet .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 10px;
	color: #333;
	font-size: 12px;
	padding: 3px 0;
	width: 30px;
	position: relative;
}
.actionsheet .item .text {
	margin-top: 2px;
	text-align: center;
}
.actionsheet .item2 {
	flex: 1;
	width: 1px;
	padding: 5px;
	box-sizing: border-box;
	margin-left: 10px;
	height: 100%;
	display: flex;
}
.actionsheet .item button {
	width: 100%;
	height: 100%;
	opacity: 0;
	left: 0;
	top: 0;
	position: absolute;
}
</style>
