<template>
  <div class="wrap-print" id="printData">
    <div class="time">
      {{ getTime() }}
    </div>
    <div class="print-hed">
      <div style="width: 50%; text-align: center">送货单</div>
      <div class="qrCode">
        <div>
          <vue-qr
            ref="qrCode"
            :text="form.id"
            :logoSrc="logoSrc"
            :color-dark="randomColor"
            :callback="qrCodeCallback"
            width="100"
            height="100"
          ></vue-qr>
        </div>
        <div>
          <vue-barcode
            :value="form.id"
            :margin="0.5"
            :width="1.6"
            :height="35"
            :fontSize="12"
            :textAlign="center"
            :displayValue="true"
            :text="form.id"
          ></vue-barcode>
        </div>
      </div>
    </div>
    <div class="header-print">
      <div class="item-print" v-if="form.delvOrdId">
        <div class="print-label">出库单号：</div>
        <div class="print-value">{{ form.delvOrdId }}</div>
      </div>
      <div class="item-print">
        <div class="print-label">客户名称：</div>
        <div class="print-value">{{ form.branchName }}</div>
      </div>
      <div class="item-print">
        <div class="print-label">金额：</div>
        <div class="print-value">{{ form.purcAmt }}</div>
      </div>
      <div class="item-print">
        <div class="print-label">来源部门：</div>
        <div class="print-value">{{ form.deptName }}</div>
      </div>
      <div class="item-print">
        <div class="print-label">采购总数：</div>
        <div class="print-value">{{ form.qtySum }}</div>
      </div>
      <div class="item-print" v-if="form.delvOrdId">
        <div class="print-label">出库人：</div>
        <div class="print-value">{{ form.docmker }}</div>
      </div>
      <div class="item-print" v-if="form.delvOrdId">
        <div class="print-label">出库时间：</div>
        <div class="print-value">{{ form.docmkDate }}</div>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      cell-class-name="cell-class-name"
      element-loading-text="加载中..."
      border
      fit
    >
      <template slot="empty">
        <img src="" alt />
        <p>暂无数据</p>
      </template>
      <el-table-column
        fixed="left"
        align="center"
        type="index"
        label="序号"
        width="50"
      />
      <el-table-column label="耗材信息" width="300">
        <template slot-scope="scope">
          <mcs-info :info="scope.row"></mcs-info>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="spec" />
      <el-table-column label="型号" prop="mol" />
      <el-table-column label="材质" prop="matl" />
      <!-- <el-table-column label="是否集采" prop="isFas">
        <template #default="{ row }">
          <span v-if="row.isFas == '0'">否</span>
          <span v-if="row.isFas == '1'">是</span>
        </template>
      </el-table-column> -->
      <el-table-column label="包装" prop="convrat" width="120px">
        <template #default="{ row }">
          <span
            >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
              row.purcUnt
            }})</span
          >
        </template>
      </el-table-column>
      <el-table-column label="批号" prop="lotNum" width="120"></el-table-column>
      <el-table-column label="生产日期" prop="manuDate" width="100" />
      <el-table-column label="有效期至" width="100" prop="prodExpy" />
      <el-table-column label="需求数量" prop="purcCnt" />
      <el-table-column
        label="已出库数量"
        prop="delvCntYck"
        width="90px"
        v-if="!form.delvOrdId"
      />
      <el-table-column label="剩余出库量" prop="toDelvCnt" width="90px">
        <template #default="{ row }">
          <span v-if="form.quit == 'outbound'">
            {{ Number(row.toDelvCnt) - Number(row.delvCnt) }}
          </span>
          <span v-else>
            {{ row.toDelvCnt }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="本次出库数量" prop="delvCnt" width="120" />
    </el-table>
    <div class="autograph">
      <div class="grap">送货人（签名）:</div>
      <div class="grap">收货人（签名）:</div>
    </div>
    <div class="remarks">备注 :</div>
    <div style="page-break-after: always"></div>
  </div>
</template>
<script>
import VueQr from "vue-qr";
import vueBarcode from "vue-barcode";
import mcsInfo from "@/views/components/mcs-info.vue";
import moment from "moment";
export default {
  name: "printView",
  components: {
    VueQr,
    vueBarcode,
    mcsInfo
  },
  props: {
    orderData: {
      type: Array,
      default: []
    },
    form: {
      type: Object,
      default: ""
    }
  },
  data() {
    return {
      form: {},
      tableData: [],
      text: "111111哈哈哈哈哈哈",
      logoSrc: "",
      randomColor: "black",
      qrCodeUrl: "" // 存放生成的二维码url
    };
  },
  created() {},
  mounted() {
    let { form, data } = this.$route.query;
    let listForm = JSON.parse(form);
    console.log(listForm.quit, "哈哈哈");
    this.tableData = this.orderData;
  },
  methods: {
    //获取当前时间
    getTime() {
      return moment().format("YYYY-MM-DD HH:mm:ss");
    }
  },
  watch: {
    orderData(newdata) {
      this.tableData = newdata;
    }
  }
};
</script>
<style scoped lang="scss">
.wrap-print {
  padding: 5px;
  width: 100%;
  .title-print {
    width: 100%;
    height: 30px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .print-hed {
    width: 100%;
    height: 100px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
    .qrCode {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .header-print {
    width: 100%;
    height: 100px;
    padding: 2px 0px;
    display: flex;
    flex-wrap: wrap;
    .item-print {
      width: 33.3%;
      height: 10px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      .print-label {
        font-weight: bold;
      }
    }
  }
  .autograph {
    width: 100%;
    height: 30px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .grap {
      font-weight: bold;
    }
  }
  .remarks {
    width: 100%;
    height: 30px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  .time {
    width: 100%;
    height: 20px;
  }
  ::v-deep .el-table__cell {
    border: none;
    border-right: 1px solid #000;
    font-weight: bold;
  }
  ::v-deep .el-table {
    border: 1px solid #000;
    margin-top: 20px;
  }
}
</style>
