<template>
  <view class="bubble-container" :class="{ 'mine': isMine, 'other': !isMine }">
    <!-- 头像 -->
    <image class="avatar" :src="avatar" mode="aspectFill"></image>

    <!-- 消息内容包裹 -->
    <view class="content-wrapper">

      <!-- 文本/语音/视频/图片 气泡 -->
      <view class="message-bubble"
            :class="['type-' + msg.message_type, { 'no-padding': isMediaOrCard || isSystemPriceUpdate }]"
      >

        <!-- 0. 文本 -->
        <text v-if="msg.message_type === 0" class="text-content" user-select>{{ parsedContent }}</text>

        <!-- 1. 图片 -->
        <image v-else-if="msg.message_type === 1"
               :src="parsedContent"
               mode="widthFix"
               class="media-content image"
               @click="$emit('previewImage', parsedContent)">
        </image>

        <!-- 2. 语音 (优化：动态宽度 + 播放动画) -->
        <view v-else-if="msg.message_type === 2"
              class="audio-content"
              :style="{ width: getAudioWidth(msg.duration) }"
              @click="$emit('playAudio', msg)">

          <!-- 我发的：时长在左，图标在右 -->
          <block v-if="isMine">
            <text class="duration">{{ msg.duration }}''</text>
            <view class="voice-icon-wrap mine" :class="{ 'playing': isPlaying }">
              <u-icon name="volume-fill" size="20" color="#fff"></u-icon>
            </view>
          </block>

          <!-- 别人发的：图标在左，时长在右 -->
          <block v-else>
            <view class="voice-icon-wrap other" :class="{ 'playing': isPlaying }">
              <u-icon name="volume-fill" size="20" color="#333"></u-icon>
            </view>
            <text class="duration">{{ msg.duration }}''</text>
          </block>

        </view>

        <!-- 3. 视频 -->
        <video v-else-if="msg.message_type === 3"
               :src="parsedContent"
               controls
               class="media-content video">
        </video>

        <!-- 9. 系统消息 (优化：回归原生服务通知风格) -->
        <block v-else-if="msg.message_type === 9">
          <!-- 改价通知卡片 -->
          <view
              v-if="parsedContent.type === 'price_update' || parsedContent.type === 'price_adjust'"
              class="service-notify-card"
              @click="parsedContent.order_id && $emit('viewOrder', parsedContent.order_id, parsedContent.order_no)"
          >
            <!-- 卡片头部 -->
            <view class="sn-header">
              <text class="sn-title">{{ parsedContent.type === 'price_update' ? '订单改价通知' : '费用调整提醒' }}</text>
            </view>

            <!-- 卡片内容区：标准键值对列表 -->
            <view class="sn-body">

              <!-- 场景A: 运费/总价更新 -->
              <block v-if="parsedContent.type === 'price_update'">
                <view class="sn-row">
                  <text class="sn-label">变动说明</text>
                  <text class="sn-value">{{ parsedContent.message }}</text>
                </view>
                <view class="sn-row">
                  <text class="sn-label">最新应付</text>
                  <text class="sn-value price">¥{{ parsedContent.total_pay_price }}</text>
                </view>
                <view class="sn-row">
                  <text class="sn-label">订单编号</text>
                  <text class="sn-value sub">{{ parsedContent.order_no }}</text>
                </view>
              </block>

              <!-- 场景B: 单品/明细调整 -->
              <block v-else-if="parsedContent.type === 'price_adjust'">
                <view class="sn-row">
                  <text class="sn-label">调整项目</text>
                  <text class="sn-value truncate">{{ parsedContent.drug_name || '医疗服务' }}</text>
                </view>

                <view class="sn-row">
                  <text class="sn-label">价格变动</text>
                  <view class="sn-value-group">
                    <text class="old">¥{{ parsedContent.old_price }}</text>
                    <u-icon name="arrow-right" size="10" color="#999" style="margin:0 4rpx;"></u-icon>
                    <text class="new">¥{{ parsedContent.new_price }}</text>
                  </view>
                </view>

                <view class="sn-row">
                  <text class="sn-label">变动金额</text>
                  <text class="sn-value" :class="parsedContent.adjust_amount >= 0 ? 'color-orange' : 'color-green'">
                    {{ parsedContent.adjust_amount >= 0 ? '增加' : '减少' }} ¥{{ Math.abs(parsedContent.adjust_amount) }}
                  </text>
                </view>

                <view class="sn-row">
                  <text class="sn-label">当前总额</text>
                  <text class="sn-value strong">¥{{ parsedContent.total_pay_price }}</text>
                </view>
              </block>

            </view>

            <!-- 底部操作栏 -->
            <view class="sn-footer">
              <text>查看详情</text>
              <u-icon name="arrow-right" size="12" color="#ccc"></u-icon>
            </view>
          </view>

          <!-- 普通系统文本 (保持原样) -->
          <view v-else class="system-inner">
            <text>{{ msg.message_content }}</text>
          </view>
        </block>

        <!-- 卡片类消息 (4, 10, 11, 12, 13) -->
        <view v-else-if="isCardType" class="card-content">

          <!-- 类型10: 挂号 -->
          <block v-if="msg.message_type === 10">
            <view class="card-header bg-green">
              <view class="title-group"><u-icon name="calendar-fill" size="16" color="#059669"></u-icon><text class="card-title">预约挂号</text></view>
              <text class="status-tag" :class="'status-' + parsedContent.status">{{ getRegisterStatusText(parsedContent.status) }}</text>
            </view>
            <view class="card-body">
              <view class="info-row"><text class="label">订单号</text><text class="value order-font">{{ parsedContent.order_no }}</text></view>
              <view class="info-row"><text class="label">就诊人</text><text class="value">{{ (parsedContent.user_patient && parsedContent.user_patient.name) || '未知' }}</text></view>
              <view class="info-row highlight"><text class="label">费用</text><text class="value price">¥{{ parsedContent.price }}</text></view>
            </view>
            <view class="card-footer"><button class="action-btn" @click="$emit('viewRegister', parsedContent.id)">查看详情</button></view>
          </block>

          <!-- 类型11: 患者就诊经历 -->
          <block v-else-if="msg.message_type === 11">
            <view class="card-header bg-gray">
              <view class="title-group"><u-icon name="file-text-fill" size="16" color="#64748B"></u-icon><text class="card-title">患者就诊经历</text></view>
            </view>
            <view class="card-body">
              <view class="info-row" v-if="parsedContent.drug_name">
                <text class="label">药品名称</text>
                <text class="value">{{ parsedContent.drug_name }}</text>
              </view>
              <view class="text-block" v-if="parsedContent.illness_info">
                <text class="block-label">症状描述</text>
                <text class="block-content">{{ parsedContent.illness_info }}</text>
              </view>
              <view class="info-row"><text class="label">是否就诊过</text><text class="value">{{ parsedContent.has_visited === '1' ? '是' : '否' }}</text></view>
              <view class="info-row"><text class="label">是否使用过药品</text><text class="value">{{ parsedContent.has_used_drug === '1' ? '是' : '否' }}</text></view>
            </view>
          </block>

          <!-- 类型4: 电子处方 -->
          <block v-else-if="msg.message_type === 4">
            <view class="card-header bg-blue">
              <view class="title-group"><u-icon name="order" size="16" color="#0A84FF"></u-icon><text class="card-title">电子处方</text></view>
              <text class="status-tag blue">{{ getStatusText(parsedContent.status) }}</text>
            </view>
            <view class="card-body">
              <view class="info-row"><text class="label">诊断单号</text><text class="value small">{{ parsedContent.order_no }}</text></view>
              <view class="info-row"><text class="label">金额</text><text class="value price">¥{{ parsedContent.total_pay_price }}</text></view>
            </view>
            <view class="card-footer split">
              <text class="link-btn" @click="$emit('viewPrescription', parsedContent.id, parsedContent.order_no)">详情</text>
              <button class="action-btn primary" @click="$emit('goToOrderMedicine', parsedContent.order_id, parsedContent.order_no)">一键购药</button>
            </view>
          </block>

          <!-- 类型12: 商品 -->
          <block v-else-if="msg.message_type === 12">
            <view class="card-header bg-blue">
              <view class="title-group"><u-icon name="shopping-cart-fill" size="16" color="#0A84FF"></u-icon><text class="card-title">推荐商品</text></view>
            </view>
            <view class="card-body">
              <view class="info-row"><text class="label">名称</text><text class="value">{{ parsedContent.product_name }}</text></view>
              <view class="info-row"><text class="label">价格</text><text class="value price">¥{{ parsedContent.price }}</text></view>
            </view>
          </block>

          <!-- 类型13: 结束问诊 -->
          <block v-else-if="msg.message_type === 13">
            <view class="card-header bg-green">
              <view class="title-group"><u-icon name="checkmark-circle-fill" size="16" color="#059669"></u-icon><text class="card-title">问诊结束</text></view>
            </view>
            <view class="card-body">
              <text class="desc-text">{{ parsedContent.reason || '本次服务已完成' }}</text>
            </view>
          </block>

          <block v-else>
            <view class="card-body"><text>不支持的消息类型</text></view>
          </block>

        </view>

        <!-- 其他未知类型默认显示文本 -->
        <text v-else class="text-content">{{ parsedContent }}</text>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MessageBubble",
  props: {
    msg: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean,
      default: false
    },
    avatar: {
      type: String,
      default: ''
    },
    isPlaying: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 纯文本、图片、语音、视频以外的特殊类型，不需要默认的气泡背景/Padding
    isMediaOrCard() {
      // 1:图片, 3:视频, 4,10,11,12,13: 卡片 (9单独处理)
      return [1, 3, 4, 10, 11, 12, 13].includes(this.msg.message_type);
    },
    // 是否是系统消息且为价格变动（需要独立卡片样式）
    isSystemPriceUpdate() {
      return this.msg.message_type === 9 && (this.parsedContent.type === 'price_update' || this.parsedContent.type === 'price_adjust');
    },
    isCardType() {
      return [4, 10, 11, 12, 13].includes(this.msg.message_type);
    },
    parsedContent() {
      const { message_type, message_content } = this.msg;
      // 包含9(System)在内的复杂类型尝试解析 JSON
      if ([4, 9, 10, 11, 12, 13].includes(message_type)) {
        try {
          return typeof message_content === 'object' ? message_content : JSON.parse(message_content);
        } catch (e) {
          return message_content;
        }
      }
      return message_content;
    }
  },
  methods: {
    // 计算语音条宽度 (Min: 100rpx, Max: 350rpx, Unit: 10rpx/sec)
    getAudioWidth(duration) {
      const min = 120;
      const max = 350;
      const unit = 12;
      let w = min + (parseInt(duration) || 0) * unit;
      return Math.min(w, max) + 'rpx';
    },
    getStatusText(status) { const map = { 0: '待审核', 1: '已审核', 2: '未通过' }; return map[status] || '状态未知'; },
    getRegisterStatusText(status) { const map = { 0: '待就诊', 1: '已缴费', 2: '已就诊', 3: '已取消', 4: '已退费' }; return map[status] || '状态未知'; },
  }
}
</script>

