<template>
  <div
    class="clue-list"
    data-weiling-mobile-ui-clue-list
    v-for="data in list"
    :key="data.clue_id"
    @click.stop="onHandleClick(data)"
  >
    <div class="clue-img">{{ data?.nick_name?.[0] }}</div>
    <div>
      <p class="nick-name" v-html="replaceKeyword(data?.nick_name || '-')"></p>
      <p v-if="data.corp_name" class="corp-name">
        {{ data.corp_name }}
      </p>
      <div class="info" v-if="data?.remark_name || data?.mobile || data?.email">
        <p v-if="data?.remark_name">
          备注: <span v-html="replaceKeyword(data?.remark_name)"> </span>
        </p>
        <p v-if="data?.mobile">
          手机号: <span v-html="replaceKeyword(data?.mobile)"> </span>
        </p>
        <p v-if="data?.email">
          邮箱: <span v-html="replaceKeyword(data?.email)"> </span>
        </p>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { TClueItem } from "../types";

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

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

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

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">
.clue-list[data-weiling-mobile-ui-clue-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);
  .clue-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: j(40);
    height: j(40);
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
      180deg,
      #6acbff 0%,
      var(--wl-primary-color) 100%
    );
    font-size: j(18);
    color: #ffffff;
    margin-right: j(12);
  }
  .nick-name {
    color: var(--wl-text-color-title-1);
    font-size: j(16);
    font-weight: 500;
  }
  .corp-name {
    color: var(--wl-text-color-secondary-1);
    font-size: j(12);
    margin-top: j(4);
  }
  .info {
    display: flex;
    align-items: center;
    color: var(--wl-text-color-secondary-1);
    font-size: j(12);
    margin-top: j(4);
    flex-wrap: wrap;
    > p {
      margin-right: j(4);
    }
  }
}
</style>
