<template>
  <div class="page-single">
    <div class="slot"><slot name="soltSearchBar"></slot></div>
    <FilterBar v-if="is_filter" class="filter-bar" ref="filterbar" :table_name="table_name" @search="searchClick"></FilterBar>
    <ToolBar
      v-if="is_tool_bar"
      class="tool-bar"
      ref="toolbar"
      :is_tool_bar_group1="is_tool_bar_group1"
      :is_tool_bar_group2="is_tool_bar_group2"
      :is_tool_bar_group3="is_tool_bar_group3"
      :is_tool_bar_group4="is_tool_bar_group4"
      :is_tool_bar_new="is_tool_bar_new"
      :is_tool_bar_disabled_new="is_tool_bar_disabled_new"
      :is_tool_bar_delete="is_tool_bar_delete"
      :is_tool_bar_disabled_delete="is_tool_bar_disabled_delete"
      :is_tool_bar_refresh="is_tool_bar_refresh"
      :is_tool_bar_disabled_refresh="is_tool_bar_disabled_refresh"
      :is_tool_bar_print="is_tool_bar_print"
      :is_tool_bar_disabled_print="is_tool_bar_disabled_print"
      :is_tool_bar_cancel="is_tool_bar_cancel"
      :is_tool_bar_disabled_cancel="is_tool_bar_disabled_cancel"
      :is_tool_bar_start="is_tool_bar_start"
      :is_tool_bar_disabled_start="is_tool_bar_disabled_start"
      :is_tool_bar_submit="is_tool_bar_submit"
      :is_tool_bar_disabled_submit="is_tool_bar_disabled_submit"
      :is_tool_bar_back="is_tool_bar_back"
      :is_tool_bar_disabled_back="is_tool_bar_disabled_back"
      :is_tool_bar_call_back="is_tool_bar_call_back"
      :is_tool_bar_disabled_call_back="is_tool_bar_disabled_call_back"
      :is_tool_bar_check="is_tool_bar_check"
      :is_tool_bar_disabled_check="is_tool_bar_disabled_check"
      :is_tool_bar_work_flow_custom_01="is_tool_bar_work_flow_custom_01"
      :text_tool_bar_work_flow_custom_01="text_tool_bar_work_flow_custom_01"
      :is_tool_bar_work_flow_disabled_custom_01="is_tool_bar_work_flow_disabled_custom_01"
      :is_tool_bar_work_flow_custom_02="is_tool_bar_work_flow_custom_02"
      :text_tool_bar_work_flow_custom_02="text_tool_bar_work_flow_custom_02"
      :is_tool_bar_work_flow_disabled_custom_02="is_tool_bar_work_flow_disabled_custom_02"
      :is_tool_bar_down_load="is_tool_bar_down_load"
      :is_tool_bar_disabled_down_load="is_tool_bar_disabled_down_load"
      :is_tool_bar_import="is_tool_bar_import"
      :is_tool_bar_disabled_import="is_tool_bar_disabled_import"
      :is_tool_bar_export_set="is_tool_bar_export_set"
      :is_tool_bar_disabled_export_set="is_tool_bar_disabled_export_set"
      :is_tool_bar_export="is_tool_bar_export"
      :is_tool_bar_disabled_export="is_tool_bar_disabled_export"
      :text_tool_bar_custom_01="text_tool_bar_custom_01"
      :is_tool_bar_custom_01="is_tool_bar_custom_01"
      :is_tool_bar_disabled_custom_01="is_tool_bar_disabled_custom_01"
      :text_tool_bar_custom_02="text_tool_bar_custom_02"
      :is_tool_bar_custom_02="is_tool_bar_custom_02"
      :is_tool_bar_disabled_custom_02="is_tool_bar_disabled_custom_02"
      :text_tool_bar_custom_03="text_tool_bar_custom_03"
      :is_tool_bar_custom_03="is_tool_bar_custom_03"
      :is_tool_bar_disabled_custom_03="is_tool_bar_disabled_custom_03"
      :text_tool_bar_custom_04="text_tool_bar_custom_04"
      :is_tool_bar_custom_04="is_tool_bar_custom_04"
      :is_tool_bar_disabled_custom_04="is_tool_bar_disabled_custom_04"
      :text_tool_bar_custom_05="text_tool_bar_custom_05"
      :is_tool_bar_custom_05="is_tool_bar_custom_05"
      :is_tool_bar_disabled_custom_05="is_tool_bar_disabled_custom_05"
      @clickNew="clickNew"
      @clickRefresh="clickRefresh"
      @clickPrint="clickPrint"
      @clickDelete="clickDelete"
      @clickExport="clickExport"
      @clickCustom01="clickCustom01"
      @clickCustom02="clickCustom02"
      @clickCustom03="clickCustom03"
      @uploadSuccess="uploadSuccess"
    >
      <template v-slot:tool-bar-group1>
        <slot name="tool-bar-group1"></slot>
      </template>
    </ToolBar>
    <TableGridTree
      v-if="is_tree"
      style="height: 100%"
      :max_height="`calc(100% - ${blank_spacing})`"
      ref="grid_tree"
      :is_check="is_check"
      :is_number="is_number"
      :is_watch="is_watch"
      :is_delete="is_delete"
      :is_edit="is_edit"
      :table_name="table_name"
      :order_by="order_by"
      :ref_level="ref_level"
      :filter_data="filter_data"
      @handleCurrentChangeRow="handleCurrentChangeRow"
    ></TableGridTree>
    <TableGrid
      v-else
      style="height: 100%"
      :max_height="`calc(100% - ${blank_spacing})`"
      ref="grid"
      :is_check="is_check"
      :is_number="is_number"
      :is_watch="is_watch"
      :is_delete="is_delete"
      :is_edit="is_edit"
      :table_name="table_name"
      :order_by="order_by"
      :ref_level="ref_level"
      :filter_data="filter_data"
      @handleCurrentChangeRow="handleCurrentChangeRow"
    ></TableGrid>

    <DialogNew :table_name="table_name" :show_dialog="dialog_new" :col_num="1" @dialogClose="newDiaglogClose" />
  </div>