<style lang="scss" scoped>
// 变量
$primary: #0A84FF;
$bg-mine: #0A84FF;
$bg-other: #FFFFFF;
$text-main: #333333;
$text-sub: #666666;
$radius-bubble: 12rpx;
$price-color: #FF4D4F; // 价格红
$success-color: #059669;

.bubble-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  width: 100%;

  .avatar {
    width: 72rpx; height: 72rpx;
    border-radius: 10rpx;
    flex-shrink: 0;
    background: #f2f2f2;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 72%; // 稍微放宽一点
  }

  &.other {
    flex-direction: row;
    .avatar { margin-right: 16rpx; }
    .message-bubble {
      background-color: $bg-other;
      color: $text-main;
      border-radius: 4rpx $radius-bubble $radius-bubble $radius-bubble;

      // 添加小箭头
      &::before {
        content: ''; position: absolute; top: 20rpx; left: -10rpx;
        width: 0; height: 0;
        border-top: 10rpx solid transparent;
        border-bottom: 10rpx solid transparent;
        border-right: 12rpx solid $bg-other;
      }
      // 卡片或特殊系统消息不需要箭头
      &.no-padding::before { display: none; }
    }
  }

  &.mine {
    flex-direction: row-reverse;
    .avatar { margin-left: 16rpx; }
    .message-bubble {
      background-color: $bg-mine;
      color: #fff;
      border-radius: $radius-bubble 4rpx $radius-bubble $radius-bubble;

      &::after {
        content: ''; position: absolute; top: 20rpx; right: -10rpx;
        width: 0; height: 0;
        border-top: 10rpx solid transparent;
        border-bottom: 10rpx solid transparent;
        border-left: 12rpx solid $bg-mine;
      }
      &.no-padding::after { display: none; }
    }
  }
}

