"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../../ui/src/comp.js");
require("../../../ui/index.js");
const XEUtils = require("xe-utils");
const utils = require("../../../ui/src/utils.js");
const log = require("../../../ui/src/log.js");
const index_esm = require("../../../../../@vxe-ui/core/es/index.esm.js");
const { getI18n, getIcon, renderEmptyElement } = index_esm.VxeUI;
const TableImportPanelComponent = comp.defineVxeComponent({
  name: "VxeTableImportPanel",
  props: {
    defaultOptions: Object,
    storeData: Object
  },
  setup(props) {
    const VxeUIModalComponent = index_esm.VxeUI.getComponent("VxeModal");
    const VxeUIButtonComponent = index_esm.VxeUI.getComponent("VxeButton");
    const VxeUISelectComponent = index_esm.VxeUI.getComponent("VxeSelect");
    const $xeTable = vue.inject("$xeTable", {});
    const { computeImportOpts } = $xeTable.getComputeMaps();
    const reactData = vue.reactive({
      loading: false
    });
    const refFileBtn = vue.ref();
    const computeSelectName = vue.computed(() => {
      const { storeData } = props;
      return `${storeData.filename}.${storeData.type}`;
    });
    const computeHasFile = vue.computed(() => {
      const { storeData } = props;
      return storeData.file && storeData.type;
    });
    const computeParseTypeLabel = vue.computed(() => {
      const { storeData } = props;
      const { type, typeList } = storeData;
      if (type) {
        const selectItem = XEUtils.find(typeList, (item) => type === item.value);
        return selectItem ? selectItem.label : "*.*";
      }
      return `*.${typeList.map((item) => item.value).join(", *.")}`;
    });
    const clearFileEvent = () => {
      const { storeData } = props;
      Object.assign(storeData, {
        filename: "",
        sheetName: "",
        type: ""
      });
    };
    const selectFileEvent = () => {
      const { storeData, defaultOptions } = props;
      $xeTable.readFile(defaultOptions).then((params) => {
        const { file } = params;
        Object.assign(storeData, utils.parseFile(file), { file });
      }).catch((e) => e);
    };
    const showEvent = () => {
      vue.nextTick(() => {
        const targetElem = refFileBtn.value;
        if (targetElem) {
          targetElem.focus();
        }
      });
    };
    const cancelEvent = () => {
      const { storeData } = props;
      storeData.visible = false;
    };
    const importEvent = () => {
      const { storeData, defaultOptions } = props;
      const importOpts = computeImportOpts.value;
      reactData.loading = true;
      $xeTable.importByFile(storeData.file, Object.assign({}, importOpts, defaultOptions)).then(() => {
        reactData.loading = false;
        storeData.visible = false;
      }).catch(() => {
        reactData.loading = false;
      });
    };
    const renderVN = () => {
      const $xeGrid = $xeTable.xeGrid;
      const $xeGantt = $xeTable.xeGantt;
      const { defaultOptions, storeData } = props;
      const selectName = computeSelectName.value;
      const hasFile = computeHasFile.value;
      const parseTypeLabel = computeParseTypeLabel.value;
      const slots = defaultOptions.slots || {};
      const topSlot = slots.top;
      const bottomSlot = slots.bottom;
      const defaultSlot = slots.default;
      const footerSlot = slots.footer;
      return VxeUIModalComponent ? vue.h(VxeUIModalComponent, {
        id: "VXE_IMPORT_MODAL",
        modelValue: storeData.visible,
        title: getI18n("vxe.import.impTitle"),
        className: "vxe-table-export-popup-wrapper",
        width: 540,
        minWidth: 360,
        minHeight: 240,
        mask: true,
        lockView: true,
        showFooter: true,
        escClosable: true,
        maskClosable: true,
        showMaximize: true,
        resize: true,
        loading: reactData.loading,
        "onUpdate:modelValue"(value) {
          storeData.visible = value;
        },
        onShow: showEvent
      }, {
        default: () => {
          const params = {
            $table: $xeTable,
            $grid: $xeGrid,
            $gantt: $xeGantt,
            options: defaultOptions,
            params: defaultOptions.params
          };
          return vue.h("div", {
            class: "vxe-table-export--panel"
          }, [
            topSlot ? vue.h("div", {
              class: "vxe-table-export--panel-top"
            }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable),
            vue.h("div", {
              class: "vxe-table-export--panel-body"
            }, defaultSlot ? $xeTable.callSlot(defaultSlot, params) : [
              vue.h("table", {
                class: "vxe-table-export--panel-table",
                cellspacing: 0,
                cellpadding: 0,
                border: 0
              }, [
                vue.h("tbody", [
                  vue.h("tr", [
                    vue.h("td", getI18n("vxe.import.impFile")),
                    vue.h("td", [
                      hasFile ? vue.h("div", {
                        class: "vxe-table-export--selected--file",
                        title: selectName
                      }, [
                        vue.h("span", selectName),
                        vue.h("i", {
                          class: getIcon().INPUT_CLEAR,
                          onClick: clearFileEvent
                        })
                      ]) : vue.h("button", {
                        ref: refFileBtn,
                        class: "vxe-table-export--select--file",
                        onClick: selectFileEvent
                      }, getI18n("vxe.import.impSelect"))
                    ])
                  ]),
                  vue.h("tr", [
                    vue.h("td", getI18n("vxe.import.impType")),
                    vue.h("td", parseTypeLabel)
                  ]),
                  vue.h("tr", [
                    vue.h("td", getI18n("vxe.import.impMode")),
                    vue.h("td", [
                      VxeUISelectComponent ? vue.h(VxeUISelectComponent, {
                        modelValue: defaultOptions.mode,
                        options: storeData.modeList,
                        "onUpdate:modelValue"(value) {
                          defaultOptions.mode = value;
                        }
                      }) : renderEmptyElement($xeTable)
                    ])
                  ])
                ])
              ])
            ]),
            bottomSlot ? vue.h("div", {
              class: "vxe-table-export--panel-bottom"
            }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable)
          ]);
        },
        footer() {
          const params = {
            $table: $xeTable,
            $grid: $xeGrid,
            $gantt: $xeGantt,
            options: defaultOptions,
            params: defaultOptions.params
          };
          return vue.h("div", {
            class: "vxe-table-export--panel-footer"
          }, footerSlot ? $xeTable.callSlot(footerSlot, params) : [
            vue.h("div", {
              class: "vxe-table-export--panel-btns"
            }, [
              VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                content: getI18n("vxe.import.impCancel"),
                onClick: cancelEvent
              }) : renderEmptyElement($xeTable),
              VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                status: "primary",
                disabled: !hasFile || reactData.loading,
                content: getI18n("vxe.import.impConfirm"),
                onClick: importEvent
              }) : renderEmptyElement($xeTable)
            ])
          ]);
        }
      }) : renderEmptyElement($xeTable);
    };
    vue.nextTick(() => {
      if (!VxeUIModalComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-modal"]);
      }
      if (!VxeUIButtonComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-button"]);
      }
      if (!VxeUISelectComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-select"]);
      }
    });
    return renderVN;
  }
});
exports.default = TableImportPanelComponent;
