<template>
  <div class="business-opportunity-card-input">
    <template v-if="data.input_edit">
      <div
        class="msg-alert"
        v-show="msgVisible && msg_visible"
      >
        <p>{{ msg }}</p>
        <div
          class="icon"
          @click.stop="onCloseMsg"
        >
          <WlPic :src="bo_input_close" />
        </div>
      </div>
      <div @click.stop>
        <van-field
          v-model="title"
          :placeholder="placeholder"
          @blur="onBlur"
          class="input"
        />
      </div>
    </template>
    <DefaultText
      v-else
      :text="modelValue"
    />
  </div>
</template>

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

<script setup lang="ts">
import { ref } from "vue";
import DefaultText from "../DefaultText/index.vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import { bo_input_close } from "@mobileUI/utils/cdn";
type TData = {
  input_edit: boolean;
};

type Props = {
  modelValue: string;
  data: TData;
  msg: string;
  placeholder: string;
  msg_visible: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  data: null,
  msg: "填写商机名称，便于区分不同商机哦～",
  placeholder: "请输入商机名称",
  msg_visible: true
});

type TEditEmit = {
  input_value: string;
  business_data: TData;
};
const emit = defineEmits<{
  (e: "onEdit", val: TEditEmit)
}>()

const title = ref("");
const msgVisible = ref(true);

const onCloseMsg = () => msgVisible.value = false;

const onBlur = () => {
  emit("onEdit", {
    input_value: title.value,
    business_data: props.data,
  });
}
</script>

<style lang="scss">
.business-opportunity-card[data-weiling-mobile-ui-bc-business-card] {
  .business-opportunity-card-input {
    position: relative;

    .msg-alert {
      border: j(1) solid var(--wl-primary-color);
      box-sizing: border-box;
      box-shadow: 0px j(4) j(4) rgba(28, 159, 255, 0.1);
      backdrop-filter: blur(j(4));
      border-radius: j(6);
      padding: j(4) j(12);
      position: absolute;
      top: 0;
      right: j(-10);
      transform: translateY(calc(-100% - 10px));
      font-size: j(14);
      color: var(--wl-primary-color);
      background: rgba(232, 245, 255, 0.6);
      width: fit-content;
      white-space: nowrap;
      @extend %flex-middle;

      &::after {
        content: "";
        border-left: j(10) solid transparent;
        border-right: j(10) solid transparent;
        border-top: j(10) solid rgb(232, 245, 255);
        position: absolute;
        bottom: j(1);
        right: j(104);
        transform: translateY(100%);
      }

      &::before {
        content: "";
        border-left: j(10) solid transparent;
        border-right: j(10) solid transparent;
        border-top: j(11) solid var(--wl-primary-color);
        position: absolute;
        bottom: j(0);
        right: j(104);
        transform: translateY(100%);
      }

      .icon {
        color: rgba(161, 215, 255, 1);
        margin-left: j(9);
        flex-shrink: 0;
        width: j(14);
        height: j(14);
      }
    }

    .input {
      background: var(--wl-primary-color-lightest);
      border-radius: j(4);
      padding: j(4) j(12);
    }
  }
}</style>
