<template />

<script>
import ApDevBase from './ApDevBase'

export default {
  name: 'ApDevItemBase',
  extends: ApDevBase,
  props: {
    // ref属性
    options: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      defaultOptions: {}
    }
  },
  computed: {
    // 控件store属性
    itemObj() {
      const ref = this.options
      const item = this.$store.getters.getItem(ref)
      // options为空设为默认
      if (!item.options) {
        this.$store.commit('propInitItemOptions', {
          ref: ref,
          options: this.defaultOptions
        })
      }
      return this.$store.getters.getItem(ref)
    },
    // 式样：类
    itemClass() {
      const itemClass = []
      itemClass.push('dev-main-item')
      const styleOptions = this.itemObj.options
      if (styleOptions.isFlex) {
        itemClass.push('flex')
        // 列布局：默认row
        if (styleOptions.flexLayout == 'column') {
          itemClass.push('flex-direction-column')
        }
        // flex1
        if (styleOptions.flex1) {
          itemClass.push('flex-1')
        }
        // 水平居中
        if (styleOptions.flexAlign.indexOf('flexHorizontal') >= 0) {
          itemClass.push('flex-pack-center')
        }
        // 垂直居中
        if (styleOptions.flexAlign.indexOf('flexVertical') >= 0) {
          itemClass.push('flex-align-center')
        }
        // 两端对齐
        if (styleOptions.flexAlign.indexOf('flexBetween') >= 0) {
          itemClass.push('flex-pack-justify')
        }
      }
      return itemClass
    },
    // 式样：style
    itemStyle() {
      const itemStyle = []
      itemStyle.push({ width: (100 / 24 * this.itemObj.options.span).toFixed(5) + '%' })
      itemStyle.push({ height: this.itemObj.options.height })
      const styleStr = this.itemObj.options.styleStr
      if (styleStr) {
        const styleArr = styleStr.split(';')
        for (var i = 0; i < styleArr.length; i++) {
          var styleObj = styleArr[i].split(':')
          const tempObj = {}
          tempObj[styleObj[0]] = styleObj[1]
          itemStyle.push(tempObj)
        }
      }
      return itemStyle
    }
  },
  methods: {
    itemClick(item) {
      // 当前选择组件
      this.$store.commit('updateCurrentItem', {
        ref: item.ref,
        type: item.type
      })
    }
  }

}
</script>

<style scoped>

</style>
