<template>
  <div class="contact-way a-row">
    <span class="a-row">{{ data?.[0]?.contact_way }}</span>
    <div class="fsc" v-if="data?.length > 1">
      <span class="way-length" @click.stop="popupVisible = true"
        >共{{ data?.length }}条</span
      >
      <WlSvgIcon class="icon" type="arrowRight" />
    </div>

    <WlPopup
      v-model="popupVisible"
      title="联系方式列表"
      position="center"
      headerVisible
      round
      :style="{ height: 'auto' }"
    >
      <div class="ways-popover">
        <template v-for="item in infoPop" :key="item.type">
          <div class="ways-title">
            <WlSvgIcon class="ways-icon" :type="item.icon" />
            {{ item.contact_way_name }}：
          </div>
          <div class="ways-phone" v-for="(v, i) in item.list" :key="i">
            {{ v.contact_way }}
          </div>
        </template>
      </div>
    </WlPopup>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { VCardItem } from '../../types/interface';
import WlPopup from '@mobileUI/components/WlPopup/src/index.vue';
import WlSvgIcon from '@mobileUI/components/WlSvgIcon/src/index.vue';

interface Props {
  data: any;
  listItem: VCardItem;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return [];
  },
  listItem: () => {
    return {
      aRow: false,
    };
  },
});

const popupVisible = ref(false);

// pop数据
const typeIcon: any = {
  1: 'smart-phone',
  2: 'landline',
  3: 'mail',
};
const infoPop = computed(() => {
  return props.data?.reduce((acc: any[], item: any) => {
    const existingType = acc.find((i) => i.type === item.type);
    if (existingType) {
      existingType.list.push(item);
    } else {
      acc.push({
        type: item.type,
        icon: typeIcon[item.type] || 'jigsaw',
        contact_way_name: item.contact_way_name,
        list: [item],
      });
    }
    return acc;
  }, []);
});
</script>

<style scoped lang="scss">
.contact-way {
  display: flex;
  align-items: center;
  gap: j(4);
  color: var(--wl-text-color-primary-1, #303233);
  font-size: j(14);
  font-weight: 400;
  .way-length {
    color: var(--wl-primary-color, #1c9fff);
    font-size: j(14);
    font-weight: 400;
  }
  .icon {
    width: j(12);
    height: j(12);
    color: var(--wl-primary-color, #1c9fff);
  }
  .a-row {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
  }
}
</style>
<style lang="scss">
.ways-popover {
  width: j(300);
  max-height: j(300);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: j(8);
  padding: j(8) j(24) j(24);
  .ways-title {
    display: flex;
    align-items: center;
    gap: j(4);
    color: var(--wl-text-color-secondary-1, #797c80);
    font-size: j(12);
    font-weight: 400;
    margin-top: j(8);
    .ways-icon {
      width: j(14);
      height: j(14);
    }
  }
  .ways-phone {
    color: var(---text---title-2, #303233);
    font-size: j(14);
    font-weight: 400;
    word-break: break-all;
  }
}
</style>
