// components/chenghao-tag/chenghao-tag.js
const app = getApp();

const PILL_SHAPES = ['pill', 'rectangle', 'rounded'];

Component({
  properties: {
    mingcheng: { type: String, value: '' },
    texiaoJson: { type: null, value: null },
  },
  data: {
    inlineStyle: '',
    shapeClass: 'tag-pill',
    animationClass: '',
    textColor: '#FFFFFF',
    textSize: 22,
    imageUrl: '',
    isPill: true,
  },
  observers: {
    'texiaoJson, mingcheng': function () {
      this._applyConfig(this.properties.texiaoJson);
    },
  },
  lifetimes: {
    attached() {
      this._applyConfig(this.properties.texiaoJson);
    },
  },
  methods: {
    _applyConfig(raw) {
      let cfg = raw || {};
      if (typeof cfg === 'string') {
        try {
          cfg = JSON.parse(cfg);
        } catch (e) {
          cfg = {};
        }
      }
      if (Array.isArray(cfg)) {
        cfg = cfg[0] || {};
      }
      if (!cfg || typeof cfg !== 'object') {
        cfg = {};
      }
      const ossImageUrl = app.globalData.ossImageUrl || '';

      // 无 shape：身份装饰标签 / 自定义色圆角标；有 shape：考核称号等特殊形状
      const isPill = !cfg.shape || PILL_SHAPES.includes(cfg.shape);

      if (isPill) {
        const height = Number(cfg.height) || 44;
        const minWidth = Number(cfg.width) || 72;
        const solidColor = cfg.bg_color || cfg.background || cfg.color;
        let bgStyle = '';
        if (cfg.bg_gradient) {
          bgStyle = `background: ${cfg.bg_gradient};`;
        } else if (solidColor) {
          bgStyle = `background: ${solidColor};`;
        } else {
          bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
        }
        const flash = cfg.flash || cfg.animation === 'shine' || cfg.animation === 'glow';
        let animationClass = cfg.animation || '';
        if (flash && !animationClass) {
          animationClass = 'pill-flash';
        }
        const borderColor = cfg.borderColor || cfg.border_color;
        const borderStyle = borderColor ? `border: 2rpx solid ${borderColor};` : '';
        const textColor = cfg.text_color || cfg.textColor || '#FFFFFF';
        this.setData({
          isPill: true,
          shapeClass: 'tag-pill',
          animationClass,
          inlineStyle: `min-width: ${minWidth}rpx; height: ${height}rpx; padding: 0 18rpx; ${bgStyle} ${borderStyle}`,
          textColor,
          textSize: cfg.text_size || 22,
          imageUrl: '',
        });
        return;
      }

      const width = Number(cfg.width) || 152;
      const height = Number(cfg.height) || 52;
      let bgStyle = '';
      let imageUrl = '';
      if (cfg.image_url) {
        imageUrl = cfg.image_url.startsWith('http')
          ? cfg.image_url
          : ossImageUrl + cfg.image_url;
      } else if (cfg.bg_gradient) {
        bgStyle = `background: ${cfg.bg_gradient};`;
      } else if (cfg.bg_color) {
        bgStyle = `background: ${cfg.bg_color};`;
      } else {
        bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
      }

      this.setData({
        isPill: false,
        inlineStyle: `width: ${width}rpx; height: ${height}rpx; ${bgStyle}`,
        shapeClass: cfg.shape || 'liubianxing',
        animationClass: cfg.animation || '',
        textColor: cfg.text_color || '#FFFFFF',
        textSize: cfg.text_size || 22,
        imageUrl,
      });
    },

    onImageError() {
      this.setData({ imageUrl: '' });
      if (!this.data.inlineStyle.includes('background')) {
        this.setData({
          inlineStyle: this.data.inlineStyle + ' background: linear-gradient(135deg, #FFD700, #FF8C00);',
        });
      }
    },
  },
});