<template>
  <el-dialog
    v-dialogDrag
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="cancel"
    :title="dialogTitle"
    :visible.sync="dialogShowFlag"
    append-to-body
    width="800px"
  >
    <div id="printcontent" style="height: 500px;overflow-y: scroll;padding: 0 20px;">
      <vue-easy-print tableShow ref="printRef">
        <div class="order_box">
          <div class="order_box_one">
            <div>
              <span>工程名称：</span><span>{{ rowObj.lotName }}</span>
            </div>
            <div>
              <span>退料时间：</span><span>{{ rowObj.backTime }}</span>
            </div>
          </div>
          <div class="order_box_one">
            <div>
              <span>退料单位：</span><span>{{ rowObj.unitName }}</span>
            </div>
            <div>
              <span>编号：</span><span>{{ rowObj.code }}</span>
            </div>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;padding: 2px;">
          <el-table-column label="编号" align="center" type="index" />
          <el-table-column
            label="类型名称"
            align="center"
            prop="typeName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="规格型号"
            align="center"
            prop="typeCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="退料数量"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            prop="num"
          >
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" align="center">
            <template slot-scope="scope">
              <span
                @click="remarksClick"
                style="color: #1890ff; cursor: pointer"
                >{{ scope.row.remarks }}</span
              >
            </template>
          </el-table-column> -->
        </el-table>
        <div class="order_footer">
          <div>审核：</div>
          <div>退料：</div>
          <div>操作人：</div>
        </div>
      </vue-easy-print>
      <div>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div style="height: 500px;overflow-y: scroll;padding: 0 20px;">
      <vue-easy-print tableShow ref="remarksPrintRef">
        <div class="remarks_box">
          <div class="remarks_box_title">退料编码明细</div>
        </div>
        <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;padding: 2px;">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column prop="name" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="type" label="规格型号" align="center">
          </el-table-column>
          <el-table-column prop="unit" label="单位" align="center">
          </el-table-column>
          <el-table-column prop="number" label="数量" align="center">
          </el-table-column>
        </el-table>
      </vue-easy-print>
      </div>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="remarksPrint">打印</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import vueEasyPrint from 'vue-easy-print';
import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
export default {
  components: { vueEasyPrint, },
  props: {
    // 弹窗是否显示
    isShowFlag: {
      type: Boolean,
      default: false
    },
    // 对应操作数据键值
    priKey: {
      type: [String, Number],
      default: ""
    },
    //弹窗标题
    dialogTitle: {
      type: String,
      default: ""
    },
    rowObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isShowFlag(val) {
      if (val) {
        this.init();
      }
    }
  },
  computed: {
    dialogShowFlag: {
      get() {
        return this.isShowFlag;
      },
      set(v) {
        this.$emit("update:isShowFlag", v);
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      tableData: [],
      open: false,
      title: ""
    };
  },
  methods: {
    init() {
      let params = {
        id: this.rowObj.id,
        agreementId: this.rowObj.agreementId,
        viewWeb:1,
      }
      getViewByApply(params).then(res => {
        this.tableData = res.data
      })
    },
    // 取消按钮
    cancel() {
      this.dialogShowFlag = false;
    },
    print() {
      this.$refs.printRef.print();
    },
    remarksClick() {
      this.title = '查看'
      this.open = true
    },
    remarksPrint() {
      this.$refs.remarksPrintRef.print();
    }

    // submit() {
    //   this.$refs["dynamicValidateForm"].validate(valid => {
    //     console.log("valid", valid);
    //     if (valid) {
    //       console.log("11111");
    //       this.cancel();
    //     } else {
    //       return false;
    //     }
    //   });
    // }
  }
};
</script>
<style lang="scss" scoped>
.order_box {
  display: flex;
  flex-direction: column;
  .order_box_one {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 10px;
    :last-child {
      margin-right: 20px;
    }
  }
}
.order_footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.remarks_box {
  display: flex;
  // align-items: center;
  justify-content: center;
  .remarks_box_title {
    margin-bottom: 10px;

    font-size: 18px;
  }
}
</style>
