import i18n from '@/i18n'

export default {
  name: 'TableOperations',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      btnTypes: {
        add: 'primary',
        delete: 'danger',
        detail: 'info'
        // add more...
      },
      colors: {
        delete: '#FF5454',
        preview: '#f09843',
        design: '#99089f',
        // 'view-trend': 'red'
        // add more...
      },
      text: {
        // TODO: i18n
        edit: i18n.t('edit'),
        detail: i18n.t('detail'),
        delete: i18n.t('delete'),
        viewAttr: i18n.t('viewattr'),
        preview: i18n.t('preview'),
        design: i18n.t('design'),
        'view-trend': '查看趋势'
        // add more...
      }
    }
  },
  methods: {
    // 发射事件
    emit(opt) {
      let emitFull = false
      let eventType = 'default'
      let customField
      if (typeof opt === 'object') {
        eventType = opt.name
        customField = opt.emitField || 'id'
        emitFull = opt.emitFull || false
      } else {
        eventType = opt
      }
      this.$emit('emit-data', { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id })
    }
  },
  render: function (h) {
    let btns = []
    for (const optionStr of this.injectData.head?.options) {
      const optObj = typeof optionStr === 'object'
      // btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
      btns.push(h('el-button', { props: { type: 'text' }, style: { color: optObj ? this.colors[optionStr.name] : this.colors[optionStr] || '#409EFF' }, on: { click: this.emit.bind(null, optionStr) } }, typeof optionStr === 'object' ? this.text[optionStr.name] : this.text[optionStr]))
    }
    return h('span', null, btns)
  }
}