<script lang="ts">
import { deepClone } from '@oinone/kunlun-meta';
import { OioSelect, SelectItem, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
import { RadioButton as ARadioButton, RadioGroup as ARadioGroup } from 'ant-design-vue';
import { computed, createVNode, defineComponent } from 'vue';
import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../basic';

export default defineComponent({
  name: 'TabSelect',
  components: {
    OioSelect
  },
  inheritAttrs: false,
  props: {
    ...OioCommonProps,
    ...OioMetadataProps,
    value: {
      type: [String, Boolean, Object],
      default: undefined
    },
    defaultValue: {
      type: [String, Boolean, Object],
      default: undefined
    },
    options: {
      type: Array
    },
    allowClear: {
      type: Boolean
    },
    placeholder: {
      type: String
    }
  },
  setup(props) {
    const { realValue, readonly, disabled } = useMetadataProps(props);
    const finalOptions = computed<SelectItem[]>(() => {
      if (!props.options) {
        return [];
      }
      const list = deepClone(props.options) as any[];
      for (const aElement of list) {
        if (aElement.name === 'false' || aElement.name === 'true') {
          aElement.name = JSON.parse(aElement.name);
          aElement.value = aElement.name;
        }
      }
      return list;
    });

    const formContext = useInjectOioDefaultFormContext();

    const selectChange = (val: SelectItem) => {
      realValue.value = val?.value;
      if (props.change) {
        props.change(val ? val.value : undefined);
      }
      props.blur?.();
    };

    const onClickOption = (val: SelectItem) => {
      selectChange(val);
    };

    return {
      realValue,
      readonly,
      disabled,
      finalOptions,
      selectChange,
      onClickOption,
      getTriggerContainer: formContext.getTriggerContainer
    };
  },
  render() {
    const { disabled, realValue, finalOptions, onClickOption } = this;
    return createVNode(
      ARadioGroup,
      {
        class: 'tab-select search-tab-select',
        value: realValue,
        disabled
      },
      {
        default: () => {
          return finalOptions.map((option) => {
            return createVNode(
              ARadioButton,
              {
                class: 'tab-select-item search-tab-select-item',
                value: option.value,
                onClick: () => onClickOption(option)
              },
              {
                default: () => [createVNode('span', {}, option.label)]
              }
            );
          });
        }
      }
    );
  }
});
</script>
