<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" v-if="totalStock>0 && status==1">
			<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>
		<view class="item2" v-if="totalStock==0 ">
			<view style="flex: 1;" ><u-button :ripple="true" :hair-line="false"  :custom-style="btn3">售馨</u-button></view>
		</view>
		<view class="item2" v-if=" status==2">
			<view style="flex: 1;" ><u-button :ripple="true" :hair-line="false"  :custom-style="btn3">已下架</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','totalStock','status'],
	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%'
			},
			btn3: {
				flex: 1,
				height: '100%',
				borderRadius: '40px',
				border: 'none',
				color: '#FFF',
				fontSize: '13px',
				width: '100%',
				background:'#ababab'
			},
			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;
		this.getfu()
		let t = getCurrentPages();
		let u = uni.getStorageSync("mall_UserInfo");
		let uid = u.UserId ? u.UserId : 0;
		this.path = '/' + t[t.length - 1].route+"?id=" + this.goodId + "&user_id=" + uid;
		
		//console.log(t[t.length - 1]);
		this.favorStatus = this.favorite;
	},
	methods: {
		getfu(){
			let fucolor = this.colorRgb(this.fu) ;
			var RgbValue = fucolor.replace("rgb(", "").replace(")", "");
			var RgbValueArry = RgbValue.split(",");
			var grayLevel = RgbValueArry[0] * 0.299 + RgbValueArry[1] * 0.587 + RgbValueArry[2] * 0.114;
			console.log(grayLevel)
			if(grayLevel>=192){
				this.btn1.color = this.mc;
			}else{
				this.btn1.color = '#FFF';
			}
			
		},
		colorRgb(color) {
		  var sColor = color.toLowerCase();
		  //十六进制颜色值的正则表达式
		  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
		  // 如果是16进制颜色
		  if (sColor && reg.test(sColor)) {
		    if (sColor.length === 4) {
		      var sColorNew = "#";
		      for (var i = 1; i < 4; i += 1) {
		        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
		      }
		      sColor = sColorNew;
		    }
		    //处理六位的颜色值
		    var sColorChange = [];
		    for (var i = 1; i < 7; i += 2) {
		      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
		    }
		    return sColorChange.join(",");
		  }
		  return sColor;
		},
		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() {
			console.log('操作')
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				console.log('传入父组件')
				this.$emit('joincar');
				
				
			}
		},
		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>
