<template>
  <Modal
    ref="modal"
    v-model="opened"
    scrollable
    :fullscreen="isFullscreen"
    :mask-closable="maskClosable == null ? layout.maskClosable : maskClosable"
    :draggable="draggable == null ? layout.draggable : draggable"
    :sticky="true"
    :reset-drag-position="true"
    :width="modalWidth"
    :before-close="beforeClose"
    :footer-hide="!footerEnable"
    @on-visible-change="onVisibleChange"
  >
    <template #header>
      <div>
        <slot name="header">
          <span class="title">{{ getNameI18n(tableView) }}</span>
          <span class="description">{{ getDescI18n(tableView) }}</span>
        </slot>
      </div>
    </template>
    <template #close>
      <div @click.stop>
        <Icon v-if="!isFullscreen" style="font-size: 20px; color: #999; position: relative; top: -3px" type="ios-expand" @click="setFullscreen(true)" />
        <Icon v-if="isFullscreen" style="font-size: 20px; color: #999; position: relative; top: -3px" type="ios-contract" @click="setFullscreen(false)" />
        <Icon type="ios-close" @click="clickClose()" />
      </div>
    </template>
    <div class="ivu-ml-8 ivu-mr-8">
      <view-table-excel
        ref="table"
        :view-code="viewCode"
        :readonly="readonly"
        :parent-data="mergedParentData"
        :setting-enable="settingEnable"
        :auto-load="false"
        :height="height"
        @after-init="afterInit"
        @on-change="onChange"
        @on-load-data="onLoadData"
      >
        <template #top>
          <slot name="top"></slot>
        </template>
      </view-table-excel>
    </div>
    <template #footer>
      <div>
        <slot name="footer"></slot>
      </div>
    </template>
  </Modal>
</template>
<script>
  import mixinPage from '../../mixins/page';

  /**
   * @displayName modal-table-excel 表格对话框（Handsontable / view-table-excel）
   */
  export default {
    mixins: [mixinPage],
    components: {},
    emits: ['after-init', 'on-close', 'on-change', 'on-load-data'],
    data() {
      return {
        opened: false,
        isFullscreen: false,
        tableView: {},
        param: {}
      };
    },
    props: {
      viewCode: {
        type: String
      },
      readonly: {
        type: Boolean,
        default: false
      },
      parentData: {
        type: Object,
        default() {
          return {};
        }
      },
      footerEnable: {
        type: Boolean,
        default: false
      },
      maskClosable: {
        type: Boolean,
        default: null
      },
      draggable: {
        type: Boolean,
        default: null
      },
      settingEnable: {
        type: Boolean,
        default: true
      },
      height: {
        type: Number,
        default: null
      },
      beforeClose: {
        type: Function
      }
    },
    computed: {
      data() {
        return this.$refs.table?.data;
      },
      table() {
        return this.$refs.table;
      },
      screenWidth() {
        return document.body.clientWidth * 0.8;
      },
      modalWidth() {
        return this.tableView.width || this.screenWidth;
      },
      mergedParentData() {
        return { ...this.parentData, ...this.param };
      }
    },
    methods: {
      async init(viewCode, callback, onFail) {
        await this.$refs.table.init(viewCode, callback, onFail);
        this.tableView = this.$refs.table.tableView || {};
      },
      open(param) {
        setTimeout(() => {
          this.param = param || {};
          if (this.$refs.table) {
            this.$refs.table.loadData();
          }
          this.opened = true;
        });
      },
      async close() {
        this.opened = false;
      },
      validate() {
        return this.$refs.table.validate();
      },
      loadData(staticData) {
        this.$refs.table.loadData(staticData);
      },
      getData() {
        return this.$refs.table.getData();
      },
      getDefaultData() {
        return this.$refs.table.getDefaultData();
      },
      clear() {
        this.$refs.table.clear();
      },
      resetFilter() {},
      onVisibleChange(show) {
        if (!show) {
          this.$refs.table?.loadData?.([]);
          this.$emit('on-close');
        }
      },
      onLoadData() {
        this.$emit('on-load-data');
      },
      afterInit() {
        this.tableView = this.$refs.table?.tableView || {};
        this.$emit('after-init');
      },
      clickClose() {
        if (typeof this.beforeClose == 'function') {
          this.beforeClose().then(
            () => {
              this.close();
            },
            () => {}
          );
        } else {
          this.close();
        }
      },
      getNameI18n(tableView) {
        if (!tableView || !tableView.code) {
          return '';
        }
        if (this.layout.showI18n) {
          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 (!tableView || !tableView.code) {
          return '';
        }
        if (this.layout.showI18n) {
          let key = 'DataView_' + tableView.code + '_$Desc';
          let text = this.$t(key);
          if (text == key) {
            return tableView.description || '';
          } else {
            return text;
          }
        } else {
          return tableView.description || '';
        }
      },
      setFullscreen(isFullscreen) {
        if (this.$refs.table) {
          this.$refs.table.isMaxHight = isFullscreen;
        }
        this.isFullscreen = isFullscreen;
      },
      onChange(data, sender, selected) {
        this.$emit('on-change', data, sender, selected);
      }
    }
  };
</script>
