<template>
  <div
    class="business-opportunity-card"
    data-weiling-mobile-ui-bc-business-card
  >
    <div class="tag" v-if="data['tag'] && tag_show">
      <p>{{ data.tag }}</p>
    </div>
    <div
      class="field-wrap"
      v-for="item in list"
      :key="item.id"
      v-show="item_show(item.key)"
    >
      <div class="field">
        <p class="field-label">{{ item.label }}</p>
        <div class="field-content" :style="info_style(item)">
          <component
            :is="currentComponent[item.type]"
            v-bind="Object.assign(item, $attrs)"
            :data="item.type === 'WlUser' ? data[item.key] : data"
            v-model="formData[item.key]"
            effect="needMasker"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCBusinessCard",
};
</script>

<script setup lang="ts">
import {
  computed,
  defineAsyncComponent,
  reactive,
  markRaw,
  ref,
  watchEffect,
} from "vue";

const currentComponent = reactive({
  DefaultText: markRaw(
    defineAsyncComponent(() => import("./components/DefaultText/index.vue")),
  ),
  SelectStage: markRaw(
    defineAsyncComponent(() => import("./components/SelectStage/index.vue")),
  ),
  DefaultInput: markRaw(
    defineAsyncComponent(() => import("./components/DefaultInput/index.vue")),
  ),
  WlUser: markRaw(
    defineAsyncComponent(
      () => import("@mobileUI/components/WlUser/src/index.vue"),
    ),
  ),
});

type VBusinessWithTagData = TBusiness.TBusinessData & {
  tag: string;
  tagShow: boolean;
};

type Props = {
  data: VBusinessWithTagData;
  keyword?: string;
  list?: Partial<TBusiness.TBusinessList>[];
};

const props = withDefaults(defineProps<Props>(), {
  data: null,
  keyword: "",
  list: () => [
    {
      id: 1,
      type: "DefaultText",
      key: "name",
      label: "商机名称",
    },
    {
      id: 3,
      type: "SelectStage",
      key: "stage",
      label: "商机阶段",
    },
    {
      id: 2,
      type: "WlUser",
      key: "owner",
      label: "归属人",
    },
  ],
});

const formData = ref<VBusinessWithTagData>();

const info_style = computed(() => {
  return (item) => {
    const { type = "" } = item;
    const { input_edit = false } = formData.value;
    return { overflow: type === "Input" && input_edit ? "inherit" : "hidden" };
  };
});

const item_show = computed(() => {
  return (key) => {
    const { hidden = {} } = formData.value;
    return !hidden[key];
  };
});

const tag_show = computed(() => {
  const { tagShow = null, input_edit = false } = formData.value;
  return tagShow === null ? !input_edit : tagShow;
});

watchEffect(() => {
  formData.value = props.data;
});
</script>

<style lang="scss">
.business-opportunity-card[data-weiling-mobile-ui-bc-business-card] {
  padding: j(12) j(16);
  background: #ffffff;
  border-radius: j(10);
  position: relative;
  box-sizing: border-box;

  .tag {
    position: absolute;
    width: fit-content;
    padding: j(2) j(6);
    border-bottom-left-radius: j(10);
    border-top-right-radius: j(10);
    top: -2px;
    right: -4px;
    color: rgba(41, 194, 191, 1);
    background-color: rgba(240, 255, 252, 1);
    transform: scale(0.9);
    z-index: 1;
    @extend %flex-middle-center;
  }

  .field-wrap {
    &:not(:last-child) {
      margin-bottom: j(14);
    }

    .field {
      @extend %flex-middle;

      .field-label {
        flex-shrink: 0;
        font-size: j(14);
        color: var(--wl-text-color-secondary-2);
        margin-right: j(20);
      }

      .field-content {
        flex: 1;
        max-width: calc(100% - 128px);
        // @include textEllipsis(1);
      }
    }
  }
}
</style>
