<template>
  <div
    class="choose-item"
    v-for="(item, index) in list"
    :key="item.id"
    @click="onChoose(item, getRadioIconType(item).checkStatus)"
  >
    <WlRadioIcon
      :type="getRadioIconType(item, index + 1).type"
      :iconType="getRadioIconType(item).icon"
      :isChoosed="getRadioIconType(item).isChoosed"
      @click="onChoose(item, getRadioIconType(item).checkStatus)"
    />
    <div class="choose-item-name">{{ item.name }}</div>
    <div
      class="arrow"
      @click.stop="onMore(item)"
      v-if="item.children && item.children.length > 0"
    >
      <WlSvgIcon type="arrowRight" width="18" height="18" color="#919699" />
    </div>
  </div>
</template>

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

<script setup lang="ts">
import { computed } from "vue";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import WlRadioIcon from "@mobileUI/components/WlRadioIcon";
import { TCheckedType } from "@mobileUI/typings/WlRadioIcon";
import { TDepartmentList } from "@mobileUI/typings/BCDepartmentSelectorPopup";

type Props = {
  list: TDepartmentList[]; //部门过滤数据
  selectedList: TDepartmentList[];
  isSelectAll: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  selectedList: () => [],
  isSelectAll: false,
});

const emit = defineEmits<{
  (e: "onChoose", val: TDepartmentList, status: string);
  (e: "onMore", val: TDepartmentList);
  (e: "update:isSelectAll", val: boolean);
}>();
let selectedLen = 0;
const getCheckedStatus = (data, selectedList, index) => {
  if (index === 1) {
    selectedLen = 0;
  }
  const { parentIds = [], id = "", childrenIds = [] } = data;
  if (selectedList.findIndex((ele) => ele.id === id) !== -1) {
    if (index !== 0) {
      selectedLen++;
      if (index === props.list.length && selectedLen === props.list.length) {
        emit("update:isSelectAll", true);
      }
    }
    return "checked";
  }
  for (const iterator of parentIds) {
    if (selectedList.findIndex((ele) => ele.id === iterator) !== -1) {
      if (index !== 0) {
        selectedLen++;
        if (index === props.list.length && selectedLen === props.list.length) {
          emit("update:isSelectAll", true);
        }
      }
      return "checked";
    }
  }
  let flag = false;
  for (const iterator of childrenIds) {
    if (selectedList.findIndex((ele) => ele.id === iterator) !== -1) {
      flag = true;
      emit("update:isSelectAll", false);
      return "pre-check";
    }
  }
  emit("update:isSelectAll", false);
  return "no-checked";
};

const getRadioIconType = computed(() => {
  return (item, index = 0) => {
    const typeDict = {
      "pre-check": "icon",
      checked: "hook",
      "no-check": "",
    };
    const checkStatus = getCheckedStatus(item, props.selectedList, index);
    const type: TCheckedType = typeDict[checkStatus];
    const icon = checkStatus === "pre-check" ? "prohibitFill" : "";
    const isChoosed = ["pre-check", "checked"].includes(checkStatus);
    return {
      type,
      icon,
      checkStatus,
      isChoosed,
    };
  };
});

const onMore = (item) => emit("onMore", item);

const onChoose = (item, status: string) => emit("onChoose", item, status);
</script>

<style lang="scss" scoped>
.department-selector-wrap[data-weiling-mobile-ui-bc-department-selector-popup] {
  .choose-item {
    height: j(50);
    cursor: pointer;
    box-sizing: border-box;
    @extend %flex-middle;
    padding-left: j(10);
    border-bottom: 1px solid #eee;

    &-name {
      flex: 1;
      @extend %flex-middle;
      font-size: j(14);
      font-weight: 500;
      padding-left: j(10);
    }

    .arrow {
      padding: j(10);
      display: flex;
    }
  }
}
</style>
