// 横向切换控件。此前有三套长得像但尺寸各不同的实现：
//   plan 的 .inline-tabs（灰槽 + 白块）、community 的 .feed-tab（白药丸 + 橙选中 + 阴影）、
//   record 的 .rf-chip（白药丸 + 橙选中 + 无阴影，高度还差 10rpx）
// 这里合成一个：variant="solid" 对应灰槽白块，variant="pill" 对应横滑药丸。
//
// items 支持两种写法：
//   ['推荐','关注','经验']                       —— current 传下标
//   [{key:'',label:'全部'},{key:'weight',label:'体重'}] —— current 传 key
Component({
  options: { addGlobalClass: true },
  properties: {
    items: { type: Array, value: [] },
    current: { type: null, value: 0 },
    variant: { type: String, value: 'pill' },
  },
  data: { list: [] },
  observers: {
    'items,current': function (items, current) {
      const byKey = typeof current === 'string';
      const list = (items || []).map((it, i) => {
        const obj = it && typeof it === 'object';
        const key = obj ? it.key : i;
        return {
          key,
          label: obj ? it.label : it,
          active: byKey ? key === current : i === Number(current),
        };
      });
      this.setData({ list });
    },
  },
  methods: {
    onTap(e) {
      const { index, key } = e.currentTarget.dataset;
      this.triggerEvent('change', { index: Number(index), key });
    },
  },
});