<template>
	<view class="setting-wrapper">
		<s-icon name="integral" @click="showPop = true" :color="Themecolor ? '#ffffff' : iconColor" size="24"></s-icon>
		
		<s-popup @close="showPop = false" safeAreaInsetTop closeOnClickOverlay :show="showPop" >
			<view class="bg-white flex flex-col card p-20 m-15 border-round">
				<view class="text-black fs-bold fs-18 text-align-center"> 更换主题 </view>
				<view class="text-black mt-15 text-align-center fs-15">
					当前主题：{{ Themecolor || "默认主题" }}
				</view>
				<view class="flex-center mt-15">
					<view class="text fs-14">
						<s-tag type="primary" :customStyle="tagStyle" @click="selectTheme" text="选择内置主题"></s-tag>
					</view>
					<view class="text fs-14 ml-10">
						<s-tag type="primary" :customStyle="tagStyle" @click="resetTheme" text="恢复默认主题"></s-tag>
					</view>
				</view>
			</view>
		</s-popup>

		<s-picker @cancel="show = false" @confirm="confirmTheme" keyName="label" :show="show" :columns="columns">
		</s-picker>
	</view>
</template>

<script>
	export default {
		props: {
			iconColor: {
				type: String,
				default: '#000000'
			}
		},
		data() {
			return {
				showPop:false,
				tagStyle: {
					border: "none",
					'font-size': '28rpx'
				},
				show: false,
				columns: [
					[{
							label: "默认主题",
							key: "default",
						},
						{
							label: "粉色",
							key: "pink",
						},
						{
							label: "蓝色",
							key: "blue",
						},
						{
							label: "橙色",
							key: "orange",
						},
						{
							label: "靛蓝",
							key: "indijo",
						},
						{
							label: "红色",
							key: "red",
						},
						{
							label: "深蓝色",
							key: "darkblue",
						},
					],
				],
			}
		},
		methods: {
			selectTheme() {
				this.show = true;
			},
			confirmTheme(e) {
				if (e.value[0].key === "default") {
					uni.$s.theme.clear();
				} else {
					uni.$s.theme.setTheme(e.value[0].key);
				}
				this.show = false;
			},
			resetTheme() {
				uni.$s.theme.clear();
			},
		},
		computed: {
			Themecolor(){
				return uni.$s.vx.state().swanTheme.color
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-wrapper {
		display: inline-block;

		.card {
			height: 450rpx;
			justify-content: center;
		}

		::v-deep .s-tag {
			border: none;
		}
	}
</style>
