<template>
  <div class="choose-group-item">
    <div class="search-list-text-wrap">
      <WlSvgIcon
        type="folderFill"
        width="20"
        height="20"
        color="#1C9FFF"
        class="search-list-icon"
      />
      <span class="search-list-text">{{ data.group_name }}</span>
    </div>
    <div
      class="uno-p-10-10 color-theme-color uno-fs-14 font-normal flex-middle"
      @click.stop="onClickArrow"
      v-if="data.child_group && data.child_group.length > 0"
    >
      <span>下级</span>
      <WlSvgIcon
        type="arrowRight"
        width="20"
        height="20"
        color="var(--wl-primary-color, #1C9FFF);"
      />
    </div>
  </div>
</template>

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

<script lang="ts" setup>
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import { TChooseGroupList } from "@mobileUI/typings/BCChooseGroupPopup";

type Props = {
  data?: TChooseGroupList;
};
const props = withDefaults(defineProps<Props>(), {
  data: null,
});

const onClickArrow = () => {
  emit("onClickArrow", props.data);
};

const emit = defineEmits<{
  (e: "onClickArrow", val: TChooseGroupList);
}>();
</script>

<style lang="scss" scoped>
.choose-group-item {
  height: j(48);
  padding: 0 j(15);
  cursor: pointer;
  padding-left: j(15);
  @extend %flex-middle;
  justify-content: space-between;
  @include halfBorder("bottom", var(--wl-line-color-dark), j(15), j(15));

  .search-list-text-wrap {
    @extend %flex-middle;

    .search-list-icon {
      flex-shrink: 0;
    }

    .search-list-text {
      padding-left: j(10);
    }
  }
}
</style>
