<template>
  <el-dialog title="下载桌码" width="400px" v-model="dialogVisible" @open="reset">
    <el-form ref="form" :model="form" label-position="left">
      <el-form-item label="下载数量">
        <el-input-number v-model="form.number" :min="1" :max="500"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">下 载</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { downloadFile } from "@/utils/index";
import TableApi from "@/api/account/table";
import { ElMessage } from "element-plus";
export default {
  props: {
    total: {
      type: [Number, String],
      default: 1,
    },
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        number: 1,
      },
      resetForm: "",
    };
  },
  mounted() {
    this.resetForm = { ...this.form };
  },
  methods: {
    async onSubmitHandle() {
      try {
        this.loading = true;
        const file = await TableApi.downloadTableCode(this.form.number);
        console.log(file);
        this.loading = false;
        this.dialogVisible = false;
        ElMessage.success("下载成功");
        downloadFile(file, "桌码", "zip");
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    show(obj) {
      this.dialogVisible = true;
      // if (obj && obj.id) {
      //     this.form = JSON.parse(JSON.stringify(obj))
      // }
    },
    close() {
      this.dialogVisible = false;
    },
    reset() {
      this.form = { ...this.resetForm };
    },
  },
};
</script>