<template>
  <!--
    Figma 147:325 (Group 50, 296x42)
    展示型留言条:左侧圆形头像 + 中间居中文本 + 右侧表情 + 发送箭头
    点击整条 / 点击发送箭头会触发 send 事件,父组件可弹出真实输入面板
  -->
  <view class="message-row" @click="handleTap">
    <!-- 外层 pill 容器 (296x42, radius 20) -->
    <view class="message-row__pill">
      <!-- 内嵌凹槽 (238x30, radius 16) -->
      <view class="message-row__groove">
        <text class="message-row__text">{{ displayText }}</text>
      </view>
    </view>

    <!-- 左侧圆形头像 (35x35) -->
    <view class="message-row__avatar">
      <image
        class="message-row__avatar-img"
        :src="avatar || defaultAvatar"
        mode="aspectFill"
      />
      <image
        class="message-row__avatar-fallback"
        src="/static/square/gerentouxiangkuang.png"
        mode="aspectFill"
      />
    </view>

    <!-- 骰子表情 (17x17):点击按顺序循环替换 text -->
    <image
      class="message-row__emoji"
      :class="{ 'is-pressing': pressing }"
      src="/static/rank/activity-support-icon/message-row/emoji.png"
      mode="aspectFit"
      @click.stop="handleEmoji"
      @touchstart="pressing = true"
      @touchend="pressing = false"
      @touchcancel="pressing = false"
    />

    <!-- 发送箭头 (21x21) -->
    <view class="message-row__send" @click.stop="handleSend">
      <image
        class="message-row__send-img"
        src="/static/rank/activity-support-icon/message-row/send.png"
        mode="aspectFit"
      />
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";

/**
 * 点击骰子 emoji 时按顺序循环选用的祝福语。
 * 顺序循环:首次取第一条,再点取下一条,到末尾后回到开头。
 * 调整 / 增删文案直接改这里即可。
 */
const GREETINGS = [
  "今天第一天姐妹们大家冲鸭！！！",
  "冲冲冲！！！生日应援走起～",
  "永远支持你！生日快乐 🎂",
  "前排打卡！爱了爱了 ❤️",
  "姐妹们冲鸭，今天也要元气满满～",
  "生日快乐 🎉 永远守护你！",
  "第一第一！！我永远在你身后",
  "鸭鸭冲鸭！为爱发电不停歇～",
];
// 模块级游标:组件被卸载重建时不会从 0 开始,避免反复重置
let greetingCursor = 0;

function pickNextGreeting() {
  if (GREETINGS.length === 0) return "";
  const next = GREETINGS[greetingCursor % GREETINGS.length];
  greetingCursor += 1;
  return next;
}

