<template>
  <!-- 灵动岛占位区域 - 始终存在但控制可见性 -->
  <view
    class="dynamic-island-placeholder"
    :class="{ visible: isScrolled }"
    :style="{ height: placeholderHeight + 'rpx' }"
  >
    <view
      class="dynamic-island"
      :class="{
        compact: actualCompactState,
        fixed: isFixed,
      }"
      :style="{ top: isFixed ? fixedTopPosition + 'px' : 0 }"
      @click="handleToggle"
    >
      <!-- 展开状态 -->
      <view v-if="!actualCompactState" class="expanded-content">
        <view class="top-section">
          <text class="welcome-text">{{ title }}</text>
          <view class="qr-code">
            <view class="qr-icon">
				<image style="width: 39rpx;height: 39rpx;" src="https://epic.js-dyyj.com/uploads/20250728/ce88153acc92e0e2fca7acaa4ccec5c1.png"></image>
			</view>
          </view>
        </view>
        <view class="bottom-section">
          <view class="stats-section">
            <view class="stat-item">
              <text class="stat-number">{{ getStatNumber("权益") }}</text>
              <text class="stat-label">权益</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
              <text class="stat-label">时间银行</text>
            </view>
          </view>
          <view class="divider"></view>
          <view class="action-section">
            <text class="action-text">{{ actionText }}</text>
            <image class="avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <!-- 紧凑状态 -->
      <view v-else class="compact-content">
        <text class="compact-name">{{ getCompactName() }}</text>
        <image
          class="compact-avatar"
           src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "DynamicIsland",
  props: {
    isCompact: {
      type: Boolean,
      default: false,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "正在播放音乐",
    },
    subtitle: {
      type: String,
      default: "周杰伦 - 青花瓷",
    },
    avatarUrl: {
      type: String,
      default: "https://picsum.photos/80/80",
    },
    actionText: {
      type: String,
      default: "暂停",
    },
  },
  data() {
    return {
      isExpanded: false,
      statusBarHeight: 0,
      isScrolled: false,
      scrollThreshold: 160, // 灵动岛大卡片高度（160rpx）
      // 内部数据，减少对外部props的依赖
      currentTitle: "Hi！杰西卡酱，欢迎回来～",
      currentSubtitle: "2个权益 | 120时间银行",
      currentAvatar: "https://picsum.photos/80/80",
      currentAction: "激活你的Agent",
    };
  },
  computed: {
    // 计算实际显示状态：只有在固定模式下才使用内部状态
    actualCompactState() {
      if (this.isScrolled) {
        return !this.isExpanded;
      }
      return false; // 非滚动状态下始终展开
    },
    // 计算固定定位的top值
    fixedTopPosition() {
      // 状态栏高度 + 导航栏高度(40px) + 间距(20px)
      return this.statusBarHeight + 40+20 ;
    },
    // 计算占位区域高度 - 始终保持固定高度，等于灵动岛大卡片高度
    placeholderHeight() {
      // 占位区域高度应该等于灵动岛展开状态的高度
      // 包括上下边距：32rpx(上) + 160rpx(灵动岛) + 24rpx(下) = 216rpx
      const islandHeightRpx = 160; // 灵动岛展开高度
      const topMarginRpx = 32; // 上边距
      const bottomMarginRpx = 24; // 下边距
      return topMarginRpx + islandHeightRpx + bottomMarginRpx;
    },
    // 使用内部数据或props数据
    title() {
      return this.currentTitle;
    },
    subtitle() {
      return this.currentSubtitle;
    },
    avatarUrl() {
      return this.currentAvatar;
    },
    actionText() {
      return this.currentAction;
    },
    // 计算是否固定
    isFixed() {
      return this.isScrolled;
    },
  },
  mounted() {
    // uni-app中通过父组件传递点击事件
    this.setStatusBarHeight();
    // 监听页面滚动
    this.addScrollListener();
  },
  beforeDestroy() {
    // 清理滚动监听
    this.removeScrollListener();
  },
  methods: {
    handleToggle() {
      if (this.isScrolled) {
        // 固定模式下切换内部状态
        this.isExpanded = !this.isExpanded;
        this.$emit("toggle", this.isExpanded);
      } else {
        // 非固定模式下触发外部事件
        this.$emit("toggle");
      }
    },
    handleAction() {
      this.$emit("action");
    },
    // 外部调用收缩方法
    collapseIsland() {
      if (this.isScrolled && this.isExpanded) {
        this.isExpanded = false;
        this.$emit("toggle", this.isExpanded);
      }
    },
    // 添加滚动监听
    addScrollListener() {
      // 监听全局页面滚动事件
      uni.$on("pageScroll", this.handlePageScroll);
    },
    // 移除滚动监听
    removeScrollListener() {
      // 移除全局页面滚动监听
      uni.$off("pageScroll", this.handlePageScroll);
    },
    // 处理页面滚动
    handlePageScroll(e) {
      const scrollTop = e.scrollTop || e;
      const shouldScroll = scrollTop > this.scrollThreshold;

      if (this.isScrolled !== shouldScroll) {
        this.isScrolled = shouldScroll;

        // 添加触觉反馈
        if (uni.vibrateShort) {
          uni.vibrateShort();
        }
      }

      // 滚动时自动收缩展开的灵动岛
      if (this.isScrolled) {
        this.collapseIsland();
      }
    },
    getCompactName() {
      // 从标题中提取姓名

      return "杰西卡酱";
    },
    getStatNumber(type) {
      // 从副标题中解析统计数据
      if (this.subtitle) {
        if (type === "权益") {
          const match = this.subtitle.match(/(\d+)个权益/);
          return match ? match[1] : "0";
        } else if (type === "时间银行") {
          const match = this.subtitle.match(/(\d+)时间银行/);
          return match ? match[1] : "0";
        }
      }
      return "0";
    },
    // 设置状态栏高度
    setStatusBarHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 0;
      } catch (e) {
        console.warn("获取系统信息失败:", e);
        this.statusBarHeight = 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */
.dynamic-island-placeholder {
  width: 100%;
  background: transparent;
  position: relative;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dynamic-island-placeholder.visible {
  opacity: 1;
}

/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */
.dynamic-island-placeholder .dynamic-island:not(.fixed) {
  position: relative;
  z-index: 100;
}

.dynamic-island {
  margin: 24rpx auto 24rpx;
  z-index: 100;

  background: #000000;
  backdrop-filter: blur(20rpx);
  border-radius: 40rpx;

  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

  // 展开状态
  width: 710rpx;
  height: 220rpx;

  // 紧凑状态
  &.compact {
    width: 300rpx;
    height: 80rpx;
    border-radius: 40rpx;

    .expanded-content {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
    }
  }

  &:not(.compact) {
    .compact-content {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
    }
  }

  // 固定定位状态
  &.fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    margin: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

.expanded-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24rpx 32rpx;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in 0.4s, visibility 0s linear 0s;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.welcome-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.qr-code {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-icon {
  width: 24rpx;
  height: 24rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4rpx;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 2rpx;
    left: 2rpx;
    right: 2rpx;
    bottom: 2rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2rpx;
  }
}

.bottom-section {
  display: flex;
  align-items: center;
  flex: 1;
}

.stats-section {
  display: flex;
  gap: 32rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  font-weight: bold;
}

.stat-number {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 28rpx;
  color: white;
  line-height: 1;
  font-weight: bold;
  margin-top: 20rpx;
}

.divider {
  width: 2rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 24rpx;
}

.action-section {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
}

.action-text {
  font-size: 26rpx;
  color: #ffffff;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200rpx;
}

.avatar {
  width: 113rpx;
  height: 113rpx;
  border-radius: 50%;
}

// 添加点击反馈动画
.dynamic-island:active {
  transform: scale(0.98);

  &.fixed {
    transform: translateX(-50%) scale(0.98);
  }
}

// 从顶部滑入动画
@keyframes slideInFromTop {
  0% {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.compact-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 24rpx;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in 0.4s, visibility 0s linear 0s;
}

.compact-name {
  font-size: 27rpx;
  color: #ffffff;
  font-weight: bold;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200rpx;
}

.compact-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

// 动画定义
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// 响应式适配
// @media (max-width: 750rpx) {
//   .dynamic-island {
//     &.is-expanded {
//       width: 100vw;
//       max-width: 750rpx;
//     }

//     &.is-compact {
//       width: 280rpx;
//     }
//   }
// }
</style>
