<template>
  <div class="render-card-friends a-row">
    <div class="user" v-if="data?.bind_id" @click.stop="onItem">
      <WlPic
        class="user-img"
        :src="data?.head_img_url || defaultAvatar"
        alt=""
      />
      <WlStaffName
        class="user-name a-row"
        :name="data.nick_name"
        :openid="data?.userid_third"
        :is_trial="is_trial"
      />
      <WlSvgIcon
        v-if="listItem?.allowClick"
        type="arrowRight"
        width="16"
        height="16"
        color="#C2C8CC"
        class="arrow-icon"
      />
    </div>

    <div
      class="friends-add"
      v-else-if="!data?.bind_id && listItem.isAdd"
      @click.stop="onAdd"
    >
      <WlSvgIcon
        type="add"
        width="12"
        height="12"
        color="var(--wl-primary-color)"
      />
      <span>添加</span>
    </div>

    <div v-else>--</div>

    <MulteTypePersonnerSelect
      v-model:value="showPerson"
      :title="listItem.title || `选择${listItem.label}`"
      :env_data="env_data"
      :tabTypes="[1, 2]"
      isRadio
      @onHandleChoose="onPersonChoose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { VCardItem } from "../../types/interface";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import { defaultAvatar } from "@mobileUI/utils/cdn";
import WlStaffName from "@mobileUI/components/WlStaffName/src/index.vue";
import MulteTypePersonnerSelect from "@mobileUI/components/BCMulteTypePersonnerSelect";

interface Props {
  data: any;
  listItem: VCardItem;
  is_trial: boolean;
  env_data: TEnv.TEnvData;
}
const props = withDefaults(defineProps<Props>(), {
  data: (): any => {},
  listItem: (): VCardItem => {
    return {};
  },
  is_trial: false,
  env_data: (): any => {
    return {};
  },
});

const emit = defineEmits<{
  (e: "onPersonChoose", val: any): void;
  (e: "onItem", val: any): void;
}>();

const showPerson = ref(false);
const onAdd = () => {
  showPerson.value = true;
};
const onPersonChoose = (obj: any) => {
  emit("onPersonChoose", obj);
};

// 点击好友
const onItem = () => {
  if (!props.listItem?.allowClick) return;
  emit("onItem", {
    data: props.data,
    listItem: props.listItem,
  });
};
</script>

<style scoped lang="scss">
.render-card-friends {
  .user {
    @extend %flex-middle;
    cursor: pointer;
    .user-img {
      width: j(20);
      height: j(20);
      border: j(1) solid #e4e9ed;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .user-name {
      margin-left: j(6);
      line-height: j(20);
    }
    .arrow-icon {
      flex-shrink: 0;
      margin-top: j(2);
    }
  }

  .friends-add {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: j(4) j(8);
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--wl-primary-color-light, #e8f9ff);
    color: var(--wl-primary-color);

    span {
      color: var(--wl-primary-color);
      margin-left: j(4);
      font-size: j(12);
    }
  }
}
.a-row {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
}
</style>
