<!--
  Jeepay 通用状态切换按钮，  支持switch和badge两个格式， 根据权限进行判断
  参考 jeepay-ui组件 。 
  @author terrfly
  @site https://www.jeepay.vip
  @date 2021/5/8 07:18
-->
<template>
	<view>
		<template v-if="props.showSwitchType" >
			<switch v-if="vdata.isShowSwitchFlag" :checked="vdata.switchChecked" color="#238FFC" :style="{ transform: 'scale(' + scale + ')', margin: margin }" @change="changeFunc" />
		</template>
		<template v-else>
			
			 <image v-if="vdata.switchChecked == 1" class="default-image" src="/pageDevice/static/devIconImg/icon-default.svg" mode="scaleToFill"  />
			<image v-if="vdata.switchChecked == 0" class="default-image" src="/pageDevice/static/devIconImg/icon-noDefault.svg" mode="scaleToFill"  />
		</template>
	</view>
  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</template>

<script setup>
import { ref, reactive, nextTick, watch, onMounted } from "vue"
const props = defineProps({
 
  // 样式参数 
  scale: { type: Number, default: 0.8 }, //控制开关大小 倍数 默认.8
  margin: { type: String, default: "0" }, // 控制开关外边距默认0
  
  showSwitchType: { type: Boolean, default: false }, // 默认 badge
  
  //开关状态, 0-关闭， 1-开启
  state: { type: [Number,String], default: 1 },
  
  // 是否显示二次确认
  confirm: { type: Boolean, default: true },
  
  confirmTitle: { type: String, default: '确定修改状态？' }, // 二次确认提示信息
   
  // updateStateFunc回调事件. 需返回promise
  updateStateFunc: { type: Function }, 
  
})

const jeepayPopupConfirmRef = ref() //提示弹窗
const emits = defineEmits(["update:state"])

onMounted(()=>{
	vdata.switchChecked = props.state == 1
})

const vdata = reactive({
	
	isShowSwitchFlag: true , // 用于重新加载组件
	
	switchChecked: true,  // 是否选中
})

// 监听 props属性
watch(() => props.state, function(o, n){
	  vdata.switchChecked = props.state == 1
	}
)

function changeFunc(e){
	
	let changeVal = e.detail.value
	
	// 显示弹层
	if(props.confirm){
		jeepayPopupConfirmRef.value.open(props.confirmTitle).then(() => {
			return propsUpdateStateFunc(changeVal ? 1 : 0)
		}).then(() => {
			emits("update:state",  changeVal ? 1 : 0)
			reloadSwitch(changeVal)
		}).catch(() => {
			reloadSwitch(!changeVal)
		})
		
	}else{ // 调起更新函数
	
		propsUpdateStateFunc(changeVal ? 1 : 0).then(() => {
			emits("update:state",  changeVal ? 1 : 0)
			reloadSwitch(changeVal)
		}).catch(() => {
			reloadSwitch(!changeVal)
		})
	}
}

// uniapp-switch 组件存在问题， 当用户出发了切换， 那么v-model:checked 绑定的元素不在生效了。 
function reloadSwitch(changeVal){
	
	vdata.switchChecked = changeVal
	vdata.isShowSwitchFlag = false
	nextTick(() =>  vdata.isShowSwitchFlag = true)
}

// props. default app 和小程序有出入，此函数用作兼容。
// APP default : () => { return (state) => {Promie.resole()} } (小层序认为 default即函数， )
function propsUpdateStateFunc(state){
	
	if(props.updateStateFunc){
		return props.updateStateFunc(state)
	}
	
	return Promise.resolve()
}

</script>

<style lang="scss" scoped>
	
	.default-image {
	  width: 50rpx;
	  height: 50rpx;
	}
	
</style>
