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

TyComponent({
  source: true,
  externalClasses: ['custom-class'],
  relations: {
    '../ht-grid/index': {
      type: 'ancestor',
      linked(parent) {
        this.parent = parent
      },
      unlinked() {
        this.parent = null
      },
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

    text: {
      type: String
    },
    icon: {
      type: String
    },
    dot: {
      type: Boolean,
      value: false
    },
    useSlot: {
      type: Boolean,
      value: false
    },
    info: {
      type: [String, Number]
    },
    url: {
      type: String
    },
    linkType: {
      type: String,
      value: 'navigateTo'
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    viewStyle: '',
  },
  created() {
    this.children = []
  },
  ready() {
    this.updateStyle()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    jumpLink(urlKey) {
      if (urlKey === void 0) { urlKey = 'url' }
      const url = this.data[urlKey]
      if (url) {
        wx[this.data.linkType]({url})
      }
    },
    updateStyle() {
      if (!this.parent) {
        return
      }
      const _a = this.parent
      const data = _a.data
      const children = _a.children
      const columnNum = data.columnNum
      const border = data.border
      const square = data.square
      const gutter = data.gutter
      const clickable = data.clickable
      const center = data.center
      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) {
          styleWrapper.push('margin-top: ' + gutterValue)
        }
      }
      let contentStyle = ''
      if (square && gutter) {
        const gutterValue = addUnit(gutter)
        contentStyle = '\n          right: ' + gutterValue + ';\n          bottom: ' + gutterValue + ';\n          height: auto;\n        '
      }
      this.setData({
        viewStyle: styleWrapper.join('; '),
        contentStyle,
        center,
        border,
        square,
        gutter,
        clickable
      })
    },
    onClick() {
      this.$emit('click')
      this.jumpLink()
    }
  }
})