.message-bubble {
  padding: 18rpx 24rpx;
  font-size: 30rpx;
  line-height: 1.5;
  position: relative;
  word-break: break-all;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
  min-height: 72rpx;
  display: flex; align-items: center;

  &.no-padding {
    padding: 0;
    background: transparent;
    box-shadow: none;
    &::before, &::after { display: none; }
  }
}

// 图片/视频
.media-content {
  border-radius: 8rpx;
  &.image { max-width: 300rpx; display: block; }
  &.video { width: 300rpx; height: 170rpx; }
}

// ========== 语音条样式 (Audio) ==========
.audio-content {
  display: flex; align-items: center;
  // 宽度由 style 动态控制，这里不要锁死 width
  justify-content: space-between;

  .duration {
    font-size: 26rpx;
    white-space: nowrap;
  }

  .voice-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 44rpx; height: 44rpx;

    // 对方发的消息，图标在左，波纹向右(默认)
    &.other {
      margin-right: 6rpx;
    }

    // 我发的消息，图标在右，波纹需要转向左侧 (rotate 180)
    &.mine {
      margin-left: 6rpx;
      transform: rotate(180deg);
    }

    // 播放时的动画：呼吸/波动效果
    &.playing {
      animation: voice-pulse 1.2s infinite ease-in-out;
    }
  }
}

