<template>
  <view class="pretty-number-item" v-if="prettyNumber">
    <view class="pretty-number-container" @click="copyNumber">
      <text class="pretty-number-label">靓号:</text>
      <text class="pretty-number-value">{{ prettyNumber }}</text>
      <text class="tn-icon-copy mirror copy-icon"></text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'prettyNumberItem',
  props: {
    uid: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      prettyNumber: null,
      isLoading: false
    }
  },
  created() {
    this.getPrettyNumber()
  },
  methods: {
    // 获取用户靓号 - 只使用公开接口
    getPrettyNumber() {
      if (this.isLoading) return;
      this.isLoading = true;
      
      uni.request({
        url: this.$API.PluginLoad('xqy_pretty_number'),
        method: 'POST',
        data: {
          plugin: 'xqy_pretty_number',
          action: 'get_user_number',
          uid: this.uid
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          //console.log('get_user_number响应:', res.data);
          
          if (res.data && res.data.code === 200 && res.data.data && res.data.data.number) {
            this.prettyNumber = res.data.data.number;
            this.$emit('number-loaded', res.data.data);
          } else {
            // 用户没有靓号，不显示组件
            this.prettyNumber = null;
          }
        },
        fail: (err) => {
          //console.error('获取靓号失败:', err);
          this.prettyNumber = null;
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    },
    
    // 复制靓号
    copyNumber() {
      if (!this.prettyNumber) return;
      
      uni.setClipboardData({
        data: this.prettyNumber,
        success: () => {
          uni.showToast({
            title: '靓号已复制',
            icon: 'success'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss">
.pretty-number-item {
  margin-top: 8rpx;
  
  .pretty-number-container {
    display: flex;
    align-items: center;
    text-align: left;
    
    .pretty-number-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .pretty-number-value {
      font-size: 28rpx;
      color: #3cc9a4;
      font-weight: 600;
      margin: 0 10rpx;
    }
    
    .copy-icon {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style> 