<template>
  <switch :checked="flag" :disabled="disabled" color="#238FFC" :style="{ transform: 'scale(' + scale + ')', margin: margin }" @change="change" @tap="emits('click')" />
  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</template>

<script setup>
import { ref, watchEffect } from 'vue'
const props = defineProps({
  scale: { type: Number, default: 0.8 }, //控制开关大小 倍数 默认.8
  margin: { type: String, default: '0' }, // 控制开关外边距默认0
  tips: { type: String }, //修改提示语不传使用 默认tips弹出层提示语
  bol: { type: Boolean }, //开关状态
  index: { type: Number, default: 0 }, // 列表渲染索引值
  confirmTips: { type: Boolean, default: true }, //是否需要提示弹窗默认 需要
  disabled: { type: Boolean, default: false }, // 是否禁用 默认否
})
const emits = defineEmits(['confirm', 'cancel', 'click'])
const flag = ref()

watchEffect(() => {
  flag.value = props.bol
})

const jeepayPopupConfirmRef = ref() //提示弹窗

const change = (e) => {
  flag.value = e.detail.value
  if (!props.confirmTips) return confirm()
  jeepayPopupConfirmRef.value
    .open(props.tips || '确定修改状态？')
    .then(() => {
      confirm()
    })
    .catch(() => {
      flag.value = !flag.value
      emits('cancel', flag.value)
    })
}

const confirm = () => {
  emits('confirm', flag.value)
}
</script>

<style lang="scss" scoped></style>
