<template>
	<view class="actionsheet" :style="{ 'padding-bottom': bian ? '28px' : '0px' }">
		<view class="item" style="width:36px;" @click="goIndex">
			<view style="width: 22px; margin: auto;"><u-icon name="wap-home-o" size="44"></u-icon></view>
			<text class="text">首页</text>
		</view>
		<view class="item" @click="openShare">
			<view style="width: 22px; margin: auto;"><u-icon name="share" size="44"></u-icon></view>
			<text class="text">分享</text>
		</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" style="padding:0;">
			<view style="flex: 1;position: relative;">
				<button open-type="contact" class="KoraBtnList">
					联系我们
				</button>
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<share
		  :good-id="shareObj.goodId"
		  v-if="showShare"
		  :good-name="shareObj.goodName"
		  :images="shareObj.coverPic"
		  :advertising="shareObj.advertising"
		  @close="closeShare"
		></share>
	</view>
</template>

<script>
import auth from "@/components/auth/index";
import share from "../components/share/share";
export default {
	props: ['coverPic', 'goodName', 'favorite', 'goodId','totalStock','status','formid'],
	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%'
			},
			btn4: {
				flex: 1,
				height: '100%',
				borderRadius: '40px',
				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: {},
			showShare:false,
			shareObj:{}
		};
	},
	components: {
	  auth,
	  share
	},
	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.btn4.background = this.mc;
		this.getfu()
		let t = getCurrentPages();
		let u = uni.getStorageSync("mall_UserInfo");
		let uid = u.UserId ? u.UserId : 0;
		let Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
		this.path = '/pages/index/index?id=' + this.goodId + "&user_id=" + uid+ "&Up=" + Up+'&JumpType=1';
		
		//console.log(t[t.length - 1]);
		this.favorStatus = this.favorite;
		
		this.shareObj.goodId = this.goodId;
		this.shareObj.goodName = this.goodName;
		this.shareObj.coverPic = this.coverPic;	
		this.shareObj.advertising = '';
	},
	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;
		},
		goIndex() {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		},
		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;
		},
		openShare() {
			if (this.u) {
			  this.showShare = true;
			} else {
			  this.showAuth = true;
			}
		},
		closeShare() {
		  this.showShare = 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;
}
.KoraBtnList{
	width:100%;
	height:100%;
	background-color: #0b0052;
	color:#fff;
	font-size:16px;
	text-align: center;
	line-height: 50px;
	border-radius: 0;
}
.KoraLine{
	width:1px;
	height:20px;
	background-color: #fff;
	position: absolute;
	right:0;
	top:15px;
	z-index:99;
}
</style>
