<script setup lang="ts">
import { useAttrs, getCurrentInstance, computed, watch } from 'vue'
import { usePropBind } from './common'
import GdFormItem from './GdFormItem.vue';
import { checkBoolean } from './common';
const $t: any = getCurrentInstance()?.appContext.config.globalProperties.$t

const { propValue, handleChange } = usePropBind()
const attrs = <any>useAttrs()
const props = withDefaults(defineProps<{
  label: string,
  rules?: [],
}>(), { label: '' })
const emit = defineEmits<{
  (e: 'change', val: any): void
}>();

const handleModifyValue = (val: any) => {
  emit('change', val)
  handleChange(val)
}
</script>

<template>
  <GdFormItem :label="props.label" :rules="props.rules">
    <span class="viewer-content" v-if="attrs.viewerMode">
      {{ checkBoolean(propValue) ? $t('switch_on') : $t('switch_off') }}
    </span>
    <el-switch v-else :model-value="checkBoolean(propValue)" @update:model-value="handleModifyValue" v-bind="attrs" />
  </GdFormItem>
</template>