<template>
  <span class="handle-text" :class="{ 'a-row': listItem.aRow }">
    <span
      style="word-break: break-word"
      :class="{
        'a-row': listItem.aRow,
        'handle-text--clickable':
          props.listItem?.allowClick && props.listItem?.viewType,
      }"
      @click.stop="onItem"
      >{{ handleData }}</span
    >
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { typeDetection, formatDate } from '../../hooks/utils';
import { VCardItem } from '../../types/interface';

interface Props {
  data: any;
  listItem: VCardItem;
  allData?: any;
  fieldConfig: any;
  tenantConfig: any;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return {};
  },
  listItem: () => {
    return {
      aRow: false,
    };
  },
  allData: () => {
    return {};
  },
  fieldConfig: () => {
    return {};
  },
  tenantConfig: () => {
    return {};
  },
});

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

/* 数据处理 */
const handleData = computed(() => {
  let value = '';
  switch (props.listItem?.handleType) {
    case 'PHONE':
      value = handlePhone(props.data);
      break;
    case 'CHANNEL':
      value = getChannelName(props.data);
      break;
    case 'COMPANY':
      value = handleCompany(
        Array.isArray(props.data) ? props.data : [props.data]
      );
      break;
    case 'DATE':
      value = handleDate(props.data, props.listItem?.format);
      break;
    case 'SELECT':
      value = handleSelect(props.data, props.listItem?.enum_name);
      break;
    case 'MULTI_SELECT':
      value = handleMultiSelect(props.data, props.listItem?.enum_name);
      break;
    case 'REGION':
      value = props.data?.name;
      break;
    case 'FLOAT_NUMBER':
      value = props.listItem?.format == '%' ? `${props.data}%` : props.data;
      break;
    default:
      break;
  }
  return value;
});

// 字段查找
const getters_tenant_config_by_key = computed(
  () => (name: string, key: string | number) => {
    const info = props.tenantConfig?.[name];
    return info?.find((res: any) => res.key == key) || {};
  }
);

/* 手机号处理 */
const handlePhone = (phone: any) => {
  const type = typeDetection(phone);
  if (type === 'string') {
    const phoneList = phone.split(',');
    return phoneList?.length > 1
      ? `${phoneList[0]} 共${phoneList.length}个`
      : phone;
  } else if (type === 'array') {
    return phone?.length > 1
      ? `${phone[0]?.mobile} 共${phone.length}个`
      : phone?.[0].mobile;
  }
};

/* 渠道匹配 */
const getChannelName = (id: string | number) => {
  return getters_tenant_config_by_key.value('clue_from_channel', id)?.full_name;
};

/* 企业处理 */
const handleCompany = (val: any[]) => {
  return val?.length > 1
    ? `${val[0]?.company_name} 共${val.length}个`
    : val?.[0]?.company_name;
};

/* 日期处理 */
const handleDate = (val: string | number, format: string) => {
  return formatDate(val, format || 'YYYY-MM-DD');
};

/* 单选处理 */
const handleSelect = (val: string | number, enum_name: string) => {
  const tenantConfig: any = getters_tenant_config_by_key.value;
  if (enum_name === 'business_fail_reason') {
    // 丢单原因处理
    return val == 99
      ? `[${tenantConfig(enum_name, val)?.value}] ${
          props.allData?.fail_reason_desc
        }`
      : tenantConfig(enum_name, val)?.value;
  }
  return tenantConfig(enum_name, val)?.value || '';
};

/* 多选处理 */
const handleMultiSelect = (val: any[], enum_name: string) => {
  const tenantConfig: any = props.tenantConfig[enum_name] || [];
  return tenantConfig
    ?.filter((e: any) => val.includes(e.key) || val.includes(+e.key))
    ?.map((res: any) => res.value)
    ?.join('、');
};

/* 点击某一行 */
const onItem = () => {
  if (!props.listItem?.allowClick) return;
  emit('onItem', {
    data: props.data,
    listItem: props.listItem,
  });
};
</script>
<style scoped lang="scss">
.handle-text {
  display: flex;
  .a-row {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
  }
  &--clickable {
    color: var(--wl-primary-color);
    cursor: pointer;
  }
}
</style>
