<template>
    <div class="table_views style1" :style="{width:width,height:height}">
        <div class="table_leftview" v-if="fixColumn">
            <div class="table_header" v-if="fixTitle">
                <!--  :style="{width:fixedWidth+'px'}" -->
                <table>
                    <tbody>
                        <tr :style="{}">
                            <th v-for="(item,rowIndex) in internalColumns" v-if="item.isFrozen" :key="rowIndex" >
                                <div class="tableCell" :style="{width:item.width+'px',height:titleHeight+'px',lineHeight:titleHeight+'px',textAlign:item.titleAlign}">
                                    <span>{{item.title}}</span>
                                    <span v-if="item.orderBy" class='sort_icon' @click.stop.prevent="sort(rowIndex,item.field)"><i :class="item.orderBy=='asc'?'checked':''"></i><i :class="item.orderBy=='desc'?'checked':''"></i></span>
                                </div>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table_body" :style="{height:bodyHeight}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
                <table :style="{marginTop:marginTop+'px'}">
                    <tbody>
                        <tr v-if="!fixTitle" :style="{}">
                            <td v-for="(item,rowIndex) in internalColumns" v-if="item.isFrozen" :key="rowIndex">
                                <div class="tableCell" :style="{ width:isHorizontalResize ? '100%' : item.width+'px',height:titleHeight+'px',lineHeight:titleHeight+'px',textAlign:item.columnAlign}">
                                    <span>{{item.title}}</span>
                                    <span v-if="item.orderBy" class='sort_icon' @click.stop.prevent="sort(rowIndex,item.field)"><i :class="item.orderBy=='asc'?'checked':''"></i><i :class="item.orderBy=='desc'?'checked':''"></i></span>
                                </div>
                            </td>
                        </tr>
                        <tr v-for="(data,dataIndex) in internalTableData" :style="{}" :key="dataIndex" >
                            <td v-for="(item,rowIndex) in internalColumns" v-if="item.isFrozen" :key="rowIndex">
                                <div class="tableCell" :style="{width:item.width+'px',height:rowHeight+'px',lineHeight:rowHeight+'px',textAlign:item.columnAlign}">
                                    <span v-if="item.componentName">
                                        <component :rowData="data" :field="item.field ? item.field : ''"
                                                       :index="rowIndex" :is="item.componentName">
                                        </component>
                                    </span>
                                    <span v-else>{{data[item.field]}}</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>
        <div class="table_rightview" :style="{width:unfixedWidth}">
            <div class="table_header" v-if="fixTitle" @touchmove.stop.prevent ref="tableRightHeader">
                <table :style="{width:isHorizontalResize?'100%':'',marginLeft:marginLeft+'px'}">
                    <tbody>
                        <tr :style="{}">
                            <th v-for="(item,rowIndex) in internalColumns" v-if="!item.isFrozen" :key="rowIndex" >
                                <div class="tableCell" :style="{ width:isHorizontalResize ? '100%' : item.width+'px',height:titleHeight+'px',lineHeight:titleHeight+'px',textAlign:item.titleAlign}">
                                    <span>{{item.title}}</span>
                                    <span v-if="item.orderBy" class='sort_icon' @click.stop.prevent="sort(rowIndex,item.field)"><i :class="item.orderBy=='asc'?'checked':''"></i><i :class="item.orderBy=='desc'?'checked':''"></i></span>
                                </div>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--  -->
            <div class="table_body" :style="{height:bodyHeight}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" ref="tableRightBody">
                <table :style="{width:isHorizontalResize?'100%':'',marginTop:marginTop+'px',marginLeft:marginLeft+'px'}" ref="tableRightBody_table">
                    <tbody>
                        <tr v-if="!fixTitle" :style="{}">
                            <td v-for="(item,rowIndex) in internalColumns" v-if="!item.isFrozen" :key="rowIndex">
                                <div class="tableCell" :style="{ width:isHorizontalResize ? '100%' : item.width+'px',height:titleHeight+'px',lineHeight:titleHeight+'px',textAlign:item.columnAlign}">
                                    <span>{{item.title}}</span>
                                    <span v-if="item.orderBy" class='sort_icon' @click.stop.prevent="sort(rowIndex,item.field)"><i :class="item.orderBy=='asc'?'checked':''"></i><i :class="item.orderBy=='desc'?'checked':''"></i></span>
                                </div>
                            </td>
                        </tr>
                        <tr v-for="(data,dataIndex) in internalTableData" :style="{}" :key="dataIndex">
                            <td v-for="(item,rowIndex) in internalColumns" v-if="!item.isFrozen" :key="rowIndex">
                                <div class="tableCell" :style="{ width:isHorizontalResize ? '100%' : item.width+'px',height:rowHeight+'px',lineHeight:rowHeight+'px',textAlign:item.columnAlign}">
                                    <span v-if="item.componentName">
                                        <component :rowData="data" :field="item.field ? item.field : ''"
                                                       :index="rowIndex" :is="item.componentName">
                                        </component>
                                    </span>
                                    <span v-else>{{data[item.field]}}</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div v-if="maxScrollWidth" :class="{'arrow_more':true,'active':leftArrow}" :style="{'top':arrowTop}"></div>
        <div v-if="isLoading" class="tableLoading">{{ loadingContext }}</div>
    </div>
