<template>
  <view
    class="flex bg-[#F2F2F2] justify-between gap-1 items-center box-border p-[4rpx] rounded-full"
  >
    <view
      @click="(show = !show), emit('handleList')"
      class="px-2 py-1 rounded-full box-border text-xs"
      :class="`${show ? 'bg-transparent text-[#666]' : 'bg-white text-[#333]'}`"
    >
      {{ columns[0] }}
    </view>
    <view
      @click="(show = !show), emit('handleList')"
      class="px-2 py-1 rounded-full box-border text-xs"
      :class="`${show ? 'bg-white text-[#333]' : 'bg-transparent text-[#666]'}`"
    >
      {{ columns[1] }}
    </view>
  </view>
</template>

<script setup>
  defineOptions({
    name: 'SwitchBtn',
  })
  const show = defineModel('show')
  const props = defineProps({
    columns: {
      type: Array,
      required: true,
    },
  }) // 定义事件

  const emit = defineEmits(['handleList'])
</script>

<style scoped lang="scss"></style>
