<template>
    <div>
      <el-dialog title="报表打印" :visible.sync="visible" width="40%" v-dialogDrag :close-on-click-modal="false"
        :before-close="cancel">
        <div class="dia-box">
          <el-table :data="tableData" border max-height="350px">
            <el-table-column label="报表名称" prop="entity_name" align="left">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="18" :offset="2">
                    <el-radio :label="scope.row.templatePath" v-model="radioType" @change="handleRadio">
                      {{scope.row.reportName}}</el-radio>
                  </el-col>
                  <el-col :span="4">
                    <el-button @click.stop="handleDelete(scope.row)" size="mini" type="warning">删除</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:right;margin:15px 0 20px;">
            <el-button type="primary" size="mini" @click="submit">
              报表打印
            </el-button>
            <el-button size="mini" @click="cancel">关闭</el-button>
          </div>
        </div>
      </el-dialog>
      <dia-preview :visible="diaPreview1" :pdfUrl="pdfUrl" @cancel="cancelPreview" />
    </div>
  </template>
  
  <script>
  import { message } from "@/utils/common";
  import {
    generateReport,
    showPdf,
    deleteReportMatching,
  } from "@/api/reportTemplate";
  import diaPreview from "./diaPreview.vue";
  export default {
    props: {
      visible: {
        type: Boolean,
        default: () => false,
      },
      model:{ // 未入库1，已入库2，其他3
        type:String,
        default:()=>"1"
      }
    },
    components: {
      diaPreview,
    },
    data() {
      return {
        tableData: [],
        radioType: "",
        rname: {},
        treeRow: {},
        tableRow: {},
        fileType: null,
        multipleSelection: [],
        ids: [],
        diaPreview1: false,
        pdfUrl: undefined,
      };
    },
    methods: {
      cancel() {
        this.$emit("cancel");
      },
      submit() {
        if (!this.radioType) {
          message("warning", "请选择报表类型", 2000);
          return false;
        }
        this.pdfUrl = undefined;
        let data = {
          classId: this.treeRow.id,
          // companyId: this.rname.id,
          fileType: this.fileType,
          ids: this.ids.join(","),
          model: this.model,
          tableName: this.tableRow.tableName,
          templatePath: this.radioType,
        };
        generateReport(data).then((res) => {
          if (res.code === "100") {
            // message("success", "生成成功", 2000);
            let data = {
              templatePath: res.body.path,
              token: sessionStorage.getItem("token"),
            };
  
            console.log('data',data)
            showPdf(data).then((res) => {
              let arr = [];
              arr.push(res);
              this.pdfUrl = window.URL.createObjectURL(
                new Blob(arr, { type: "application/pdf" })
              );
              this.diaPreview1 = true;
            });
          }
        });
      },
      handleDelete(row) {
        let data = {
          classId: this.treeRow.id,
          fileType: this.fileType,
          templatePath: row.templatePath,
        };
        let _this = this;
        this.$confirm("确认删除吗?, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteReportMatching(data).then((res) => {
              if (res.code === "100") {
                message("success", "删除成功", 3000);
                _this.$emit("reset", this.fileType, this.rname, this.treeRow);
              }
            });
          })
          .catch(() => {});
      },
      handleRadio(val) {
        this.radioType = val;
      },
      cancelPreview() {
        this.diaPreview1 = false;
      },
    },
  };
  </script>
  
  <style lang='scss' scoped>
  ::v-deep .el-button--warning {
    color: #ffffff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }
  </style>
  