
<template>
  <div class="tableInf">
     <table :style='{"width": conf.width}' class="head">
        <col v-for='(ite, i) in hed' :key='"hedc_" + i' :width='ite.width' />
       <tr>
         <td v-for='(ite, i) in hed' :key='"hed_" + i' :style='ite.headStyle || {}'>
            {{ite.name}}
         </td>
       </tr>
     </table>
     <div class="divBody" :style='{"max-height": conf.height, "width": conf.width}'>
       <table :style='{"width": conf.width}'>
         <col v-for='(ite, i) in hed' :key='"hedk_" + i' :style='{width:ite.width}' />
         <tr v-for='(ite, i) in data' :key='"da_" + i'>
           <td v-for='(kte, k) in hed' :key='"hedd_" + k' :style='kte.bodyStyle || {}' :title='kte.type === "html" ? "" : ite[kte.key]'>
             <template v-if='kte.type === "index"'>
               {{i+1}}
             </template>
             <template v-else-if='kte.type === "down"'>
               <template v-for='(bte,b) in ite[kte.key]'>
                 <a :title='bte.name' :href='bte.src' :key='"key_" + b'>
                   {{bte.name}}
                 </a>
                 <br :key='"key2_" + b'>
               </template>
             </template>
             <template v-else-if='kte.type === "html"'>
               <span  v-html='ite[kte.key]'>
                  {{ite[kte.key]}}
               </span>
             </template>
             <template v-else>
               {{ite[kte.key]}}
             </template>
           </td>
          </tr>
       </table>
     </div>
     <div v-if='data.length === 0' class="nodata">
      <img src="~public/lwt-vue-components/default/assets/tableInf/noData.png" />
    </div>
  </div>
</template>
<script>
/**
 * module:表格组件
 * author:lwt
 */
import quick from '../../utils/quick'
export default {
  name: 'aTemplate',
  components: {
  },
  props: {
    head: Array,
    bodyData: Array,
    config: Object
  },
  data () {
    return {
      // qu: qu,
      hed: [],
      data: [],
      conf: { width: 0, height: 0 }
    }
  },
  methods: {
    rendTab: function () { // 读取表格数据
      let { head, bodyData, config } = this.$props
      this.hed = head
      let dat = bodyData
      head.map(v => {
        if (v.key !== undefined && v.key !== '') {
          if (v.val !== undefined) {
            dat.map(w => {
              w[v.key] = quick.templateValue(v.val, w)
            })
            // for (let j in dat) {
            //   dat[j][v.key] = quick.templateValue(v.val, dat[j])
            // }
          } else {
            dat.map(w => {
              w[v.key] = w[v.key] || ''
            })
            // for (let j in dat) {
            //   dat[j][v.key] = dat[j][v.key] || ''
            // }
          }
        }
      })
      // for (let i in head) {
      //   if (head[i].key !== undefined && head[i].key !== '') {
      //     if (head[i].val !== undefined) {
      //       for (let j in dat) {
      //         dat[j][head[i].key] = quick.templateValue(head[i].val, dat[j])
      //       }
      //     } else {
      //       for (let j in dat) {
      //         dat[j][head[i].key] = dat[j][head[i].key] || ''
      //       }
      //     }
      //   }
      // }
      this.data = dat
      this.conf = config
    },
    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: {
    head: function (val, oldVal) {
      this.rendTab()
    },
    bodyData: function (val, oldVal) {
      this.rendTab()
    },
    config: function (val, oldVal) {
      this.rendTab()
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  created: function () {
    this.rendTab()
    // 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 './tableInf.css';
</style>