const props = defineProps({
  /**
   * 展示的文案:父组件可传入最新一条留言,默认使用 Figma 设计稿文案。
   * 推荐通过 v-model:text 双向绑定,以便点击 emoji 时组件能通知父组件更新。
   */
  text: {
    type: String,
    default: "",
  },
  /**
   * 头像 URL,未传时回退到当前登录用户的 avatar_url。
   */
  avatar: {
    type: String,
    default: "",
  },
  /**
   * 兼容旧用法:外部如果还在传 placeholder,作为 text 的兜底。
   */
  placeholder: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["send", "tap", "update:text"]);

// 兜底默认头像:不再硬编码,直接读取 Vuex user 模块中的 avatar_url
// (登录时已通过 SET_USER_INFO 写入 store 与本地缓存,头像更新后也会触发 userInfoUpdated 通知)
const store = useStore();
const userInfo = computed(() => store.state.user?.userInfo || null);
const defaultAvatar = computed(() => userInfo.value?.avatar_url || "");

// 按下反馈:触摸 / 按下时短暂为 true,松开恢复
const pressing = ref(false);

const displayText = computed(() => {
  if (props.text && props.text.trim().length > 0) return props.text;
  if (props.placeholder && props.placeholder.trim().length > 0)
    return props.placeholder;
  return "今天第一天姐妹们大家冲鸭！！！";
});

function handleTap() {
  emit("tap");
}

function handleEmoji() {
  // 抛 update:text 让父组件以 v-model:text 接收;不修改 props.text 本地副本,
  // 避免父组件没接 v-model 时出现"看起来生效但父组件状态没变"的伪成功。
  emit("update:text", pickNextGreeting());
}

function handleSend() {
  // 展示型组件:点击发送图标抛出事件,业务侧决定弹出输入面板 / 直接发送等行为
  emit("send", displayText.value);
}
</script>

<style scoped>
/*
 * 设计稿原始尺寸 (px)  →  rpx (按 750 / 375 = 2 倍换算)
 * 容器     296 x 42    →  592rpx x 84rpx
 * 凹槽     238 x 30    →  476rpx x 60rpx  (left 12px=24rpx,top 6px=12rpx)
 * 头像     35  x 35    →  70rpx  x 70rpx  (left 6px=12rpx,top 3px=6rpx)
 * 文本     11px        →  22rpx
 * emoji   17  x 17    →  34rpx  x 34rpx
 * send    21  x 21    →  42rpx  x 42rpx
 */

.message-row {
  position: fixed;
  left: 22rpx; /* 11px */
  bottom: 32rpx;
  width: 592rpx;
  height: 84rpx;
  z-index: 50;
}

/* 外层 pill */
.message-row__pill {
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, 0.4);
  border-radius: 40rpx; /* 20px */
  box-shadow: 2rpx 4rpx 8rpx 0 rgba(0, 0, 0, 0.25);
}

/* 内嵌凹槽 */
.message-row__groove {
  position: absolute;
  left: 24rpx; /* 12px */
  top: 12rpx; /* 6px */
  width: 412rpx; /* 238px */
  height: 60rpx; /* 30px */
  background: rgba(54, 51, 51, 0.1);
  border-radius: 32rpx; /* 16px */
  display: flex;
  align-items: center;
  /* 头像突出在 pill 左侧,文字从凹槽右半段开始;末尾留出表情 + 发送图标空间 */
  padding-left: 80rpx;
  /* padding-right: 120rpx; */
  overflow: hidden;
}

.message-row__text {
  display: block;
  width: 100%;
  font-size: 22rpx; /* 11px */
  line-height: 1.3;
  color: #ffffff;
  font-weight: bold;
  font-family: "Abhaya Libre ExtraBold", "PingFang SC", sans-serif;
  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 设计稿的轻微倾斜 */
  transform: rotate(-0.44deg) skewX(-0.1deg);
  transform-origin: center;
}

/* 左侧头像 (突出 pill 左缘) */
.message-row__avatar {
  position: absolute;
  left: 12rpx; /* 6px */
  top: 6rpx; /* 3px */
  width: 70rpx; /* 35px */
  height: 70rpx;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 14rpx 0 rgba(203, 24, 24, 0.84);
  background: #2a1111;
}

.message-row__avatar-img {
  width: 100%;
  height: 100%;
  display: block;
}

.message-row__avatar-fallback {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  transform: scale(1.05);
}

/* 骰子表情 */
.message-row__emoji {
  position: absolute;
  right: 92rpx; /* ≈ 46px from right edge */
  top: 24rpx; /* (84-34)/2 ≈ 25 */
  width: 34rpx; /* 17px */
  height: 34rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(138, 6, 6, 0.74));
  transition: transform 0.12s ease;
}

/* emoji 按下反馈(顺序循环选祝福语的可点击提示) */
.message-row__emoji.is-pressing,
.message-row__emoji:active {
  transform: scale(0.85);
}

/* 右侧发送箭头 (可点击) */
.message-row__send {
  position: absolute;
  right: 28rpx; /* ≈ 14px */
  top: 20rpx; /* 21 */
  width: 42rpx; /* 21px */
  height: 42rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6rpx 8rpx rgba(0, 0, 0, 0.47));
}

.message-row__send-img {
  width: 100%;
  height: 100%;
}

.message-row__send:active {
  transform: scale(0.92);
  transition: transform 0.12s ease;
}
</style>
