<script lang="ts" setup>
  import { Switch } from 'ant-design-vue';
  import { computed } 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';
  const props = withDefaults(
    defineProps<{
      layout?: ControlComponentLayout;
      value?: ControlComponentValue;
      radio?: RadioRecord;
    }>(),
    {
      value: () => ControlComponentDefaultConfig,
    }
  );
  const getRadio = computed(() => {
    return props.radio || DEFAULT_RADIO_RECORD;
  });
</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">属性名</span>
    </div>
    <Switch />
  </div>
</template>