</template>

<script>
import system from '../../api/system.js';
export default {
  name: 'page-single',
  props: {
    table_name: {
      type: String,
      required: true
    },
    // 是否是树型表格
    is_tree: {
      type: Boolean,
      default: false
    },
    // 树型表格的 节点节的字段名
    tree_p_id: {
      type: String,
      default: 'p_id'
    },
    blank_spacing: {
      type: String,
      default: '48px'
    },
    // 是否显示系统过滤条件
    is_filter: {
      type: Boolean,
      default: true
    },
    // 是否显示系统过滤条件
    is_tool_bar: {
      type: Boolean,
      default: true
    },
    // 是否显示序号
    is_number: {
      type: Boolean,
      default: true
    },
    // 主要用到单据表中时
    is_dialog: {
      type: Boolean,
      default: false
    },

    // 是否有勾选
    is_check: {
      type: Boolean,
      default: true
    },
    // grid 中是否有查看功能
    is_watch: {
      type: Boolean,
      default: true
    },
    // grid 中编辑功能
    is_edit: {
      type: Boolean,
      default: true
    },
    // grid 中的删除功能
    is_delete: {
      type: Boolean,
      default: true
    },
    // 是否可显示工具栏第一个分组
    is_tool_bar_group1: {
      type: Boolean,
      default: true
    },
    // 是否可显示工具栏第二个分组
    is_tool_bar_group2: {
      type: Boolean,
      default: false
    },
    // 是否可显示工具栏第三个分组
    is_tool_bar_group3: {
      type: Boolean,
      default: false
    },
    // 是否可显示工具栏第四个分组
    is_tool_bar_group4: {
      type: Boolean,
      default: true
    },
    // 新建安扭是否可见
    is_tool_bar_new: {
      type: Boolean,
      default: true
    },
    // 新增 是否可用
    is_tool_bar_disabled_new: {
      type: Boolean,
      default: false
    },
    // 删除 安扭是否可见
    is_tool_bar_delete: {
      type: Boolean,
      default: true
    },
    // 删除 是否可用
    is_tool_bar_disabled_delete: {
      type: Boolean,
      default: false
    },

    // 刷新 安扭是否可见
    is_tool_bar_refresh: {
      type: Boolean,
      default: true
    },
    // 刷新 是否可用
    is_tool_bar_disabled_refresh: {
      type: Boolean,
      default: false
    },
    // 打印 安扭是否可见
    is_tool_bar_print: {
      type: Boolean,
      default: false
    },
    // 打印 是否可用
    is_tool_bar_disabled_print: {
      type: Boolean,
      default: false
    },
    // 禁用 是否可用
    is_tool_bar_disabled_cancel: {
      type: Boolean,
      default: false
    },
    // 禁用 安扭是否可见
    is_tool_bar_cancel: {
      type: Boolean,
      default: true
    },
    // 启用 是否可用
    is_tool_bar_disabled_start: {
      type: Boolean,
      default: false
    },
    // 启用 安扭是否可见
    is_tool_bar_start: {
      type: Boolean,
      default: true
    },

    // 提交 是否可用
    is_tool_bar_disabled_submit: {
      type: Boolean,
      default: false
    },
    // 提交 安扭是否可见
    is_tool_bar_submit: {
      type: Boolean,
      default: true
    },

    // 退回 是否可用
    is_tool_bar_disabled_back: {
      type: Boolean,
      default: false
    },
    // 退回 安扭是否可见
    is_tool_bar_back: {
      type: Boolean,
      default: true
    },

    // 撤回 是否可用
    is_tool_bar_disabled_call_back: {
      type: Boolean,
      default: false
    },
    // 撤回 安扭是否可见
    is_tool_bar_call_back: {
      type: Boolean,
      default: true
    },
    // 审批 是否可用
    is_tool_bar_disabled_check: {
      type: Boolean,
      default: false
    },
    // 审批 安扭是否可见
    is_tool_bar_check: {
      type: Boolean,
      default: true
    },
    // 自定义工作流一是否可见
    is_tool_bar_work_flow_custom_01: {
      type: Boolean,
      default: true
    },
    text_tool_bar_work_flow_custom_01: {
      type: String,
      default: '自定义一'
    },
    // 自定义工作流一是否可用
    is_tool_bar_work_flow_disabled_custom_01: {
      type: Boolean,
      default: false
    },
    text_tool_bar_work_flow_custom_02: {
      type: String,
      default: '自定义二'
    },
    // 自定义工作流二是否可见
    is_tool_bar_work_flow_custom_02: {
      type: Boolean,
      default: true
    },
    // 自定义工作流二是否可用
    is_tool_bar_work_flow_disabled_custom_02: {
      type: Boolean,
      default: false
    },
    // 是否是示示 下载模板
    is_tool_bar_down_load: {
      type: Boolean,
      default: true
    },
    // 下载模板 是否可用
    is_tool_bar_disabled_down_load: {
      type: Boolean,
      default: false
    },

    // 是否是示示导入
    is_tool_bar_import: {
      type: Boolean,
      default: true
    },
    // 导入 是否可用
    is_tool_bar_disabled_import: {
      type: Boolean,
      default: false
    },
    // 导出设置是否可见
    is_tool_bar_export_set: {
      type: Boolean,
      default: true
    },
    // 导出设置是否可见
    is_tool_bar_disabled_export_set: {
      type: Boolean,
      default: false
    },
    // 是否显示导出
    is_tool_bar_export: {
      type: Boolean,
      default: true
    },
    // 导出 是否可用
    is_tool_bar_disabled_export: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_01: {
      type: String,
      default: '自定义一'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_01: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_01: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_02: {
      type: String,
      default: '自定义二'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_02: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_02: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_03: {
      type: String,
      default: '自定义三'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_03: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_03: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_04: {
      type: String,
      default: '自定义四'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_04: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_04: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 的文本
    text_tool_bar_custom_05: {
      type: String,
      default: '自定义五'
    },
    // 自定义操作1 是否可见
    is_tool_bar_custom_05: {
      type: Boolean,
      default: false
    },
    // 自定义操作1 是否可用
    is_tool_bar_disabled_custom_05: {
      type: Boolean,
      default: false
    },
    // 外面传入的过滤条件
    filter_data: {
      type: Array
    },
    // 数据排序
    order_by: {
      type: String,
      default: ''
    },
    // 引用的转取的层数
    ref_level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialog_new: false,
      dialog_single: false,
      button_operation: [
        {
          is_visbile: false
        }
      ]
    };
  },
  // created(){
  //   var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
  //   var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
  //   console.log('w,h',w,h);
  // },

  methods: {
    // 新建按钮
    clickNew() {
      let that = this;
      that.dialog_new = true;
    },
    // 批量删除
    clickDelete() {
      let that = this;
      // 得到选择的数据集合
      let selecttion_list_data = null;
      if (that.is_tree === false) {
        selecttion_list_data = that.$refs.grid.getSelectionChangeData();
      } else {
        selecttion_list_data = that.$refs.grid_tree.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: '操作失败'
                });
              }
              that.$emit('clickDelete', res.result);
            });
          });
      }
    },
    // 刷新
    clickRefresh() {
      let that = this;
      that.reloadData(true);
      that.$emit('clickRefresh', true);
    },
    // 打印
    clickPrint() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickPrint', true);
    },
    // 禁用
    clickCancel() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCancel', true);
    },
    // 启用
    clickStart() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickStart', true);
    },
    // 提交
    clickSubmit() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickSubmit', true);
    },
    // 撤回
    clickCallBack() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCallBack', true);
    },
    // 退回
    clickBack() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickBack', true);
    },
    // 审批
    clickCheck() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCheck', true);
    },
    // 自定义工作流一
    clickWorkFlowCustom01() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickWorkFlowCustom01', true);
    },
    // 自定义工作流二
    clickWorkFlowCustom02() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickWorkFlowCustom02', true);
    },
    // 下载模板
    clickDownLoad() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickDownLoad', true);
    },

    // 导入
    clickImport() {
      let that = this;
      that.$emit('clickImport', true);
    },
    // 导出设置
    clickExPortSet() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickExPortSet', true);
    },
    // 导出
    clickExport() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickExport', true);
    },
    // 自定义操作1
    clickCustom01() {
      let that = this;
      that.$emit('clickCustom01', true);
    },
    // 自定义操作2
    clickCustom02() {
      let that = this;
      // that.$message({
      //   type: 'info',
      //   message: '目前还没有实现改功能'
      // });
      that.$emit('clickCustom02', true);
    },
    // 自定义操作3
    clickCustom03() {
      let that = this;
      // that.$message({
      //   type: 'info',
      //   message: '目前还没有实现改功能'
      // });
      that.$emit('clickCustom03', true);
    },
    // 自定义操作4
    clickCustom04() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCustom04', true);
    },
    // 自定义操作1
    clickCustom05() {
      let that = this;
      that.$message({
        type: 'info',
        message: '目前还没有实现改功能'
      });
      that.$emit('clickCustom05', true);
    },

    // 得到选择的行的列表
    getSelectionChangeData() {
      let that = this;
      if (that.is_tree) {
        return that.$refs.grid_tree.getSelectionChangeData();
      } else {
        return that.$refs.grid.getSelectionChangeData();
      }
    },

    searchClick(filter_data) {
      let that = this;
      console.log('filter_data,', filter_data);
      if (that.is_tree===true) {
        // that.$refs.grid_tree.setDataByFilter(filter_data);
      } else {
        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);
      }
      that.$emit('clickNew', value);
    },
    dialogCloseSingle(val) {
      let that = this;
      that.dialog_single = false;
      if (val === true) {
        console.log('点击了确定按钮');
      }
    },
    handleCurrentChangeRow(val) {
      let that = this;
      that.currentRow = val;
      // console.log('handleCurrentChangeRow', val);
      that.$emit('handleCurrentChangeRow', val);
    },
    dialogConfigSingle(row, display_value) {
      console.log('点击了确定按钮,选择值为:', row, display_value);
    },
    // 重新加载数据
    reloadData(is_page_first) {
      let that = this;
      if (that.is_tree) {
        that.$refs.grid_tree.reloadData(is_page_first);
      } else {
        that.$refs.grid.reloadData(is_page_first);
      }
    },
    // 文件上传成功
    uploadSuccess(event) {
      let that = this;
      console.log('page-single', event);
      that.$emit('uploadSuccess', event);
    }
  }
};
</script>

<style lang="scss">
.page-single {
  width: 100%;
  padding: 0px;
  height: calc(100% - 31px);
  display: flex;
  flex-direction: column;
  flex-shrink: 2;
  .filter-bar {
    flex-shrink: 0;
  }
  .tool-bar {
    flex-shrink: 0;
  }
}
</style>
