<template>
  <div class="all-result" data-weiling-mobile-ui-all-result>
    <template v-if="data?.wx_user_list?.data_list?.length">
      <p class="title">
        <span class="label">个微人脉</span>
        <span
          v-if="data?.wx_user_list?.count > 3"
          class="more_btn"
          @click="onViewMoreModule(4)"
          >查看更多</span
        >
      </p>
      <BCGlobalSearchList
        :list="data?.wx_user_list?.data_list"
        @onSearchItemSelect="onSearchItemSelect"
        :keyword="keyword"
        :search_type="data?.wx_user_list.search_type"
      />
    </template>
    <template v-if="data?.external_user_list?.data_list?.length">
      <p class="title">
        <span class="label">企微好友</span>
        <span
          v-if="data?.external_user_list?.count > 3"
          class="more_btn"
          @click="onViewMoreModule(1)"
          >查看更多</span
        >
      </p>
      <BCGlobalSearchList
        :list="data?.external_user_list?.data_list"
        @onSearchItemSelect="onSearchItemSelect"
        :keyword="keyword"
        :search_type="data?.external_user_list.search_type"
      />
    </template>
    <template v-if="data?.clue_list?.data_list?.length">
      <p class="title">
        <span class="label">联系人</span>
        <span
          v-if="data?.clue_list?.count > 3"
          class="more_btn"
          @click="onViewMoreModule(2)"
          >查看更多</span
        >
      </p>
      <BCGlobalSearchList
        :list="data?.clue_list?.data_list"
        @onSearchItemSelect="onSearchItemSelect"
        :keyword="keyword"
        :search_type="data?.clue_list.search_type"
      />
    </template>
    <template v-if="com_company_data?.length">
      <p class="title">
        <span class="label">企业</span>
        <span
          v-if="data?.company_list?.count > 3"
          class="more_btn"
          @click="onViewMoreModule(5)"
          >查看更多</span
        >
      </p>
      <BCGlobalSearchList
        :list="com_company_data"
        @onSearchItemSelect="onSearchItemSelect"
        :keyword="keyword"
        :search_type="data?.company_list?.search_type"
      />
    </template>
    <div v-if="!hasData && keyword" class="result_empty">
      <img
        src="https://wlmvp-cos.weiling.cn/worktable-h5/images/perch_default_no result.png"
        alt=""
      />
      <p>暂未搜索到相关结果</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import BCGlobalSearchList from "@mobileUI/components/BCGlobalSearchList/src/index.vue";

import { TSearchResult, TCompanyItem } from "../types";

const emit = defineEmits<{
  (e: "onViewMoreModule", data: number): void;
  (e: "onSearchItemSelect", data: any): void;
}>();

interface Props {
  data: TSearchResult;
  keyword: string;
}

const props = withDefaults(defineProps<Props>(), {
  data: null,
  keyword: "",
});

// 去除无权限的企业
const com_company_data = computed(() => {
  return props.data?.company_list?.data_list?.filter(
    (res: TCompanyItem) => res.permission,
  );
});
const hasData = computed(() => {
  return (
    props.data?.wx_user_list?.count ||
    props.data?.external_user_list?.count ||
    props.data?.clue_list?.count ||
    props.data?.company_list?.count
  );
});
const onViewMoreModule = (search_type) => {
  emit("onViewMoreModule", search_type);
};
const onSearchItemSelect = (item) => {
  emit("onSearchItemSelect", item);
};
</script>

<style scoped lang="scss">
.all-result[data-weiling-mobile-ui-all-result] {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: j(8) 0;
    span.label {
      color: var(--wl-text-color-title-1);
      font-weight: 500;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        background: var(--wl-primary-color);
        width: j(3);
        height: j(14);
        border-radius: j(2);
        margin-right: j(4);
      }
    }
    .more_btn {
      color: var(--wl-text-color-secondary-1);
      font-size: j(12);
    }
  }
  .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);
    }
  }
}
</style>
