<template>
  <div class="page-sheet">
    <FilterBar ref="filterbar" :table_name="table_name" @search="searchClick"></FilterBar>
    <ToolBar
      ref="toolbar"
      v-if="is_tool_bar"
      :is_visbile_new="false"
      @clickNew="clickNew"
      @clickRefresh="clickRefresh"
      @clickPrint="clickPrint"
      @clickDelete="clickDelete"
    ></ToolBar>
    <TableGridSheet
      style="height: 100%"
      ref="grid"
      :is_check="false"
      :is_sheet="true"
      :is_edit="false"
      :is_delete ="false"
      :table_name="table_name" 
      :order_by="order_by"
      :ref_level="ref_level"
      :filter_data="filter_data"
    ></TableGridSheet>
    <!-- <DialogNew :table_name="table_name" :show_dialog="dialog_new" 
    @dialogClose="newDiaglogClose"></DialogNew> -->
    <DrawerNew :show_dialog="dialog_new"  :table_name="table_name"  @dialogClose="newDiaglogClose"></DrawerNew>

    <!--  <DialogMultiple
      :show_dialog="dialog_single"
      @dialogClose="dialogCloseSingle"
      :ref_level="ref_level"
      :filter_data="filter_data"
      @dialogConfig="dialogConfigSingle"
      :table_name="table_name"
    ></DialogMultiple> -->
  </div>
</template>

<script>
import system from '../../api/system.js';
export default {
  name: 'page-sheet',
  props: {
    table_name: {
      type: String,
      required: true
    },
    // 外面传入的过滤条件
    filter_data: {
      type: Array
    },
    // 数据排序
    order_by: {
      type: String,
      default: ''
    },
    // 是否显示系统过滤条件
    is_tool_bar: {
      type: Boolean,
      default: true
    },
    // 引用的转取的层数
    ref_level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialog_new: false,
      dialog_single: false,
      button_operation: [
        {
          is_visbile: true
        }
      ]
    };
  },
  
  methods: {
    // 新建按钮
    clickNew() {
      let that = this;
      that.dialog_new = true;
    },
    searchClick(filter_data) {
      let that = this;
      console.log('filter_data,', filter_data);
      that.$refs.grid.setDataByFilter(filter_data);
      // 这个地方导出时要用到
      console.log('conditions=====', that.$refs.grid.getFilterData());
    },
    // 新建对话框关闭之后事件
    newDiaglogClose(value) {
      let that = this;
      that.dialog_new = false;
      if (value === true) {
        that.reloadData(false);
      }
    },
    // 刷新按钮
    clickRefresh() {
      let that = this;
      that.reloadData(true);
    },
    clickPrint() {
      console.log('clickPrint');
      let that = this;
      that.dialog_single = true;
    },
    dialogCloseSingle(val) {
      let that = this;
      that.dialog_single = false;
      if (val === true) {
        console.log('点击了确定按钮');
      }
    },
    dialogConfigSingle(row, display_value) {
      console.log('点击了确定按钮,选择值为:', row, display_value);
    },
    clickDelete() {
      let that = this;
      // 得到选择的数据集合
      let selecttion_list_data = that.$refs.grid.getSelectionChangeData();
      console.log('Grid勾选的数据信息：', selecttion_list_data);

      if (selecttion_list_data.length <= 0) {
        that.$message({
          type: 'info',
          message: '请您勾选要操作的数据，谢谢'
        });
      } else {
        that
          .$confirm('此操作将删除数据, 是否继续?', '删除数据提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            system.batchDelete(that.table_name, { data: { flame_id: selecttion_list_data } }, res => {
              // console.log('delete res =', res);
              // 如果删除成功，要刷新表格的数据
              if (res.result === true) {
                that.reloadData(false);
              } else {
                that.$message({
                  type: 'error',
                  message: '操作失败'
                });
              }
            });
          });
      }
    },
    // 重新加载数据
    reloadData(is_page_first) {
      let that = this;
      that.$refs.grid.reloadData(is_page_first);
    }
  }
};
</script>

<style lang="scss">
  .page-sheet{
    width: 100%;
    padding: 0px;
    height: calc(100vh - 175px);
  }
</style>
