<template>
  <div class="page">
    <div class="heard">
      <el-form ref="headerForm" :inline="true" :model="search" size="mini" label-width="100px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="模板名称:">
              <el-input v-model="search.templateName" placeholder="请输入模板名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <div style="display:flex">
              <div style="margin-right:10px">
                <el-button type="primary" size="mini" icon="el-icon-search" @click="searchFul">查询
                </el-button>
              </div>
              <div style="margin-right:10px">
                <el-upload action="#" class="upload-box" ref="upload" multiple accept=".xls,.xlsx,.csv"
                  :http-request="httpRequest">
                  <el-button size="mini" type="success" icon="el-icon-upload">导入Excel</el-button>
                </el-upload>
              </div>
              <div style="margin-right:10px">
                <el-button size="mini" type="warning" icon="el-icon-delete" @click="batchDelete">删除</el-button>
              </div>
            </div>
          </el-col>
          <el-button type="primary" size="mini" icon="el-icon-bottom" @click="handelShowPdf">
            案卷文件目录模板.xls
          </el-button>
        </el-row>
      </el-form>
    </div>
    <Table ref="Table" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
      :tableData="tableData" :pagination="pagination" />
    <!-- pdf展示 -->
    <el-dialog title="报表样例预览" top="10px" :visible.sync="visible" width="80%" v-dialogDrag :close-on-click-modal="false"
      :before-close="cancel">
      <div class="dia-box">
        <iframe style="text-alin:center" noresize align=center width="100%" :height="height" :src="pdfUrl"
          frameborder="0" scrolling="no"></iframe>
        <div style="text-align:right;margin:15px 0 20px;">
          <el-button size="mini" @click="cancel">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Table from "./components/table.vue";
import { URL_PREFIX } from "@/utils/url-prefix";
import { getReportTemplate } from "@/api/reportTemplate";
import { message } from "@/utils/common";
import { mapState } from "vuex";
export default {
  data() {
    return {
      search: {
        templateName: "",
      },
      tableData: [],
      pagination: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      visible: false,
      pdfUrl: undefined,
      height: window.innerHeight - 100,
    };
  },
  components: { Table },
  methods: {
    handelShowPdf() {
      // this.visible = true;
      let str = URL_PREFIX + "/point-strategy/template/案卷封面模板.xls";
      window.open(str);
    },
    cancel() {
      this.visible = false;
      this.pdfUrl = undefined;
    },
    searchFul() {
      let data = {
        templateName: this.search.templateName,
        page: this.pagination.pageNum,
        limit: this.pagination.pageSize,
      };
      getReportTemplate(data).then((res) => {
        if (res.code === "100") {
          let { body } = res;
          this.tableData = body.list;
          this.pagination.total = body.total;
        }
      });
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.searchFul();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.searchFul();
    },
    httpRequest(param) {
      let formData = new FormData();
      formData.append("file", param.file);
      this.$axios
        .post(
          URL_PREFIX + "/point-strategy/v/reportTemplate/batchUploadExcel",
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
              "Token": sessionStorage.getItem("token"),
            },
          }
        )
        .then((response) => {
          const res = response.data;
          if (res.code === "100") {
            this.searchFul();
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch((error) => {
          // this.$message.error("上传失败！");
          console.log(error);
        });
    },
    batchDelete() {
      this.$refs.Table.batchDelete();
    },
  },
  mounted() {
    this.searchFul();
  },
};
</script>
<style lang='scss' scoped>
.page {
  padding: 5px;
  height: 100%;
  background: #ebebeb;
  .heard {
    width: 100%;
    background-color: #fff;
    padding: 10px 10px 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-bottom: 10px;
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
      }
      .btn {
        margin-left: 10px;
      }
    }
    .el-row {
      height: 38px;
    }
    ::v-deep .el-upload-list {
      margin: 0;
      padding: 0;
      display: none !important;
    }
    ::v-deep .el-button .el-button--warning .el-button--mini {
      color: #ffffff;
      background-color: #e6a23c;
      border-color: #e6a23c;
    }
    ::v-deep .el-button--warning {
      color: #ffffff;
      background-color: #e6a23c;
      border-color: #e6a23c;
    }
  }
}
</style>
