<!-- wijmo表格包装 -->
<template>
  <div>
    <aside>
      <div class="filter">
        <slot name="head_filter" style="display:inline"></slot>
        <cs-field-date v-model="filter.beginDate" v-if="beginDate"></cs-field-date>
        <span style="margin:0 5px;" v-if="beginDate && endDate">-</span>
        <cs-field-date v-model="filter.endDate" v-if="endDate"></cs-field-date>
      </div>

      <div class="button">
        <slot name="head_button"></slot>
        <cs-button @click="exportExcel">{{$t("common.export")}}</cs-button>
      </div>
      <div class="clearfloat"></div>
    </aside>

    <wj-group-panel
      style="display: block;"
      :grid="flex"
      :placeholder="$t('common.flexGridGroupTips')"
      v-if="disableGroupPanel"
    ></wj-group-panel>
    <wj-flex-grid
      id="cs-flex-table"
      style="width:100%;"
      :style=" {'max-height' : max_height + 'px' }"
      :initialized="initialized"
      :itemsSource="tableData"
      :allowResizing="'ColumnsAllCells'"
      :isReadOnly="true"
      selection-mode="ListBox"
    >
      <wj-flex-grid-cell-template cell-type="RowHeader" v-slot="cell">{{cell.row.index + 1}}</wj-flex-grid-cell-template>
      <wj-flex-grid-filter></wj-flex-grid-filter>
      <slot></slot>
    </wj-flex-grid>
  </div>
</template>
<script>
import Request from "../../../lib/utils/request";

import "@grapecity/wijmo.vue2.grid";
import "@grapecity/wijmo.vue2.grid.filter";
import "@grapecity/wijmo.vue2.grid.grouppanel";
import * as wijmo from "@grapecity/wijmo";
import * as wjcGridXlsx from "@grapecity/wijmo.grid.xlsx";

export default {
  name: "CsFlexGrid",
  components: {},
  props: {
    // 资源控制器对象
    objectController: {
      type: String,
      default: null,
    },
    // 查询时传递的url参数
    queryParameters: {
      type: Object,
      default: null,
    },
    // 导出excel的名称
    excelName: {
      type: String,
      default: null,
    },
    // 筛选的开始日期
    beginDate: {
      default: null,
    },
    // 筛选的结束日期
    endDate: {
      default: null,
    },
    // 禁用分组功能
    disableGroupPanel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      flex: null,
      items: [],
      tableData: [],
      max_height: 0,

      filter: {
        beginDate: this.beginDate,
        endDate: this.endDate,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    filter: {
      handler() {
        this.init();
      },
      immediate: false, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
    queryParameters: {
      handler(val) {
        this.init();
      },
      immediate: false, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
    objectController: {
      handler(val) {
        this.init();
      },
      immediate: true, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
  },
  //方法集合
  methods: {
    /* 导出excel */
    exportExcel() {
      let currentTime = this.$moment().format("YYYYMMDD_HH_mm_ss");
      let excelName = "export_{0}.xlsx".format(currentTime);

      if (this.excelName) {
        excelName = this.excelName;
      }
      wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.flex, {}, excelName);
    },

    initialized(flex) {
      this.flex = flex;

      flex.refreshed.addHandler((s) => {
        this.adaptive();
        console.log(s);
      });
    },

    /* 筛选 */
    filterItemFunc(item) {
      const filter = this.filter;
      let itemFilter = true;
      this.$emit("item-filter", item, (res) => {
        if (res == false) {
          itemFilter = false;
        }
      });
      if (itemFilter == false) {
        return false;
      }
      return true;
    },

    /* 构造数据 */
    initData() {
      // 生成表格数据
      this.tableData = [];
      let tableData = [];
      for (let i = 0; i < this.items.length; i++) {
        const item = this.$util.copy(this.items[i]);

        //如果筛选不通过跳过
        if (!this.filterItemFunc(item)) {
          continue;
        }
        tableData.push(item);
      }
      this.tableData = new wijmo.CollectionView(tableData);
    },

    init() {
      let queryParameters = {};
      if (this.queryParameters) {
        queryParameters = this.$util.copy(this.queryParameters);
      }
      if (this.filter.beginDate) {
        queryParameters.beginDate = this.$moment(this.filter.beginDate).format(
          "YYYY-MM-DD"
        );
      }
      if (this.filter.endDate) {
        queryParameters.endDate = this.$moment(this.filter.endDate).format(
          "YYYY-MM-DD"
        );
      }

      Request({
        url: this.objectController,
        params: queryParameters,
        method: "get",
      }).then((res) => {
        this.items = res;
        this.initData();
      });
    },

    adaptive() {
      var csFlexTable = document.getElementById("cs-flex-table");

      var topHeight = csFlexTable.getBoundingClientRect().top;
      this.max_height = window.innerHeight - topHeight - 20;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
aside {
  height: auto;
  padding: 5px;
  margin: 0px;
  margin-bottom: 5px;

  .filter {
    right: 4px;
    float: left;
    padding-left: 5px;
  }

  .button {
    right: 4px;
    float: right;
    white-space: nowrap;
    margin-left: 10px;
  }
}
</style>