<template>
	<view class="">
		<div class="card">
			<div class="title">页面主题设置</div>
			<div class="theme_box">
				<div class="color_box" v-for="(item, index) in theme" :key="index" @click="changeActive(item)">
					<div class="bgcBox" :style="{ backgroundColor: item }"></div>
					<image :src="$util.img('/upload/weapp/user/gou.png')" mode="" v-if="activeTheme == item"></image>
					<image :src="$util.img('/upload/weapp/user/un_gou.png')" mode="" v-else></image>
				</div>
			</div>



		</div>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				theme: ['#F33B50', '#21BBF3', '#18c751'],
				activeTheme: uni.getStorageSync('activeTheme')
			};
		},
		methods: {
			changeActive(item) {
				this.activeTheme = item;
				uni.setStorageSync('activeTheme', item);
				uni.switchTab({
					url: '/pages/member/index'
				});
				let obj = uni.getStorageSync('theme_style');
				let bottomObj = uni.getStorageSync('bottomNav');

				obj.bg_color = this.activeTheme;
				obj.bg_color_shallow = this.activeTheme;
				obj.main_color = this.activeTheme;
				obj.promotion_color = this.activeTheme;
				obj.goods_detail.goods_btn_color = this.activeTheme;
				obj.goods_detail.promotion_tag = this.activeTheme;
				this.$store.commit('setThemeStyle', obj);
				bottomObj.textHoverColor = this.activeTheme;
				bottomObj.list.forEach(item => {
					item.selected_style.iconColor[0] = this.activeTheme
				})
				this.$store.commit('setTabBarList', bottomObj);
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.card {
		margin: 32rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 40rpx;
		}

		.theme_box {
			margin-top: 28rpx;
			display: flex;
			justify-content: space-around;

			.color_box {
				.bgcBox {
					width: 188rpx;
					height: 188rpx;
					border-radius: 16rpx;
				}

				image {
					margin-top: 24rpx;
					width: 32rpx;
					height: 32rpx;

					position: relative;
					left: 50%;
					transform: translate(-50%);
				}
			}
		}
	}

	
</style>