</template>
<script>
import scrollControlMixin from "./touch-control-mixin.js";
import sortControlMixin from "./sort-control-mixin.js";
import styleControlMixin from "./style-control-mixin.js";
import arrowControlMixin from "./arrow-control-mixin.js";

export default {
  name: "v-m-table",
  mixins: [scrollControlMixin, sortControlMixin, styleControlMixin,arrowControlMixin],
  props: {
    //可传百分比,px,rem等。(要带单位)
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    titleHeight: {
      type: Number,
      default: 40
    },
    rowHeight: {
      type: Number,
      default: 40
    },
    //横向自适应,开启后列宽失效自动撑开。
    isHorizontalResize: {
      type: Boolean,
      default: false
    },
    //是否固定表头
    fixTitle: {
      type: Boolean,
      default: false
    },
    //表格数据
    tableData: {
      type: Array,
      require: true,
      default: function() {
        return [];
      }
    },
    //列数据
    columns: {
      type: Array,
      require: true
    },
    //每页显示条数
    pageSize: {
      type: Number,
      default: 10
    },
    //页码
    pageNumber: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      //本地列数据
      internalColumns: [],
      //本地列表数据
      internalTableData: [],
      //固定列总宽度
      fixedWidth: 0,
      //是否固定列
      fixColumn: false,
      //本地分页参数
      params: {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber
      },
      //本地排序参数(排序规则,排序字段)
      sortParams: {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        order: "desc",
        field: ""
      },
      //可滚动高度=表格总高度-可视区域高度
      maxScrollHeight: 0,
      maxScrollWidth: 0,
      marginTop: 0,
      marginLeft: 0,
      isLoading: false,
      loadingContext: "加载中..."
    };
  },
  computed: {
    bodyHeight() {
      return this.fixTitle
        ? "calc( 100% - " + this.titleHeight + "px )"
        : "100%";
    },
    unfixedWidth() {
      return "calc( 100% - " + this.fixedWidth + "px )";
    }
  },
  created() {
    this.initTable();
  },
  mounted() {
    //初始化渲染
    this.reset();
  },
  methods: {
    initTable() {
      [...this.internalTableData] = this.tableData;
      [...this.internalColumns] = this.columns;
      this.getFixedWidth();
    },
    //加载数据
    initData() {
      if (this.marginTop <= this.maxScrollHeight && !this.isLoading) {
        this.params.pageNumber++;
        this.getData(this.params);
      }
    },
    getData(params) {
      this.isLoading = true;
      this.$emit("getTableData", params);
    },
    //回到顶部,向外暴露
    goToTop() {
      let self = this;
      let top = self.marginTop;
      let scrollTopTimer = setInterval(function() {
        let speed = top / 4;
        self.marginTop -= speed;
        if (self.marginTop >= 0) {
          clearInterval(scrollTopTimer);
          self.marginTop = 0;
        }
      }, 30);
      //   this.marginTop = 0;
    }
  },
  watch: {
    tableData(newVal) {
      this.internalTableData = this.internalTableData.concat(newVal);
      if (newVal.length == 0) {
        this.loadingContext = "亲,到底了";
      } else {
        this.loadingContext = "加载中...";
      }
      this.$nextTick(() => {
        this.reset();
        console.log(newVal, this.internalTableData);
      });
    }
  }
};
</script>