/**
 * coach-level-tag 助教等级标签组件
 * 基于 VI 设计系统 §5 助教等级配色
 *
 * 用法：
 *   <coach-level-tag level="star" />
 *   <coach-level-tag level="{{detail.level}}" bgColor="rgba(255,255,255,0.15)" shadowColor="rgba(0,0,0,0.6)" />
 *
 * 属性：
 *   level:       'star' | 'senior' | 'middle' | 'junior'（英文 key）
 *   bgColor:     半透明背景色，默认 '' (使用 CSS 各等级默认色)
 *   shadowColor: 文字阴影颜色，默认 '' (使用 CSS 默认 rgba(0,0,0,1))
 */

const LEVEL_MAP: Record<string, { cls: string; label: string }> = {
  star:   { cls: 'level-star',   label: '⭐ 星级' },
  senior: { cls: 'level-senior', label: '高级' },
  middle: { cls: 'level-middle', label: '中级' },
  junior: { cls: 'level-junior', label: '初级' },
  // 兼容旧中文 key，过渡期保留
  '星级': { cls: 'level-star',   label: '⭐ 星级' },
  '高级': { cls: 'level-senior', label: '高级' },
  '中级': { cls: 'level-middle', label: '中级' },
  '初级': { cls: 'level-junior', label: '初级' },
}

Component({
  properties: {
    /** 等级 key：star | senior | middle | junior */
    level: {
      type: String,
      value: '',
      observer(this: any, val: string) {
        this._updateStyle()
      },
    },
    /** 自定义半透明背景色，例如 "rgba(255,255,255,0.15)"，留空使用默认 */
    bgColor: {
      type: String,
      value: '',
      observer(this: any) {
        this._updateStyle()
      },
    },
    /** 自定义文字阴影颜色，例如 "rgba(0,0,0,0.4)"，留空使用默认 */
    shadowColor: {
      type: String,
      value: '',
      observer(this: any) {
        this._updateStyle()
      },
    },
  },

  data: {
    cls: 'level-junior',
    label: '',
    tagStyle: '',
  },

  methods: {
    _updateStyle(this: any) {
      const val = this.data.level
      const info = LEVEL_MAP[val] ?? { cls: 'level-junior', label: val }
      const styles: string[] = []
      if (this.data.bgColor)     styles.push(`background:${this.data.bgColor}`)
      if (this.data.shadowColor) styles.push(`text-shadow:0 0 6rpx ${this.data.shadowColor}`)
      this.setData({
        cls: info.cls,
        label: info.label,
        tagStyle: styles.join(';'),
      })
    },
  },

  lifetimes: {
    attached(this: any) {
      this._updateStyle()
    },
  },
})
