import { link } from '../mixins/link'
import { VantComponent } from '../common/component'
import { addUnit } from '../common/utils'
VantComponent({
  relation: {
    name: 'grid',
    type: 'ancestor',
    current: 'grid-item',
  },
  classes: ['content-class', 'icon-class', 'text-class'],
  mixins: [link],
  props: {
    icon: String,
    iconColor: String,
    dot: Boolean,
    info: null,
    badge: null,
    text: String,
    useSlot: Boolean,
  },
  data: {
    viewStyle: '',
  },
  mounted() {
    wx.nextTick(() => {
      this.updateStyle()
    })
  },
  methods: {
    updateStyle() {
      if (!this.parent) {
        return
      }
      const { data, children } = this.parent
      const {
        columnNum,
        border,
        square,
        gutter,
        clickable,
        center,
        direction,
        iconSize,
      } = data
      const width = `${100 / columnNum}%`
      const styleWrapper = []
      styleWrapper.push(`width: ${width}`)
      if (square) {
        styleWrapper.push(`padding-top: ${width}`)
      }
      if (gutter) {
        const gutterValue = addUnit(gutter)
        styleWrapper.push(`padding-right: ${gutterValue}`)
        const index = children.indexOf(this)
        if (index >= columnNum && !square) {
          styleWrapper.push(`margin-top: ${gutterValue}`)
        }
      }
      let contentStyle = ''
      if (square && gutter) {
        const gutterValue = addUnit(gutter)
        contentStyle = `
          right: ${gutterValue};
          bottom: ${gutterValue};
          height: auto;
        `
      }
      this.setData({
        viewStyle: styleWrapper.join('; '),
        contentStyle,
        center,
        border,
        square,
        gutter,
        clickable,
        direction,
        iconSize,
      })
    },
    onClick() {
      this.$emit('click')
      this.jumpLink()
    },
  },
})
