<template>
  <div class="tab">
     <table>
       <tr v-for='(ite,i) in mode' :key='i + "trs"' :style='ite.style'>
         <td v-for='(kte,k) in ite.tds' :key='k + "tds"' :class='(kte.class === undefined ? "d_td" : "d_td " + kte.class)' :style='kte.style' :colspan='kte.colSpan' :rowspan='kte.rowSpan'>
           {{qu.templateValue(kte.bindkey, dataObj)}}
         </td>
      </tr>
     </table>
  </div>
</template>
<script>
/**
 * module:表单组件
 * author:lwt
 */
import qu from '../../utils/quick'
export default {
  name: 'aTemplate',
  components: {
  },
  props: {
    parkey: Object,
    tem: Array
  },
  data () {
    return {
      qu: qu,
      tab: ' ',
      dataObj: { 'b1': 'cddd', 'b2': '3fdded', 'b3': 'fkf9rrkr' },
      mode: [
        {
          style: { color: 'red' },
          tds: [
            {
              bindkey: '工程名称', style: { width: '40%', fontWeight: 'bold' }
            },
            {
              bindkey: '@{b1}', style: { }
            }
          ]
        }
      ]
    }
  },
  methods: {
    drawTab: function () { // 载入表单数据
      this.mode = this.$props.tem
      this.dataObj = this.$props.parkey
    },
    changeText: function () {
    },
    addIndex: function () {
      this.s.index++
      this.$store.commit('自增', 2)
    },
    dispatchIndex: function () {
      this.$store.dispatch('todo')
    },
    afterEnter: function () {
    },
    slotCreated: function () {
      // console.log('插槽插入成功')
    },
    watchEvent: function () {
    }
  },
  computed: {
  },
  directives: {
  },
  filters: {
  },
  watch: {
    parkey: function (val, oldVal) {
      this.drawTab()
    },
    tem: function (val, oldVal) {
      this.drawTab()
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  created: function () {
    this.drawTab()
    // console.log('实例初始化完成调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style>
@import './tab.css';
</style>
