<template>
  <div
    class="glo-company-list"
    data-weiling-mobile-ui-glo-company-list
    v-for="data in list"
    :key="data.company_id"
    @click.stop="onHandleClick(data)"
  >
    <WlPic
      class="company-img"
      :src="
        data.image_url ||
        'https://wlmvp-cos.weiling.cn/website/worktable-erp/images/default/overview-company-icon.png'
      "
    ></WlPic>
    <div>
      <p
        v-if="data.abbreviation || data.company_name"
        class="nick-name"
        v-html="replaceKeyword(data.abbreviation || data.company_name)"
      ></p>
      <p
        v-if="data.company_name && data.abbreviation"
        class="company-name"
        v-html="replaceKeyword('全名: ' + data.company_name)"
      ></p>
    </div>
  </div>
  <!-- </div> -->
</template>

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

interface Props {
  list: TCompanyItem[];
  keyword: string;
  search_type: number;
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  keyword: "",
});

const emit = defineEmits<{
  (e: "onSearchItemSelect", val: TCompanyItem);
}>();

const replaceKeyword = (str: string) => {
  if (!str) return "";
  if (!props.keyword) return str;
  const reg = new RegExp(props.keyword, "ig");
  return str.replace(reg, function (text: string) {
    return `<span style="color: var(--wl-primary-color)">${text}</span>`;
  });
};

const onHandleClick = (item) => {
  emit("onSearchItemSelect", {
    ...item,
    search_type: props.search_type,
  });
};
</script>

<style scoped lang="scss">
.glo-company-list[data-weiling-mobile-ui-glo-company-list] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: j(12) 0;
  cursor: pointer;
  background-color: #ffffff;
  margin-bottom: j(8);
  border-radius: j(4);
  padding: j(8) j(12);
  .company-img {
    width: j(40);
    height: j(40);
    flex-shrink: 0;
    margin-right: 12px;
  }
  .nick-name {
    color: var(--wl-text-color-title-1);
    font-size: j(16);
    font-weight: 500;
  }
  .company-name {
    color: var(--wl-text-color-title-2);
    font-size: j(12);
    margin-top: j(4);
  }
  .info {
    display: flex;
    align-items: center;
    color: var(--wl-text-color-secondary-2);
    font-size: j(12);
    margin-top: j(4);
    flex-wrap: wrap;
    > p {
      margin-right: j(4);
    }
  }
}
</style>
