<template>
    <el-form-item >
    <div class="flex switchWrap">
        <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
        <el-switch 
            v-model="internalValue" 
            :active-color="activeColor" 
            :inactive-color="inactiveColor"
            :disabled="disabled || loading"
            @change="handleChange">
            <!-- 自定义开启时的图标 -->
            <template #active-icon>
            </template>
            <!-- 自定义关闭时的图标 -->
            <template #inactive-icon>
            </template>
        </el-switch>
    </div>
  </el-form-item>

</template>
<!-- 他这个描述文案不太符合当前使用暂且不用 -->
<!-- :active-text="activeText" 
:inactive-text="inactiveText"  -->

<script>

export default {
    name: 'CustomSwitch',
    props: {
        activeText: {
            type: String,
            default: '',
        },
        inactiveText: {
            type: String,
            default: '',
        },
        modelValue: {
            type: Boolean,
            default: false,
        },
        activeColor: {
            type: String,
            default: '#00C261',
        },
        inactiveColor: {
            type: String,
            default: '#BABDC2',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:modelValue', 'change'],
    data() {
        return {
            internalValue: this.modelValue,
            loading: false, // 加载状态
        };
    },
    // watch: {
    //     modelValue(newVal) {
    //         console.log(newVal,'newVal---');
    //         this.internalValue = newVal;
    //     },
    // },
    watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
    internalValue(newVal) {
      this.$emit('input', newVal);
    },
  },
    methods: {
        // 处理 switch 状态变化
        async handleChange(value) {
            this.loading = true;
            try {
                // 模拟异步操作
                await new Promise((resolve) => setTimeout(resolve, 1000));
                this.internalValue = value;
                this.$emit('update:modelValue', value);
                this.$emit('change', value);
            } catch (error) {
                console.error('操作失败:', error);
            } finally {
                this.loading = false;
            }
        },
    },
    components: {
    },
};
</script>
<style scoped>
.switchWrap{
    align-items: center;
}
.switchDesc{
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    letter-spacing: 0.08em;
    font-variation-settings: "opsz" auto;
    /* text/text_3 */
    color: #626573; 
    display: inline-block;
    margin-right: 15px;
}
</style>