<template>
  <Modal
    ref="modal"
    v-model="opened"
    scrollable
    :mask-closable="maskClosable == null ? layout.maskClosable : maskClosable"
    :draggable="draggable == null ? layout.draggable : draggable"
    :sticky="true"
    :reset-drag-position="true"
    :width="tableView.width || screenWidth"
    :before-close="beforeClose"
    :footer-hide="!footerEnable"
    @on-visible-change="onVisibleChange"
  >
    <div slot="header">
      <!--
          @slot 页头
      -->
      <slot name="header">
        <span class="title">{{ getNameI18n(tableView) }}</span>
        <span class="description">{{ getDescI18n(tableView) }}</span>
      </slot>
    </div>
    <div class="ivu-ml-8 ivu-mr-8">
      <view-table
        ref="table"
        :view-code="viewCode"
        :static="this.static"
        :filter="tableFilter"
        :setting-enable="settingEnable"
        :select-enable="selectEnable"
        :autoLoad="false"
        :tree-enable="treeEnable"
        :tree-load="treeLoad"
        :has-children="hasChildren"
        :create-enable="createEnable"
        :edit-enable="editEnable"
        :remove-enable="removeEnable"
        :draggable="draggable"
        :filter-enable="filterEnable"
        :page-enable="pageEnable"
        :embedded="embedded"
        :before-load-data="beforeLoadData"
        :on-search="onSearch"
        :summary-method="summaryMethod"
        :page-size-opts="pageSizeOpts"
        :span-method="spanMethod"
        @create="create"
        @edit="edit"
        @on-ready="onReady"
        @on-load-data="onLoadData"
        @after-init="afterInit"
        @on-drag-drop="dragDrop"
      >
        <template slot="top">
          <!--
              @slot 顶部
          -->
          <slot name="top"></slot>
        </template>
        <template slot-scope="{ filter }" slot="filter">
          <!--
              @slot 筛选栏
              @binding {object} table 表格对象
              @binding {object} filter 筛选对象
          -->
          <slot name="filter" :table="$refs.table" :filter="filter" :param="param"></slot>
        </template>
        <template slot="customFilter">
          <!--
              @slot 自定义筛选栏
          -->
          <slot name="customFilter"></slot>
        </template>
        <template slot="filterCommand">
          <!--
              @slot 筛选栏按钮
          -->
          <slot name="filterCommand"></slot>
        </template>
        <template slot-scope="{ row, index }" slot="commandBefore">
          <!--
              @slot 工具栏（编辑按钮前）
              @binding {object} row 行对象
              @binding {int} index 行序号
          -->
          <slot name="commandBefore" :row="row" :index="index"></slot>
        </template>
        <template slot-scope="{ row, index }" slot="command">
          <!--
              @slot 工具栏
              @binding {object} row 行对象
              @binding {int} index 行序号
          -->
          <slot name="command" :row="row" :index="index"></slot>
        </template>
        <template slot-scope="{ row, index, column, code }" slot="column">
          <!--
              @slot 自定义列
              @binding {object} row 行对象
              @binding {int} index 行序号
              @binding {object} column 列对象
              @binding {string} code 列代码
          -->
          <slot name="column" :row="row" :index="index" :column="column" :code="code"></slot>
        </template>
        <template slot="filterColumn" slot-scope="{ filter, column }">
          <!--
              @slot 筛选栏自定义列
              @binding {object} filter 筛选条件对象
              @binding {object} column 列对象
              @binding {string} code 列代码
          -->
          <slot name="filterColumn" :filter="filter" :column="column" :code="column.code"></slot>
        </template>
      </view-table>
    </div>
    <div slot="footer">
      <!--
          @slot 页脚
      -->
      <slot name="footer"></slot>
    </div>
  </Modal>
