import TyComponent from '../common/component'
import {addUnit} from '../common/utils'

TyComponent({
  source: true,
  externalClasses: ['custom-class'],
  relations: {
    '../ht-grid-item/index': {
      type: 'descendant',
      linked(child) {
        this.children.push(child)
      },
      unlinked(child) {
        this.children = this.children.filter(function (item) { return item !== child })
      }
    }
  },
  properties: {
    square: {
      type: Boolean,
      observer: 'updateChildren'
    },
    gutter: {
      type: [Number, String],
      value: 0,
      observer: 'updateChildren'
    },
    clickable: {
      type: Boolean,
      observer: 'updateChildren'
    },
    columnNum: {
      type: Number,
      value: 4,
      observer: 'updateChildren'
    },
    center: {
      type: Boolean,
      value: true,
      observer: 'updateChildren'
    },
    border: {
      type: Boolean,
      value: true,
      observer: 'updateChildren'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    viewStyle: '',
  },
  created() {
    this.children = []
  },
  attached() {
    const gutter = this.data.gutter
    if (gutter) {
      this.setData({
        viewStyle: 'padding-left: ' + addUnit(gutter)
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    updateChildren() {
      this.children.forEach(function (child) {
        child.updateStyle()
      })
    }
  }
})
