Component({
  properties: {
    list: Array,
    name: {
      type: String,
      value: "brandname"
    },
    active: {
      type: String,
      value: 0
    },
    rowIndex: {
      type: Number,
      value: 0
    },
    onChange: Function
  },
  externalClasses: [
    "box-class", "tab-class", "active-class"
  ],
  data: {
    scrollLeft: 0,
  },
  methods: {
    onClick(e) {
      const {
        index,
        item
      } = e.currentTarget.dataset;
      if (this.data.active != index) {
        this.setData({
          active: index
        });
        this.triggerEvent("onChange", {
          item,
          index,
          rowIndex: this.data.rowIndex
        })
        this.setActive(index);
      }
    },
    setActive(active) {
      const that = this,
        query = wx.createSelectorQuery().in(this)
      query.select('#active' + active).boundingClientRect(function (res) {
        that.setData({
          scrollLeft: res.right - res.width
        })
      }).exec();
    },
  }
})