<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';

let active = ref(1);
let props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
});
let emit = defineEmits(['checked']);
const { data } = toRefs(props);
const unitSwitch = data?.value;
active.value = unitSwitch?.default;

function checkSwitch(value: number) {
  if (active.value === value) {
    return;
  }
  active.value = value;
  emit('checked', value);
}
</script>

<template>
  <div class="switch-box">
    <span :class="active === 2 && 'active'" class="switch-item" @click="checkSwitch(2)">
      {{ unitSwitch?.rightText }}
    </span>
    <span :class="active === 1 && 'active'" class="switch-item" @click="checkSwitch(1)">
      {{ unitSwitch?.leftText }}
    </span>
  </div>
</template>

<style lang="scss" scoped>
.switch-box {
  display: inline-block;
  min-width: 318px;
  height: 32px;
  border-radius: var(--i-button-border-radius);
  background-color: var(--o-bg-color-base);
  padding: 2px;
  .switch-item {
    font-size: 12px;
    font-weight: 900;
    display: inline-block;
    min-width: 156px;
    padding: 0 24px;
    height: 28px;
    line-height: 28px;
    border-radius: var(--i-button-border-radius);
    text-align: center;
    &:hover {
      cursor: pointer;
      color: #ffffff;
      background-color: var(--o-color-primary-secondary);
    }
    &:nth-child(2n) {
      margin-left: 2px;
    }
  }
  .active {
    background-color: var(--o-color-primary);
    color: #ffffff;
    transition: color 0.5s;
    transition: background-color 0.5s;
    border-radius: var(--i-button-border-radius);
  }
}
</style>