<template>
  <WlPopup
    class="choose-group-popup"
    data-weiling-mobile-ui-bc-choose-group-popup
    v-model="popupVisible"
    :style="{ height: '90%' }"
    position="bottom"
    round
    @closed="onClose"
  >
    <div class="popup-container">
      <ChooseGroupHeader
        :showBtn="showBtn"
        :showBack="showBack"
        @onBack="onBack"
        @onClose="onClose"
        @onTurnGroupManage="onShowGroupManagePopup"
      />
      <!-- <div class="search-container">
        <WlSearch />
      </div> -->
      <div class="search-list">
        <div @click="onChooseGroup(allChooseItem)">
          <ChooseGroupItem :data="allChooseItem" v-if="showAllItemBool" />
        </div>
        <div
          v-for="item in currentGroupList"
          :key="item.id"
          @click="onChooseGroup(item)"
        >
          <ChooseGroupItem :data="item" @onClickArrow="onTurnSubGroup(item)" />
        </div>
      </div>
    </div>
  </WlPopup>
  <BCGroupManagePopup
    v-model:show="groupManagePopupVisible"
    :groupList="currentGroupList"
    :env_data="env_data"
    :group_scope="group_scope"
    @onOperSuccess="onRefreshGroupData"
  />
</template>

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

<script lang="ts" setup>
import Api from "./http/api";
import Store from "@mobileUI/store";
import { allChooseItem } from "./utils/dict";
import { computed, ref, watchEffect } from "vue";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import { TChooseGroupList } from "@mobileUI/typings/BCChooseGroupPopup";
import ChooseGroupItem from "./components/ChooseGroupItem/index.vue";
import ChooseGroupHeader from "./components/ChooseGroupHeader/index.vue";
import BCGroupManagePopup from "@mobileUI/components/BCGroupManagePopup/src/index.vue";
import { TGroupManageOperParams } from "@mobileUI/typings/BCGroupManagePopup";

type Props = {
  modelValue?: boolean;
  showBtn?: boolean;
  showClose?: boolean;
  showAllItem?: boolean;
  group_scope?: number;
  env_data: TEnv.TEnvData;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  showBtn: false,
  showClose: true,
  showAllItem: false,
  group_scope: 1,
  env_data: () => {
    return {
      sid: "",
      domain: "",
      corp_id: "",
      node_env: "uat",
      app_id: "",
      token: "",
      card_resource: "",
    };
  },
});

Store.corp_id = props.env_data.corp_id;
Store.node_env = props.env_data.node_env;
Store.sid = props.env_data.sid;
Store.token = props.env_data.token;
Store.card_resource = props.env_data.card_resource;

let stack = ref([]);
let popupVisible = ref(false);
const groupManagePopupVisible = ref(false);

const showBack = computed(() => stack.value.length > 1);

const showAllItemBool = computed(
  () => props.showAllItem && stack.value.length === 1,
);

const currentGroupList = computed(() => stack.value[stack.value.length - 1]);

const emit = defineEmits<{
  (e: "onClose");
  (e: "update:modelValue", val: boolean);
  (e: "onChange", val: TChooseGroupList);
  (e: "onOperSuccess", val: TGroupManageOperParams);
}>();

const onClose = () => {
  emit("onClose");
  emit("update:modelValue", false);
  popupVisible.value = false;
};

const onChooseGroup = (item: TChooseGroupList) => {
  emit("onChange", item);
  onClose();
};

//根据group_id获取分组group_id下的分组列表
const onGetGroupList = async (group_id: string = "0") => {
  const res = await Api.getGroupList({
    group_id,
    group_scope: props.group_scope,
  });
  const { data } = res || {};
  return data?.data_list || [];
};

const onBack = () => {
  stack.value.pop();
};

const onShowGroupManagePopup = () => {
  groupManagePopupVisible.value = true;
};

const onTurnSubGroup = (item: TChooseGroupList) => {
  stack.value.push(item?.child_group);
};

//管理分组编辑完后关闭后需要刷新当前分组的列表
const onRefreshGroupData = (data: TGroupManageOperParams) => {
  const group_stack = stack.value.map((res) => {
    const { parent_id, level } = res[0] ?? {};
    return {
      level,
      parent_id,
    };
  });
  onGetGroupList("").then((list) => {
    group_stack.reduce((acc, item) => {
      if (item.level === 1) {
        stack.value = [acc];
      } else {
        let order = acc.findIndex((res) => res.id === item.parent_id);
        stack.value.push(acc[order]?.child_group);
        acc = acc[order]?.child_group;
      }
      return acc;
    }, list);
    emit("onOperSuccess", data);
  });
};

watchEffect(() => {
  popupVisible.value = props.modelValue;
});

const onResetData = () => {
  onGetGroupList("").then((list) => {
    stack.value = [list];
  });
};

onResetData();

defineExpose({
  onResetData,
});
</script>

<style lang="scss">
.choose-group-popup[data-weiling-mobile-ui-bc-choose-group-popup] {
  .popup-container {
    height: 100%;
    @extend %flex-direction-column;

    .search-container {
      padding: 0 j(15);
    }

    .search-list {
      flex: 1;
      @extend %overflow-auto;
    }
  }
}
</style>
