<template>
  <div
    class="customer-list"
    data-weiling-mobile-ui-customer-list
    v-for="data in list"
    :key="data.external_userid"
    @click.stop="onHandleClick(data)"
  >
    <div class="customer_user">
      <WlPic
        class="head-img avatar"
        :src="
          data.head_img_url ||
          'https://wlmvp-cos.weiling.cn/worktable-h5/icon/lxx-icon/default_head.png'
        "
        alt=""
      />
      <WlPic class="from-type" :src="getImg(data)" />
    </div>
    <div class="customer-list-info">
      <p class="name" v-html="replaceKeyword(data?.nick_name || '-')" />
      <p
        v-if="data.corp_name"
        class="crop_name"
        :style="{
          color:
            data.type == 1
              ? 'var(--wl-success-color)'
              : 'var(--wl-warning-color)',
        }"
      >
        {{ 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>
</template>

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

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

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

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

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 getImg = ({ type }: TCustomeItem) => {
  const fromAry = {
    1: "https://wlmvp-cos.weiling.cn/worktable-h5/icon/lxx-icon/wechat.png",
    2: "https://wlmvp-cos.weiling.cn/worktable-h5/icon/lxx-icon/qw.png",
  };
  return fromAry[type] || "";
};

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

<style scoped lang="scss">
.customer-list[data-weiling-mobile-ui-customer-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);
  .customer_user {
    position: relative;
    width: j(40);
    height: j(40);
    margin-right: j(12);
    flex-shrink: 0;
    .head-img {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      object-fit: cover;
      border-radius: 50%;
      overflow: hidden;
    }
    .from-type {
      height: j(16);
      width: j(16);
      position: absolute;
      right: -4px;
      bottom: -4px;
    }
  }
  .customer-list-info {
    flex: 1;
    overflow: hidden;
    .name {
      width: 100%;
      font-size: j(16);
      color: var(--wl-text-color-title-1);
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .crop_name {
      color: var(--wl-success-color);
      flex: 1;
      margin-top: j(4);
      font-size: j(12);
    }
    .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>
