<template>
  <table>
    <thead v-if="showHead">
    <tr><th :style="eval('title',title)">{{title}}&nbsp;</th></tr>
    </thead>
    <tbody>
    <tr v-for="row in data"><td :style="eval('cell',(row[name]?row[name]:''))">{{row[name]?row[name]:''}}</td></tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name:"TableColumn",
  data() {
    return {

    }
  },
  methods: {
    eval(type,data){
      let res = type === "title"?this.titleStyle:this.cellStyle;
      if (res){
        return res;
      }
      let styleJs = type === "title"?this.titleStyleJs:this.cellStyleJs;
      let styleFunction = type === "title"?this.titleStyleFunction:this.cellStyleFunction;
      if (styleJs){
        res = eval(styleJs);
      }else if (styleFunction) {
        res = styleFunction(data);
      }
      return res;
    }
  },
  props:{
    name: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    showHead: {
      type: Boolean,
    },
    data: {
      type: Array,
    },
    cellStyle: {
      type: Object,
    },
    cellStyleJs: {
      type: String,
    },
    cellStyleFunction:{
      type: Function
    },
    titleStyle: {
      type: Object,
    },
    titleStyleJs: {
      type: String,
    },
    titleStyleFunction:{
      type: Function
    },
  }

}
</script>
<style scoped>
table{
  color: white;
}
th{
  color: white;
  font-size: 12px;
  font-weight: normal;
}
table,th,td,tr,thead{
  padding: 0;
  margin: 0;
  border: none;
}
tr{
  width: 100%;
}


</style>
