<template>
  <div style="height: calc(100% - 125px)">
    <!-- 封装后的表格 -->
    <el-table
      class="list-main"
      ref="singleTable"
      :data="table_data"
      height="100%"
      :header-cell-style="getRowClass"
      stripe
      border
      :cell-style="{ padding: '2px 0' }"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <!-- :cell-style="{padding:'50px 0'}" -->
      <!-- 选择列 -->
      <!-- <el-table-column label="系统" header-align="center"> -->
      <el-table-column fixed="left" label="序号" type="index" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ (page_index - 1) * page_size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- </el-table-column> -->
      <template v-for="column in columns">
        <el-table-column
          :align="column.cell_align"
          :width="column.width"
          :fixed="column.is_fixed ? column.fixed_position : false"
          sortable
          v-if="column.is_group === false"
          :key="column.flame_id"
          :show-overflow-tooltip="true"
          :prop="column.field_ename"
          :label="column.field_cname"
        ></el-table-column>
        <!-- sortable -->
        <el-table-column
          :align="column.cell_align"
          :width="column.width"
          :fixed="column.is_fixed ? column.fixed_position : false"
          v-else
          :key="column.flame_id"
          :show-overflow-tooltip="true"
          :prop="column.field_ename"
          :label="column.field_cname"
        >
          <el-table-column
            v-for="col in column.children"
            :header-align="col.header_align"
            :key="col.flame_id"
            :width="col.width"
            :align="col.cell_align"
            :show-overflow-tooltip="true"
            :prop="col.field_ename"
            :label="col.field_cname"
          ></el-table-column>
        </el-table-column>
       
      </template>
     <el-table-column label=""></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_index"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_number"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';
export default {
  name: 'table-query',
  components: {},
  props: {
    // 外面传入的过滤条件
    filter_data: {
      type: Object
    },
    table_name: {
      type: String,
      required: true
    },
    max_height: Number,
    // 要操作的表名 navication
    query_code: {
      type: String,
      required: true
    }
    // page_size: {
    //   type: Number,
    //   default: 15,
    // },
  },
  data() {
    return {
      page_size: 15,
      table_height: null,
      table_data: [],
      columns: [],
      page_index: 1,
      total_number: 0,
      current_id: 0,
      currentRow: null,
      args: {},
      commit_data: {}
    };
  },
  watch: {
    immediate: true,
    deep: true,
    filter_data(newV, OldV) {
      let that = this;
      // that.reloaddata();
    },
    query_code(newV, oldV) {
      let that = this;
      that.getfiled();
    }
  },
  computed: {
    ...mapGetters('global', ['flameQuerys', 'flameQueryItems', 'getOneQueryfoByCode', 'getOneQueryItemByCode']),
    // 总记录数
    data_record: function() {
      let that = this;
      return that.total_number;
    },
    // 页面大小
    real_page_size: function() {
      let that = this;
      return that.page_size;
    },
    // 当前页
    real_page_index: function() {
      let that = this;
      return that.page_index;
    },
    // 查询数据的过滤条件
    real_filter_data: function() {
      let that = this;
      let default_filter_data = {};
      if (that.filter_data.length > 0) {
        default_filter_data = that.filter_data;
      }
      return default_filter_data;
    }
  },
  created() {
    // this.getTableHeight();
  },
  mounted() {
    let that = this;
    this.getfiled(that.query_code);
  },
  methods: {
    getTableHeight() {
      let that = this;
      var h = document.documentElement.offsetHeight || document.body.offsetHeight;
      that.table_height = h - 245;
    },
    getfiled(query_code) {
      let that = this;
      let query_items = that.getOneQueryItemByCode(query_code);
      console.log('query_items', query_items);
      let columns = [];
      let groups = [];
      let k = 0;
      query_items.forEach(e => {
        //
        if (e.is_display === true) {
          e.is_group = false;
          if (e.group_name !== '') {
            e.is_group = true;
            let find = false;
            // 统计有多个分组，并将分组的group_name 及第一个下标存放起来
            for (let i = 0; i < groups.length; i++) {
              if (groups[i].group_name === e.group_name) {
                find = true;
              }
            }
            if (find === false) {
              groups.push({ index: k, group_name: e.group_name });
              columns.push({
                field_cname: e.group_name,
                group_name: e.group_name,
                is_group: true,
                cell_align: e.cell_align,
                is_fixed: e.is_fixed,
                fixed_position: e.fixed_position,
                flame_id: e.flame_id + 1
              });
            }
          } else {
            columns.push(e);
          }
        }
      });
      columns.forEach(e => {
        e.children = [];
        if (e.is_group === true) {
          let group_name = e.group_name;
          // e.field_cname = group_name;
          for (let k = 0; k < query_items.length; k++) {
            if (group_name === query_items[k].group_name) {
              e.children.push(query_items[k]);
            }
          }
        }
        that.columns.push(e);
      });
      console.log('query_items-resulst:', that.columns);
      that.getData();
    },
    reloadData(is_page_first) {
      let that = this;
      if (is_page_first === true) {
        that.page_index = 1;
      }
      that.getData();
    },
    getCommitData() {
      let that = this;
      let commit_data = {
        query_code: that.query_code,
        args: {
          page_size: that.page_size,
          page_no: that.page_index
        }
      };
      // 获取数据绑定的固定的参数

      let keys = Object.keys(that.filter_data);
      // console.log('keys:',keys);
      keys.forEach(e => {
        commit_data.args[e] = that.filter_data[e];
      });
      return commit_data;
    },
    getData() {
      let that = this;
      that.setFilterData(that.args);
    },
    setFilterData(filter_data, page_Index) {
      let that = this;
      if (page_Index === 1) {
        that.page_index = page_Index;
      }
      let commit_data = that.getCommitData();
      that.args = filter_data;
      let keys = Object.keys(filter_data);
      // console.log('keys:',keys);
      keys.forEach(e => {
        commit_data.args[e] = filter_data[e];
      });
      that.getGridData(commit_data);
    },
    getSearchCommitData() {
      let that = this;
      return that.commit_data;
    },
    getGridData(commit_data) {
      let that = this;
      that.commit_data = commit_data;
      system.queryPage(that.table_name, commit_data, res => {
        console.log('res', res);
        if (res.result) {
          that.table_data = res.items;
          that.page_size = res.page_size;
          that.total_number = res.total_results;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_size = val;
      this.page_index = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val},${this.page_size}`);
      let that = this;
      that.page_index = val;
      that.getData();
    },
    // 表格选择
    handleSelectionChange(rows) {
      let that = this;
      // console.log("selectAll", rows);
      that.multipleSelection = [];
      rows.forEach(e => {
        that.multipleSelection.push(e.id);
      });
      if (rows.length === that.page_size) {
        that.checked_all = true;
      } else {
        that.checked_all = false;
      }
    },
    // 修改表格的表头样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: #606266; font-size: 12px; height:30px; padding: 0';
      } else if (rowIndex === 1) {
        return 'color: #919398; font-size: 12px; height:30px; padding: 0';
      } else {
        return '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list-main {
  font-size: 12px;
}
.table-th {
  padding: 0;
}
.pagination {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .batch {
    display: flex;
    padding: 8px;
    .checkbox {
      margin-top: 8px;
      margin-right: 8px;
    }
  }
}
</style>
