<template>
  <Table
    :class="[playState ? 'anm-' + val.animationName : '']"
    :stripe="val.stripe"
    :data="val.data"
    :columns="val.columns"
    
    :border="val.border"
    :show-header="val.showHeader"
    :loading="val.loading"
    :disabled-hover="val.disabledHover"
    :highlight-row="val.highlightRow"
    :size="val.size"
    :no-data-text="val.noDataText"
    :no-filtered-data-text="val.noFilteredDataText"
    :draggable="val.draggable"
    :span-method="val.spanMethod"
    :show-summary="val.showSummay"
    :sum-text="val.sumText"
    :summary-method="val.summaryMethod"
    :indent-size="val.indentSize"
    :style="{
      position: 'absolute',
      left: val.left  + '%',
      width: val.tableWidth  + 'px',
      height: val.tableHeight  + 'px',
      
      top: val.top  + '%',
      zIndex: val.z,
      backgroundColor: val.bgColor,
      backgroundImage: 'url(' + val.backPic + ')',
      color: val.color
    }"
  ></Table>
</template>

<script>
import stylec from "./style.vue";
const WIDGET_NAME = "braid-table";

export default {
  name: WIDGET_NAME,
  icon: {
    type: "ios-apps"
  },
  title: "表格",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: false,
    isUpload: false,
    hasGuide: true,
    isChild: true,
    draggable: true,
    resizable: true,
    name: "表格",
    width: 50,
    height: 50,
    maxHeight: 50,
    left: 20,
    // tableWidth: 0.3 * this.w,
    // tableHeight: 0.2 * this.h,
    // maxTsbleheight: this.h,
    top: 0,
    offsetLeft: 50,
    offsetTop: 0,
    offsetWidth: 100,  // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    z: 0,
    bgColor: "#fff",
    backPic: "",
    backPicUrl: "",
    color: "",
    text: "表格",
    belong: "page",
    animationName: "",
    data: [
      {
        name: "John Brown",
        age: 18,
        address: "New York No. 1 Lake Park",
        date: "2016-10-03"
      },
      {
        name: "Jim Green",
        age: 24,
        address: "London No. 1 Lake Park",
        date: "2016-10-01"
      },
      {
        name: "Joe Black",
        age: 30,
        address: "Sydney No. 1 Lake Park",
        date: "2016-10-02"
      },
      {
        name: "Jon Snow",
        age: 26,
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      },
      {
        name: "Jon Snow",
        age: 26,
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      },
      {
        name: "Jon Snow",
        age: 26,
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      }
    ],
    columns: [
      {
        title: "Name",
        key: "name"
      },
      {
        title: "Age",
        key: "age"
      },
      {
        title: "Address",
        key: "address"
      }
    ]    
  },
  props: ["h", "val", "playState", "w"],

  methods: {
  },
  created() {
    this.val.maxTsbleheight = this.val.maxHeight / 100 * this.val.offsetHeight / 100 * this.h;
    this.val.tableWidth = this.val.width / 100 * this.val.offsetWidth / 100 * this.w;
    this.val.tableHeight = this.val.height / 100 * this.val.offsetHeight / 100 * this.h;
  },
  watch: {
     val: {
      handler: function (newValue, oldval) {
        this.val.maxTsbleheight = newValue.maxHeight / 100 * newValue.offsetHeight / 100 * this.h;
        this.val.tableWidth = newValue.width / 100 * newValue.offsetWidth / 100 * this.w;
        this.val.tableHeight = newValue.height / 100 * newValue.offsetHeight / 100 * this.h;
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  }
};
</script>

<style scoped>
.lz-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
</style>
