<template>
  <view class="test-component">
    <view class="test-header" :style="{ backgroundColor: headerColor }">
      <view class="test-icon" v-if="showIcon" @click="handleIconClick">
        <uni-icons type="info" size="24" color="#FFFFFF"></uni-icons>
      </view>
      <text class="test-title">{{ title }}</text>
    </view>
    <view class="test-content">
      <text class="test-message">{{ message }}</text>
      <view class="test-platform-info">
        <text>当前平台: {{ platformName }}</text>
      </view>
      <view class="test-button" @click="handleButtonClick">
        <text class="button-text">{{ buttonText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTestComponent',
  props: {
    title: {
      type: String,
      default: '测试组件'
    },
    message: {
      type: String,
      default: '这是一个测试组件，用于验证easycom是否正常工作'
    },
    headerColor: {
      type: String,
      default: '#2979FF'
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    buttonText: {
      type: String,
      default: '点击测试'
    }
  },
  data() {
    return {
      platformName: '未知平台'
    }
  },
  created() {
    console.log('CustomTestComponent 已创建');
  },
  mounted() {
    console.log('CustomTestComponent 已挂载');
    this.detectPlatform();
  },
  onLoad() {
    console.log('CustomTestComponent onLoad 触发');
  },
  methods: {
    handleIconClick() {
      console.log('图标被点击');
      this.$emit('icon-click');
    },
    handleButtonClick() {
      console.log('按钮被点击');
      this.$emit('button-click', { timestamp: Date.now() });

      // 显示一个简单的提示
      uni.showToast({
        title: '测试成功',
        icon: 'success',
        duration: 2000
      });
    },
    detectPlatform() {
      // 使用条件编译检测平台
      // #ifdef MP-WEIXIN
      this.platformName = '微信小程序';
      // #endif

      // #ifdef MP-ALIPAY
      this.platformName = '支付宝小程序';
      // #endif

      // #ifdef MP-TOUTIAO
      this.platformName = '头条小程序';
      // #endif

      // #ifdef MP-BAIDU
      this.platformName = '百度小程序';
      // #endif

      // #ifdef H5
      this.platformName = 'H5';
      // #endif

      // #ifdef APP-PLUS
      this.platformName = 'APP';
      // #endif

      console.log(`当前运行平台: ${this.platformName}`);
    }
  }
}
</script>

<style>
.test-component {
  margin: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
}

.test-header {
  padding: 15px;
  position: relative;
}

.test-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.test-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.test-content {
  padding: 20px;
}

.test-message {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
  display: block;
}

.test-platform-info {
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.test-button {
  margin-top: 20px;
  background-color: #2979FF;
  padding: 12px 0;
  border-radius: 4px;
  text-align: center;
}

.button-text {
  color: #FFFFFF;
  font-size: 16px;
}
</style>