<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="open"
    width="500px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >
    <el-form ref="ruleForm" size="small" label-width="88px">
      <el-form-item label="标签" prop="reportId">
        <el-select v-model="form.reportId">
          <el-option
            v-for="item in reportList"
            :key="item.reportId"
            :label="item.reportName"
            :value="item.reportId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="ensureLoading" @click="handlePrint"
        >打印</el-button
      >
    </div>
    <!-- 标签打印 -->
    <IssuePrinit ref="issuePrint" />
  </el-dialog>
</template>

<script>
// import IssuePrint from './IssuePrint.vue'
import IssuePrinit from "../salesIssueDetails/IssuePrinit.vue";
const AccessTokenKey = "ACCESS_TOKEN";

export default {
  name: "ReportPrintSelect",
  components: {
    IssuePrinit,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      orderDisabled: false,
      // 显示搜索条件
      showSearch: true,
      ensureLoading: false,
      // 总条数
      total: 0,
      // WMS 品质管理-检验项管理列表
      list: [],
      currentRows: [],
      // 弹出层标题
      title: "",
      tokens: "",
      baseUrl: "",
      reportId: "",
      // 是否显示弹出层
      open: false,
      // 报表列表
      reportList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        materialNo: null,
        workOrderNo: null,
        materialName: null,
        masterId: null,
      },
      //
      modifyParams: {},
      // 表单参数
      form: {
        headId: null,
      },
      isLoading: false,
      // 表单校验
      rules: {
        reportId: [
          { required: true, message: "报表不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.reportList = this.$route.meta.reportList;
    console.log(this.reportList);
    this.tokens = localStorage.getItem(AccessTokenKey);
    // this.reportId = this.$route.meta.reportId[0]
    this.baseUrl = process.env.VUE_APP_REPORT_API;
    this.reportId = this.$route.meta.reportId;
  },
  methods: {
    /** 查询列表 */
    getList() {},
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        inspectionNo: undefined,
        inspectionName: undefined,
        inspectionModel: undefined,
        inspectionType: undefined,
        minValue: undefined,
        standValue: undefined,
        maxValue: undefined,
        code: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
      if (this.queryParams.materialNo !== null) {
        this.orderDisabled = true;
      } else {
        this.orderDisabled = false;
      }
    },
    dialogOpen() {
      this.$nextTick(() => {
        this.getList();
      });
    },

    dialogClose() {
      const { queryParams } = this;
      queryParams.pageNo = 1;
      queryParams.pageSize = 10;
      this.form.reportId = undefined;
      this.getList();
    },
    getOnlyRowKey(row) {
      return row.id;
    },
    // 打印
    handlePrint() {
      if (this.form.reportId === undefined || this.form.reportId === null) {
        this.$modal.msgWarning("请先选择你要打印的报表!");
        return;
      }
      const userId = this.$store.getters.userId;
      console.log(userId);
      this.open = false;
      this.reportId = this.form.reportId;
      const src = `${this.baseUrl}/jmreport/view/${this.reportId}?token=${this.tokens}&saleOutNo=${this.$route.query.saleOutNo}&userId=${userId}`;
      this.$refs.issuePrint.dialogVisible = true;
      this.$refs.issuePrint.src = src;
      this.$refs.issuePrint.title = "单据打印";
    },
  },
};
</script>
