<template>
  <view class="mixin-example">
    <view class="title">全局 Mixin 示例</view>
    
    <view class="section">
      <view class="section-title">globalMixin 演示</view>
      <view class="data-item">版本号: {{ globalVersion }}</view>
      <button @tap="setPageTitle('Mixin 示例页面')">设置页面标题</button>
      <button @tap="copyToClipboard('这是通过全局 mixin 复制的文本')">复制文本</button>
      <button @tap="getCurrentPath">获取当前页面路径</button>
    </view>
    
    <view class="section">
      <view class="section-title">loggerMixin 演示</view>
      <button @tap="logInfo('这是一条信息日志')">信息日志</button>
      <button @tap="logWarning('这是一条警告日志')">警告日志</button>
      <button @tap="logError('这是一条错误日志')">错误日志</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    getCurrentPath() {
      const path = this.getCurrentPagePath();
      this.showToast(`当前页面路径: ${path}`);
      this.logInfo(`当前页面路径: ${path}`);
    }
  },
  mounted() {
    // 页面加载时记录日志
    this.logInfo('Mixin 示例页面已加载');
  }
}
</script>

<style scoped>
.mixin-example {
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.data-item {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 8rpx;
}

button {
  margin-bottom: 20rpx;
  background-color: #007aff;
  color: white;
}
</style>