<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import { Switch } from 'ant-design-vue';
  import { computed, ref, watchEffect } from 'vue';
  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
  import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
  import {
    ControlComponentDefaultConfig,
    ControlComponentValue,
    ControlComponentLayout,
  } from './control.config';
  import { useSendCommand } from './useSendCommand';
  const props = withDefaults(
    defineProps<{
      layout?: ControlComponentLayout;
      value?: ControlComponentValue;
      radio?: RadioRecord;
    }>(),
    {
      value: () => ControlComponentDefaultConfig,
    }
  );
  const getRadio = computed(() => {
    return props.radio || DEFAULT_RADIO_RECORD;
  });

  const checked = ref(!!Number(props.value.value));

  const { sendCommand } = useSendCommand();
  const handleChange = (value: boolean) => {
    sendCommand(props.value, value);
  };

  watchEffect(() => {
    checked.value = !!Number(props.value.value);
  });
</script>

<template>
  <div class="flex items-center w-full h-full p-4">
    <div class="flex-auto flex truncate">
      <SvgIcon
        :name="props.value?.icon! || ControlComponentDefaultConfig.icon!"
        prefix="iconfont"
        :style="{
          color: props.value?.iconColor || ControlComponentDefaultConfig.iconColor,
          width: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
          height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
        }"
      />
      <span
        class="flex-auto mx-4 flex items-center truncate inline-block text-gray-700"
        :style="{ color: props.value.fontColor || ControlComponentDefaultConfig.fontColor }"
      >
        {{ props.value.attributeRename || props.value.attribute }}
      </span>
    </div>
    <Switch v-model:checked="checked" @change="handleChange" />
  </div>
</template>