<template>
  <div class="render-card">
    <!-- 标题列 -->
    <slot name="card-title" />

    <!-- 字段列 -->
    <div class="card-field">
      <div
        class="card-row"
        v-for="(item, index) in filterList"
        :key="item.key || index"
      >
        <span class="row-left" :style="{ width: item.labelWidth }">{{
          item.label
        }}</span>
        <slot
          v-if="item.slot"
          :name="item.slot"
          :allData="data"
          :data="data[item.key]"
        />

        <template v-else-if="!isEmpty(data[item.key]) && !item.slot">
          <!-- 纯文本渲染 -->
          <span
            v-if="item.vType == 'TEXT' || !item.vType"
            class="row-right"
            :class="{ 'a-row': item.aRow }"
          >
            {{ data[item.key] }}
          </span>
          <!-- 其余样式渲染 -->
          <template v-else>
            <component
              :is="componentDict[item.vType]"
              :data="data[item.key]"
              :listItem="item"
              :allData="data"
              :fieldConfig="fieldConfig"
              :tenantConfig="tenantConfig"
              :is_trial="is_trial"
              v-bind="{ ...$attrs, ...item }"
              v-on="item['event'] || {}"
            />
          </template>
        </template>

        <span v-else class="row-right"> -- </span>
      </div>
    </div>

    <!-- 操作列 -->
    <slot name="card-bottom" />
  </div>
</template>

<script setup lang="ts">
import { computed, markRaw, defineAsyncComponent } from 'vue';
import { VCardItem } from './types/interface';
import Store from '@mobileUI/store';

/* 渲染组件 */
const componentDict = {
  // 用户组（头像可重叠）
  USER_GROUPS: markRaw(
    defineAsyncComponent(() => import('./components/UserGroups/index.vue'))
  ),
  // 用户组（平铺）
  USERS: markRaw(
    defineAsyncComponent(() => import('./components/Users/index.vue'))
  ),
  // 处理文本
  HANDLE_TEXT: markRaw(
    defineAsyncComponent(() => import('./components/HandleText/index.vue'))
  ),
  // 商机阶段
  BUSINESS_STAGE: markRaw(
    defineAsyncComponent(() => import('./components/BusinessStage/index.vue'))
  ),
  // 图片
  IMAGE: markRaw(
    defineAsyncComponent(() => import('./components/Image/index.vue'))
  ),
  // 标签
  TAGS: markRaw(
    defineAsyncComponent(() => import('./components/Tags/index.vue'))
  ),
  // 联系方式
  CONTACT_WAYS: markRaw(
    defineAsyncComponent(() => import('./components/ContactWays/index.vue'))
  ),
};

interface Props {
  data: any;
  list: VCardItem[];
  fieldConfig: any; // config所有字段
  tenantConfig: any; // tenantConfig所有字段字典
  is_trial?: boolean; // 是否试用版
  env_data?: TEnv.VEnvData;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return {};
  },
  list: () => {
    return [];
  },
  fieldConfig: () => {
    return {};
  },
  tenantConfig: () => {
    return {};
  },
  is_trial: false,
  env_data: () => {
    return {};
  },
});

Store.corp_id = props.env_data.corp_id;
Store.node_env = props.env_data.node_env;
Store.sid = props.env_data.sid;
Store.token = props.env_data.token;

/* 列表过滤 */
const filterList = computed(() => {
  return props.list.filter((item: VCardItem) => item.hidden !== true);
});

/* 判断数据是否为空 */
const isEmpty = (val) => {
  return (
    val === null ||
    val === undefined ||
    val === '' ||
    JSON.stringify(val) === '{}' ||
    JSON.stringify(val) === '[]'
  );
};
</script>

<style scoped lang="scss">
.render-card {
  width: 100%;
  padding: j(12);
  background: #ffffff;
  border-radius: j(12);
  box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.08);

  .card-field {
    .card-row {
      display: flex;
      margin-bottom: j(12);

      &:last-child {
        margin-bottom: 0;
      }

      .row-left {
        width: j(60);
        font-weight: 400;
        font-size: j(14);
        line-height: j(21);
        color: #919699;
        flex-shrink: 0;
        margin-right: j(12);
        word-break: break-all;
      }

      .row-right {
        font-weight: 400;
        font-size: j(14);
        line-height: j(21);
        color: #000000;
        word-break: break-word;
      }
    }
  }
  .a-row {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
  }
}
</style>
