<template>
  <WlHeader title="选择分组">
    <template v-slot:header_part_left>
      <div class="header-part-left">
        <div class="back-icon" @click="onBack" v-if="showBack">
          <WlSvgIcon type="arrowTipLeft" width="30" height="30" color="#000" />
        </div>
        <div class="close-icon" @click="onClose">
          <WlSvgIcon type="close" width="30" height="30" color="#000" />
        </div>
      </div>
    </template>
    <template v-slot:header_part_right>
      <div class="header-part-right">
        <div class="group-btn" @click="onGroupManage" v-if="showBtn">
          <WlSvgIcon type="menuSetting" width="20" height="20" color="#000" />
          <p class="group-btn-text">管理分组</p>
        </div>
      </div>
    </template>
  </WlHeader>
</template>

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

<script lang="ts" setup>
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";

type Props = {
  showBtn?: boolean;
  showBack?: boolean;
};
withDefaults(defineProps<Props>(), {
  showBtn: false,
  showBack: false,
});

const emit = defineEmits<{
  (e: "onBack");
  (e: "onClose");
  (e: "onTurnGroupManage");
}>();

const onBack = () => emit("onBack");
const onClose = () => emit("onClose");
const onGroupManage = () => emit("onTurnGroupManage");
</script>

<style lang="scss">
.header-part-left {
  @extend %flex-middle;

  .back-icon,
  .close-icon {
    display: flex;
    cursor: pointer;

    &.back-icon {
      padding: j(5) j(8) j(5) j(8);
    }

    &.close-icon {
      padding: j(5) j(15) j(5) j(8);
    }
  }
}

.header-part-right {
  justify-content: flex-end;
  padding-right: j(15);
  @extend %flex-middle;

  .group-btn {
    height: j(35);
    padding: 0 j(8);
    cursor: pointer;
    border-radius: j(5);
    background-color: white;
    @extend %flex-middle;
    border: j(1) solid var(--wl-line-color-dark);

    &-text {
      padding-left: j(5);
      font-size: j(13);
    }
  }
}
</style>
