<template>
  <view class="icon-wrapper" :style="iconStyle">
    <text class="icon-text">{{ iconChar }}</text>
  </view>
</template>

<script>
// 简单图标映射
const icons = {
  home: '🏠',
  user: '👤',
  chart: '📊',
  product: '📦',
  add: '➕',
  search: '🔍',
  order: '📋',
  edit: '✏️',
  check: '✓',
  close: '✕',
  stock: '🏭',
  alert: '⚡',
  in: '⬇️',
  out: '⬆️',
  customer: '👥',
  money: '💰',
  logout: '↩️',
  right: '›',
  left: '‹',
  down: '▼',
  lock: '🔐',
  calendar: '📅',
  setting: '⚙️',
  wechat: '💬',
  cash: '💵',
  alipay: '💙',
  plus: '📥',
  flow: '📊'
}

export default {
  name: 'Icon',
  props: {
    name: { type: String, required: true },
    size: { type: [Number, String], default: 32 },
    color: { type: String, default: '' }
  },
  computed: {
    iconStyle() {
      const style = {}
      if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
      if (this.color) style.color = this.color
      return style
    },
    iconChar() {
      return icons[this.name] || '•'
    }
  }
}
</script>

<style>
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-text {
  line-height: 1;
}
</style>