<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="all_checked_class"
          @click="onChooseAll"
        >{{ checkedText }}</div>
      </div>
    </template>
  </WlHeader>
</template>

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

<script lang="ts" setup>
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";;
import { computed, ref, watchEffect } from "vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";

type Props = {
  showBtn?: boolean;
  showBack?: boolean;
  isAllChecked?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  showBtn: false,
  showBack: false,
  isAllChecked: false,
});

const allCheckedBool = ref(false);

const checkedText = computed(() => {
  return allCheckedBool.value ? '取消全选' : '全选';
})

const all_checked_class = computed(() => {
  return {
    "choose-all": true,
    "isAllChecked": allCheckedBool.value
  };
});

const emit = defineEmits<{
  (e: "onBack");
  (e: "onClose");
  (e: "onChooseAll", val: boolean);
}>();

const onBack = () => emit("onBack");
const onClose = () => emit("onClose");
const onChooseAll = () => {
  allCheckedBool.value = !allCheckedBool.value;
  emit("onChooseAll", allCheckedBool.value);
}

watchEffect(() => {
  allCheckedBool.value = props.isAllChecked;
});
</script>

<style lang="scss">
.department-selector-wrap[data-weiling-mobile-ui-bc-department-selector-popup] {
  .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 {
    cursor: pointer;
    justify-content: flex-end;
    @extend %flex-middle;

    .choose-all {
      font-size: j(14);
      padding-right: j(15);

      &.isAllChecked {
        color: #1c9fff;
      }
    }
  }
}
</style>
