<template>
  <div
    class="bc-total"
    data-weiling-mobile-ui-bc-total
    @click="onToggleCheckbox"
  >
    <p class="checkbox" v-show="checkboxVisible">
      <WlRadioIcon
        :isChoosed="isChoosed"
        v-bind="$attrs"
        :unChosedColor="unChosedColor"
      />
    </p>
    <p>
      {{ title }}
      <span v-if="count">·{{ count }}</span>
    </p>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCTotal",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import WlRadioIcon from "@mobileUI/components/WlRadioIcon/src/index.vue";

type Props = {
  title?: string;
  count?: number;
  checkboxVisible?: boolean;
  unChosedColor?: string;
};
const props = withDefaults(defineProps<Props>(), {
  title: "",
  count: 0,
  checkboxVisible: false,
  unChosedColor: "#EEEEEE",
});

const emit = defineEmits(["onToggleCheckbox"]);
let isChoosed = ref(false);

const onToggleCheckbox = () => {
  if (!props.checkboxVisible) return;
  isChoosed.value = !isChoosed.value;
  emit("onToggleCheckbox", isChoosed.value);
};
</script>

<style lang="scss">
.bc-total[data-weiling-mobile-ui-bc-total] {
  @extend %flex-middle-center;
  cursor: pointer;

  .checkbox {
    margin-right: j(15);
  }
}
</style>
