<template>
    <view class="switch" :style="getStyle">
        <up-switch
            v-model="switchValue"
            :loading="loading"
            :activeColor="activeColor"
            :activeValue="activeValue"
            :inactiveValue="inactiveValue"
            :disabled="disabled"
            @change="switchChange"
        ></up-switch>
    </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    modelValue: {
        type: [Boolean, String, Number],
        default: 0
    },
    switchAlign: {
        type: String,
        default: 'left'
    },
    loading: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    activeColor: {
        type: String,
        default: '#165dff'
    },
    activeValue: {
        type: [Boolean, String, Number],
        default: '1'
    },
    inactiveValue: {
        type: [Boolean, String, Number],
        default: '0'
    }
})
const switchValue = ref('0')
watch(
    () => ps.modelValue,
    (value) => {
        switchValue.value = value
    },
    { immediate: true }
)
//获取复选框样式
const getStyle = computed(() => {
    let switchAlign = 'flex-start'
    if (ps.switchAlign == 'center') {
        switchAlign = 'center'
    } else if (ps.switchAlign == 'right') {
        switchAlign = 'flex-end'
    }
    return {
        justifyContent: switchAlign
    }
})
const switchChange = (value) => {
    es('update:modelValue', value)
    es('change', value)
}
</script>
<style lang="scss" scoped>
.switch {
    flex: 1;
    display: flex;
}
</style>