// 语音播放动画关键帧
@keyframes voice-pulse {
  0% { opacity: 1; transform: scale(1) rotate(var(--rotate-angle, 0deg)); }
  50% { opacity: 0.4; transform: scale(0.92) rotate(var(--rotate-angle, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rotate-angle, 0deg)); }
}
// 为了解决 rotate 和 scale 同时作用的问题，分别定义 mine 和 other
.voice-icon-wrap.mine.playing { --rotate-angle: 180deg; animation: voice-pulse 1.2s infinite ease-in-out; }
.voice-icon-wrap.other.playing { --rotate-angle: 0deg; animation: voice-pulse 1.2s infinite ease-in-out; }


// ========== 卡片样式 (通用) ==========
.card-content {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
  width: 480rpx; // 卡片定宽

  .card-header {
    padding: 16rpx 20rpx;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1rpx solid #f9f9f9;

    &.bg-green { background: #F0FDF4; }
    &.bg-blue { background: #EFF6FF; }
    &.bg-gray { background: #F8FAFC; }

    .title-group { display: flex; align-items: center; gap: 8rpx; .card-title { font-size: 26rpx; font-weight: 600; color: #333; } }
    .status-tag { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 6rpx; background: #fff; color: $text-sub; border: 1rpx solid rgba(0,0,0,0.05); }
  }

  .card-body {
    padding: 20rpx; display: flex; flex-direction: column; gap: 12rpx;
    .info-row {
      display: flex; justify-content: space-between; font-size: 24rpx;
      .label { color: #888; }
      .value { color: #333; font-weight: 500; text-align: right; max-width: 70%; }
      .order-font { font-family: Courier, monospace; letter-spacing: 0.5rpx; }
      .price { color: #ef4444; font-size: 28rpx; font-weight: bold; }
      .small { font-size: 22rpx; color: #999; }
    }
    .desc-text { font-size: 26rpx; color: #333; }
    .text-block {
      background: #f5f5f5; padding: 16rpx; border-radius: 8rpx;
      .block-label { display: block; font-size: 22rpx; color: #999; margin-bottom: 6rpx; }
      .block-content { font-size: 26rpx; color: #333; line-height: 1.4; }
    }
  }

  .card-footer {
    padding: 16rpx 20rpx; border-top: 1rpx solid #f0f0f0;
    .action-btn {
      width: 100%; height: 60rpx; line-height: 60rpx; font-size: 26rpx; border-radius: 30rpx; background: #fff; border: 1rpx solid #ddd; color: #555;
      &.primary { background: $primary; color: #fff; border: none; }
      &::after { border: none; }
    }
    &.split { display: flex; justify-content: space-between; align-items: center; .link-btn { font-size: 24rpx; color: $primary; padding: 10rpx; } .action-btn { width: 160rpx; } }
  }
}

// ========== 原生风格服务通知 (Service Notify Card) ==========
// 这是一个非常经典、耐看的布局，模仿微信/支付宝的服务通知
.service-notify-card {
  background: #FFFFFF;
  border-radius: 12rpx; // 稍微调小圆角，更正式
  width: 480rpx;
  border: 1rpx solid #eaeaea; // 纯粹的边框
  overflow: hidden;
  position: relative;

  // 头部：极简
  .sn-header {
    padding: 24rpx 24rpx 16rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    .sn-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }

  // 内容区：标准的左key右value列表
  .sn-body {
    padding: 20rpx 24rpx;
    display: flex; flex-direction: column; gap: 16rpx;

    .sn-row {
      display: flex; justify-content: space-between; align-items: flex-start;
      line-height: 1.4;

      .sn-label {
        font-size: 26rpx; color: #999; // 经典的标签灰
        min-width: 110rpx; // 保证对齐
      }

      .sn-value {
        font-size: 26rpx; color: #333; text-align: right; flex: 1;
        &.truncate {
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320rpx;
        }
        &.price { color: #333; font-weight: 600; font-size: 28rpx; } // 普通金额强调
        &.sub { color: #999; font-family: monospace; }
        &.strong { color: #333; font-weight: bold; font-size: 30rpx; }

        // 涨跌颜色
        &.color-orange { color: #fa8c16; }
        &.color-green { color: #52c41a; }
      }

      // 价格变化组合
      .sn-value-group {
        display: flex; align-items: center; justify-content: flex-end;
        .old { color: #999; text-decoration: line-through; font-size: 24rpx; }
        .new { color: #333; font-weight: 600; font-size: 26rpx; }
      }
    }
  }

  // 底部：通用的查看详情
  .sn-footer {
    border-top: 1rpx solid #f5f5f5;
    padding: 18rpx 24rpx;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 24rpx; color: #666;
    background: #fff;

    &:active {
      background: #f9f9f9; // 仅底栏有点击态
    }
  }
}

.system-inner {
  background: rgba(0,0,0,0.05); padding: 8rpx 20rpx; border-radius: 10rpx; font-size: 22rpx; color: #999; align-self: center; margin: 0 auto;
}
</style>