<template>
	<view>
		<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
			<scroll-view class="list" scroll-y>
				<view class="title">
					设置
				</view>
				<view class="item">
					<view class="item-title">
						声音设置
					</view>
					<view class="item-group">
						<view class="item-audio">
							<view class="item-audio-text">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐.png" mode="widthFix"></image>
								<text style="padding-left: 8px;">背景音乐</text>
							</view>
							<view class="item-audio-bar">
								<view class="item-audio-icon">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐off.png" mode="widthFix"></image>
								</view>
								<view style="flex: 1;justify-content: center;display: flex;" class="">
									<slider style="width: 100%;" :value="audioBckValue * 100" activeColor="#000000" backgroundColor="#C4FF46" block-color="#C4FF46" block-size="16" @changing="changeAudioBck"/>
								</view>
								<view class="item-audio-icon" style="justify-content: flex-end;">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐on.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="item-audio">
							<view class="item-audio-text">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐.png" mode="widthFix"></image>
								<text style="padding-left: 8px;">音效音乐</text>
							</view>
							<view class="item-audio-bar">
								<view class="item-audio-icon">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐off.png" mode="widthFix"></image>
								</view>
								<view style="flex: 1;justify-content: center;display: flex;" class="">
									<slider style="width: 100%;" :value="audioClickValue * 100" activeColor="#000000" backgroundColor="#C4FF46" block-color="#C4FF46" block-size="16" @changing="changeAudioClick"/>
								</view>
								<view class="item-audio-icon" style="justify-content: flex-end;">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐on.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="item">
					<view class="item-title">
						基础设置
					</view>
					<view class="item-group" style="padding: 0 15px;">
						<view class="item-base" @click="goUserAgreement">
							<view class="">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-用户协议.png" mode="widthFix"></image>
							</view>
							<view style="flex: 1;padding: 0 10px;">
								用户协议
							</view>
							<view class="">
								<image style="height: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png"
									mode="heightFix"></image>
							</view>
						</view>
						<view class="item-base" @click="goPrivacyAgreement">
							<view class="">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-用户协议.png" mode="widthFix"></image>
							</view>
							<view style="flex: 1;padding: 0 10px;">
								隐私协议
							</view>
							<view class="">
								<image style="height: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png"
									mode="heightFix"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</touch-popup>

		<popup-agreement ref="pAgreementUser" :agreementMode="0"></popup-agreement>
		<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
	</view>
</template>

<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		getCurrentInstance,
		onMounted
	} from 'vue'
	const popup = ref() // ref组件
	const pAgreementUser = ref()
	const pAgreementPrivate = ref()
	const {proxy} = getCurrentInstance()

	const audioBckValue = ref(uni.getStorageSync('audio_bck')) // 背景音乐数值
	const audioClickValue = ref(uni.getStorageSync('audio_click')) // 音效音乐数值

	const screenWidth = ref(app.globalData.sysInfo.windowWidth)

	onMounted(() => {
		if (audioBckValue.value === '') {
			audioBckValue.value = 0
			uni.setStorageSync('audio_bck', 0)
		}
		if (audioClickValue.value === '') {
			audioClickValue.value = 0
			uni.setStorageSync('audio_click', 0)
		}
	})

	const goUserAgreement = () => {
		app.playAudio() // 点击音效
		pAgreementUser.value.open()
	}
	const goPrivacyAgreement = () => {
		app.playAudio() // 点击音效
		pAgreementPrivate.value.open()
	}
	const changeAudioBck = (e) => {
		if (audioBckValue.value == e) return
		audioBckValue.value = e.detail.value / 100
		uni.setStorageSync('audio_bck', e.detail.value / 100)
		app.globalData.audioBck.volume = e.detail.value > 0 ? (e.detail.value / 100) : 0
	}
	const changeAudioClick = (e) => {
		if (audioClickValue.value == e) return
		audioClickValue.value = e.detail.value / 100
		uni.setStorageSync('audio_click', e.detail.value / 100)
		app.globalData.audioClick.volume = e.detail.value > 0 ? (e.detail.value / 100) : 0
	}
	const open = () => {
		popup.value.open()
	}
	const close = () => {
		proxy.$emit('close')
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	/* #ifdef H5 */
	/deep/ .uni-slider-handle-wrapper{
		height: 6px !important;
	}
	/deep/ .uni-slider-handle-wrapper::before {
		content: "";
		position: absolute;
		border-radius: 6px;
		border: 2px solid #000;
		box-sizing: border-box;
		background-color: #C4FF46;
		width: 12px;
		height: 12px;
		margin-top: -3px;
		margin-left: -8px;
	}
	/deep/ .uni-slider-handle-wrapper::after {
		    content: "";
		    position: absolute;
		    right: -3px;
		    border-radius: 6px;
		    border: 2px solid #000;
		    box-sizing: border-box;
		    background-color: #C4FF46;
		    width: 12px;
		    height: 12px;
		    top: -3px;
	}
	/deep/ .uni-slider-thumb {
		border: 2px solid #000 !important;
		box-sizing: border-box;
		border-radius: 6px;
		width: 12px !important;
	}
		
	/* #endif */
	.item-base image {
		width: 24px;
		height: auto;
	}

	.item-base view {
		display: flex;
		align-items: center;
		
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		text-align: center;

	}

	.item-base {
		display: flex;
		padding: 15px 0;
		
	}

	.item-audio-text {
		display: flex;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		align-items: center;
	}

	.item-audio-icon {
		width: 30px;
		display: flex;
	}

	.item-audio-bar {
		display: flex;
		align-items: center;
		padding: 15px 0;
	}

	.item-audio image {
		width: 18px;
		height: auto;
	}

	.item-audio {}

	.item-group {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 15px;
		padding: 15px;
	}

	.item-title {
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		padding: 5px 10px;
	}

	.item {
		padding: 15px;
	}

	.title {
		padding: 30px 15px 15px 15px;
		font-family: Noto Sans S Chinese;
		font-size: 18px;
		font-weight: 500;
		line-height: 27px;
		text-align: center;
	}

	.list {
		height: 100%;
	}
</style>