<template>
  <view class="comp_form_input_switch">
    <switch :checked="Value" style="transform:scale(0.7)" @change="change"  :disabled="controls[KEY].disabled"/>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { translate } from '@/common/utils/language/index'
import { getCarryData, clearCarryData } from '../js/index'

const props:any = defineProps({
  KEY: { type: String, required: true, }, // 组件字段
  data: { type: String, default: '', }, // 组件数据 v-modal
  controls: { type: Object, default: () => {}, }, // 组件配置
})
const Value:any = computed({ //v-modal:data
  get: () => props.data[props.KEY],
  set: v => emit('update:data', v)
})
const emit = defineEmits(['update:data','change:data','focus','blur', 'clear'])


const showClearIcon = ref(false)

const change = (e:any) => {
  emit('change:data', e.detail.value)
}

onBeforeMount(async() => {
  if(props.data[props.KEY] == undefined){
    Value.value = false
  }
  if(Value.value){
    getCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'],  })
  }else{
    clearCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'] })
  }
})
onMounted(()=>{
})
onUnmounted(() => {
})



</script>

<style lang="scss">
.comp_form_input_switch{
  text-align: right;
}
</style>