</template>
<script>
  import mixinPage from '../../mixins/page';

  /**
   * @displayName modal-table 表格对话框
   */
  export default {
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        opened: false,
        tableView: {},
        param: {},
        tableFilter: {}
      };
    },
    created() {},
    props: {
      /**
       * 视图代码
       */
      viewCode: {
        type: String
      },
      /**
       * 是否静态数据
       */
      static: {
        type: Boolean,
        default: false
      },
      /**
       * 筛选
       */
      filter: {
        type: Object,
        default() {
          return {};
        }
      },
      /**
       * 显示底栏
       */
      footerEnable: {
        type: Boolean,
        default: false
      },
      /**
       * 自动加载
       */
      autoLoad: {
        type: Boolean,
        default: true
      },
      /**
       * 是否允许点击遮罩层关闭
       */
      maskClosable: {
        type: Boolean,
        default: null
      },
      /**
       * 是否允许拖动
       */
      draggable: {
        type: Boolean,
        default: null
      },
      /**
       * 是否允许配置界面
       */
      settingEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 是否允许选择
       */
      selectEnable: {
        type: Boolean,
        default: false
      },
      /**
       * 是否允许树展开
       */
      treeEnable: {
        type: Boolean,
        default: false
      },
      /**
       * 树展开字段
       */
      treeColumn: {
        type: String
      },
      /**
       * 树展开动作
       */
      treeLoad: {
        type: Function
      },
      /**
       * 树包含子项
       */
      hasChildren: {
        type: Function
      },
      /**
       * 允许创建
       */
      createEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 允许编辑
       */
      editEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 允许删除
       */
      removeEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 允许筛选栏
       */
      filterEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 允许分页
       */
      pageEnable: {
        type: Boolean,
        default: true
      },
      /**
       * 是否内嵌表格
       */
      embedded: {
        type: Boolean,
        default: false
      },
      /**
       * 加载数据前
       */
      beforeLoadData: {
        type: Function
      },
      /**
       * 查询方法
       */
      onSearch: {
        type: Function
      },
      /**
       * 合计方法
       */
      summaryMethod: {
        type: Function
      },
      /**
       * 每页条数切换的配置
       */
      pageSizeOpts: {
        type: Array
      },
      /**
       * 关闭前方法
       */
      beforeClose: {
        type: Function
      },
      /**
       * 合并单元格的配置
       */
      spanMethod: {
        type: Function
      }
    },
    computed: {
      data() {
        return this.$refs.table.data;
      },
      table() {
        return this.$refs.table;
      },
      screenWidth() {
        return document.body.clientWidth * 0.8;
      }
    },
    methods: {
      /**
       * 初始化
       *
       * @param {string} viewCode 视图代码
       * @param {function} callback 完成后回调方法
       * @param {function} onFail 失败后回调方法
       * @public
       */
      async init(viewCode, callback, onFail) {
        await this.$refs.table.init(viewCode, callback, onFail);
      },
      /**
       * 打开
       *
       * @param {object} param 参数
       * @public
       */
      open(param) {
        for (let key in this.param) {
          delete this.tableFilter[key];
        }

        this.param = param;

        for (let key in this.param) {
          this.tableFilter[key] = this.param[key];
        }

        setTimeout(() => {
          this.$refs.table.loadData();

          setTimeout(() => {
            this.opened = true;
          });
        });
      },
      /**
       * 关闭
       *
       * @public
       */
      async close() {
        this.opened = false;
      },
      /**
       * 验证
       *
       * @public
       */
      validate() {
        return this.$refs.table.validate();
      },
      /**
       * 加载数据
       *
       * @param {object} staticData 静态数据
       * @public
       */
      loadData(staticData) {
        this.$refs.table.loadData(staticData);
      },
      /**
       * 获取选中项
       *
       * @public
       */
      getSelected() {
        return this.$refs.table.getSelected();
      },
      /**
       * 设置选中项
       *
       * @param {array} selected 选中项集合
       * @public
       */
      setSelected(selected) {
        this.$refs.table.setSelected(selected);
      },
      /**
       * 获取数据
       *
       * @public
       */
      getData() {
        return this.$refs.table.getData();
      },
      /**
       * 获取默认值
       *
       * @public
       */
      getDefaultData() {
        return this.$refs.table.getDefaultData();
      },
      onReady(tableView) {
        this.tableView = tableView;
      },
      onVisibleChange(show) {
        // 关闭时清空数据
        if (!show) {
          if (this.$refs.table.isStatic) {
            this.$refs.table.loadData([]);
          }
          /**
           * 关闭事件
           */
          this.$emit('on-close');
        }
      },
      onLoadData() {
        /**
         * 数据加载事件
         */
        this.$emit('on-load-data');
      },
      // 创建新项
      create() {
        /**
         * 新建事件
         * @property {object} param 参数
         */
        this.$emit('create', this.param);
      },
      // 编辑项
      edit(args) {
        /**
         * 编辑事件
         * @property {object} args { row 行对象, index 行序号 }
         */
        this.$emit('edit', args);
      },
      // 删除项
      remove(row) {
        this.$refs.table.remove(row);
      },
      // 完成初始化
      afterInit() {
        /**
         * 初始化完成事件
         */
        this.$emit('after-init');
      },
      // 清空全部选中项
      selectAllCancel() {
        this.setSelected([]);
      },
      // 拖拽完成
      dragDrop(args) {
        /**
         * 拖动完成事件
         * @property {object} args { index1 来源行序号, index2 目标行序号 }
         */
        this.$emit('on-drag-drop', args);
      },
      // 获取多语言名称
      getNameI18n(tableView) {
        if (this.layout.showI18n) {
          if (tableView.code) {
            let key = 'DataView_' + tableView.code;
            let text = this.$t(key);
            if (text == key) {
              return tableView.name;
            } else {
              return text;
            }
          }
        } else {
          return tableView.name;
        }
      },
      // 获取多语言描述
      getDescI18n(tableView) {
        if (this.layout.showI18n) {
          if (tableView.code) {
            let key = 'DataView_' + tableView.code + '_$Desc';
            let text = this.$t(key);
            if (text == key) {
              return tableView.name;
            } else {
              return text;
            }
          }
        } else {
          return tableView.description;
        }
      }
    }
  };
</script>
