<template>
  <WlPopup
    v-model="popUpVisible"
    round
    position="bottom"
    :title="title"
    headerVisible
    teleport="body"
    style="height: 90%"
    :closeOnClickAction="true"
  >
    <template #header_part_left>
      <slot name="header_part_left" />
    </template>
    <div class="bc-global-search" data-weiling-mobile-ui-bc-global-search>
      <div class="key-input">
        <WlSearch v-model="keyword" placeholder="搜索" @onChange="onChange" />
      </div>
      <div v-show="!keyword" class="result_empty">
        <img
          src="https://wlmvp-cos.weiling.cn/worktable-h5/images/perch_default_no result.png"
          alt=""
        />
        <p>可以搜索找到对应的联系人或企业</p>
      </div>
      <AllResult
        class="search-con"
        :data="result"
        :keyword="keyword"
        @onSearchItemSelect="onSearchItemSelect"
        @onViewMoreModule="onViewMoreModule"
      />
      <div v-if="loading && keyword" class="loading">
        <div class="loading-pic">
          <WlPic :src="loadingImg" />
        </div>
      </div>
    </div>
  </WlPopup>
  <BCGlobalSearchItem
    v-model="itemPopUpVisible"
    :keyword="keyword"
    :env_data="env_data"
    :search_type="search_type"
    @onSearchItemSelect="onSearchItemSelect"
  />
</template>

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

<script lang="ts" setup>
import { ref, watch } from "vue";
import Api from "./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 WlPic from "@mobileUI/components/WlPic/src/index.vue";
import AllResult from "./components/allResult//index.vue";
import BCGlobalSearchItem from "@mobileUI/components/BCGlobalSearchItem/src/index.vue";
import loadingImg from "@mobileUI/assets/images/loading.png";

type Props = {
  modelValue: boolean;
  env_data: TEnv.TEnvData;
  title?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: "选择跟进对象",
  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", val: 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 itemPopUpVisible = ref(false);
const keyword = ref("");
const result = ref({});
const loading = ref(false);
const search_type = ref(1);

const initData = async () => {
  loading.value = true;
  try {
    const { data } = await Api.getSearchByType({
      keyword: keyword.value,
      page: 1,
      limit: 3,
      search_type: 0,
    });
    result.value = data;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const onChange = (key) => {
  if (!key) {
    result.value = {};
    keyword.value = "";
    return;
  }
  initData();
};

const onSearchItemSelect = (item) => {
  popUpVisible.value = false;
  emit("onSearchItemSelect", item);
};

// 查看更多
const onViewMoreModule = (type) => {
  itemPopUpVisible.value = true;
  search_type.value = type;
};

watch(
  () => props.modelValue,
  (bol) => {
    popUpVisible.value = bol;
  },
);
watch(
  () => popUpVisible.value,
  (bol) => {
    emit("update:modelValue", bol);
  },
);
</script>

<style lang="scss">
.bc-global-search[data-weiling-mobile-ui-bc-global-search] {
  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;
  }

  .loading {
    width: 100%;
    height: 100%;
    @extend %flex-middle-center;

    @keyframes roate {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .loading-pic {
      width: j(28px);
      height: j(28px);
      animation: roate 1s infinite;
    }
  }

  .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>
