<template>
  <el-dialog
    :visible.sync="showDialog"
    :fullscreen="true"
    @close="close"
    :appendToBody="true"
    :modalAppendToBody="true"
    :closeOnClickModal="false"
    :modal="false"
    :title="options.title || 'excel'"
    custom-class="dialog-style list-dialog dialog-checkbox pd_0"
  >
    <div class="cont" id="containt" :class="{ nfootBtn: options.readonly }">
      <luckysheet
        ref="luckysheet"
        :data="json"
        v-if="showLuckysheet"
        :options="options"
      ></luckysheet>
    </div>
    <span slot="footer" class="dialog-footer" v-if="!options.readonly">
      <el-button type="primary" plain class="button-sty" @click="close">
        <i class="el-icon-close el-icon"></i>
        {{ $t2("取 消", "system.button.cancel2") }}
      </el-button>
      <el-button type="primary" @click="dialogSubmit" class="button-sty">
        <i class="el-icon-check el-icon"></i>
        {{ $t2("确 定", "system.button.confirm2") }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import luckysheet from "./view.vue";
import { fileToBase64, base64ToFile } from "./fileUtils.js";
import { saveAs } from "file-saver";

export default {
  name: "luckysheetDialog",
  components: { luckysheet },
  props: {
    visiable: Boolean,
    options: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {},
  data() {
    return {
      showDialog: true,
      json: [],
      showLuckysheet: false,
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.options.data) {
        try {
          let data = JSON.parse(this.options.data);
          if (Array.isArray(data)) {
            this.json = data;
          } else {
            this.json = [];
          }
        } catch (error) {
          this.json = [];
          console.error(error);
        }
      }
      this.$nextTick(() => {
        this.showLuckysheet = true;
      });
    },
    close() {
      this.$refs.luckysheet.exitEditMode();
      this.showDialog = false;
      this.$emit("update:visiable", false);
    },
    dialogSubmit() {
      let luckysheetRef = this.$refs.luckysheet;
      let value = luckysheetRef.getValue();
      luckysheetRef.generateExcelFile((file) => {
        fileToBase64(file)
          .then((base64) => {
            let response = {
              data: JSON.stringify(value),
              json: value,
              file: file,
              base64: base64,
              // convertedFile: convertedFile  // 添加转换后的file对象
            };
            let onConfirm = this.options.onConfirm;
            if (onConfirm && typeof onConfirm === "function") {
              let result = onConfirm(response, this.close);
              if (result !== false) {
                this.close();
              }
            } else {
              this.close();
            }
          })
          .catch((error) => {
            console.error("文件转换失败:", error);
            this.$message.error("文件处理失败");
          });
      });
    },
    /**
     * 保留原有的fileToBase64Async方法以保持向后兼容
     */
    fileToBase64Async(file) {
      return fileToBase64(file);
    }
  },
};
</script>

<style lang="scss" scoped>
.list-dialog {
  .el-dialog__body {
    height: calc(100% - 42px);
    .cont {
      height: calc(100vh - 210px);

      &.nfootBtn {
        height: calc(100vh - 158px);
      }
      &#containt {
        padding: 0;
        ::v-deep .grid-container {
          outline: none;
          &.detail-wrap .d-cont {
            height: calc(100vh - 150px);
            .title .field-wrapper {
              display: inline-block !important;
            }
          }
        }
      }
    }
  }

  &.is-fullscreen .el-dialog__body {
    .cont {
      height: calc(100vh - 110px);

      &.nfootBtn {
        height: calc(100vh - 58px);
      }
    }
  }
}
</style>
