<template>
  <WlPopup
    v-model="popUpVisible"
    showBack
    round
    position="bottom"
    :title="title"
    headerVisible
    teleport="body"
    style="height: 90%"
    :closeOnClickAction="true"
    :needAutoBack="false"
    @onBack="popUpVisible = false"
  >
    <div
      class="bc-global-search-item"
      data-weiling-mobile-ui-bc-global-search-item
    >
      <WlSearch
        class="key-input"
        v-model="keyword"
        placeholder="搜索"
        @onChange="onChange"
      />
      <span class="label">{{ SearchTitleEnum[search_type] }}</span>
      <WlLoadMore
        class="search-con"
        v-model="isLoading"
        :finished="isFinished"
        :finished_text="result?.length ? '没有更多了' : ''"
        @load="initData"
      >
        <BCGlobalSearchList
          :list="result"
          :search_type="search_type"
          @onSearchItemSelect="onSearchItemSelect"
          :keyword="keyword"
        />
        <div
          v-if="!result?.length && keyword && !isLoading"
          class="result_empty"
        >
          <img
            src="https://wlmvp-cos.weiling.cn/worktable-h5/images/perch_default_no result.png"
            alt=""
          />
          <p>暂未搜索到相关结果</p>
        </div>
      </WlLoadMore>
    </div>
  </WlPopup>
</template>

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

<script lang="ts" setup>
import { ref, watch } from "vue";
import Api from "@mobileUI/components/BCGlobalSearch/src/http/api";
import Store from "@mobileUI/store";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import WlSearch from "@mobileUI/components/WlSearch/src/index.vue";
import WlLoadMore from "@mobileUI/components/WlLoadMore/src/index.vue";
import BCGlobalSearchList from "@mobileUI/components/BCGlobalSearchList/src/index.vue";
import usePagination from "@mobileUI/hooks/usePagination";

const { limit, page_count, isLoading, isFinished, judgeLoadStatus } =
  usePagination();
type TSearchType = 1 | 2 | 4 | 5;
enum SearchTypeEnum {
  clue_list = 2,
  company_list = 5,
  external_user_list = 1,
  wx_user_list = 4,
}

enum SearchTitleEnum {
  "手机号线索" = 2,
  "企业" = 5,
  "企微好友" = 1,
  "个微人脉" = 4,
}

type Props = {
  modelValue: boolean;
  env_data: TEnv.TEnvData;
  title?: string;
  search_type: TSearchType;
  keyword?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: "选择跟进对象",
  search_type: 1,
  keyword: "",
  env_data: () => {
    return {
      sid: "",
      domain: "",
      corp_id: "",
      node_env: "dev",
      app_id: "",
      token: "",
      card_resource: ""
    };
  },
});
const emit = defineEmits<{
  (e: "update:modelValue", val: boolean): void;
  (e: "onSearchItemSelect", data: any): void;
}>();

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

let popUpVisible = ref(false);
const keyword = ref("");
const result = ref<any[]>([]);
const initData = async () => {
  isLoading.value = true;
  if (page_count.value == 1) {
    result.value = [];
  }
  try {
    const { data } = await Api.getSearchByType({
      keyword: keyword.value,
      page: page_count.value,
      limit: limit.value,
      search_type: props.search_type,
    });

    const { data_list = [], count } =
      data?.[SearchTypeEnum[props.search_type]] || {};
    result.value = [...result.value, ...data_list];
    judgeLoadStatus(data_list, count);
    isLoading.value = false;
  } catch (error) {
    isLoading.value = false;
    isFinished.value = false;
  }
};
const onChange = (key) => {
  page_count.value = 1;
  if (!key) {
    result.value = [];
    keyword.value = "";
    return;
  }
  initData();
};

const onSearchItemSelect = (item) => {
  popUpVisible.value = false;
  emit("onSearchItemSelect", item);
};
watch(
  () => props.modelValue,
  (bol) => {
    popUpVisible.value = bol;
    keyword.value = props.keyword;
    if (props.keyword && bol) {
      page_count.value = 1;
      initData();
    }
  }
);
watch(
  () => popUpVisible.value,
  (bol) => {
    emit("update:modelValue", bol);
  }
);
</script>

<style lang="scss">
.bc-global-search-item[data-weiling-mobile-ui-bc-global-search-item] {
  height: 100%;
  background-color: rgba(244, 249, 253, 1);
  padding: j(8) j(16);
  overflow: auto;
  display: flex;
  flex-direction: column;

  .key-input {
    margin-bottom: j(10);
    flex-shrink: 0;

    .search {
      background-color: #fff;
      border: none;
    }
  }

  .search-con {
    flex: 1;
    overflow: auto;
  }

  .result_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

    img {
      width: j(260);
      height: auto;
    }

    p {
      color: #979797;
      font-size: j(16);
    }
  }

  span.label {
    color: var(--wl-text-color-title-1);
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: j(10);

    &::before {
      content: "";
      background: var(--wl-primary-color);
      width: j(3);
      height: j(14);
      border-radius: j(2);
      margin-right: j(4);
    }
  }
}</style>
