<template>
  <el-button v-debounce:click="printClick">打印</el-button>
  <div ref="toPrintRef">
    <!--    测试-->
    <div class="flex">
      <img src="@/assets/logo.png" alt="" />
      <div class="content"></div>
    </div>

    <div class="title">不合格品审理单</div>

    <div class="header">
      <div>编号:</div>
      <img
        class="qrcode"
        src="data:image/png;base64,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"
      />
      <div class="rightTitle">归档编号:</div>
    </div>

    <el-table
      border
      :data="tableData"
      table-layout="auto"
      :show-header="false"
      :row-class-name="tableRowClassName"
    >
      <el-table-column fixed prop="date" label="Date">
        <template #default="scope">
          <EditableColumn v-model="scope.row.date" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="state" label="State" />
      <el-table-column prop="city" label="City" />
      <el-table-column prop="address" label="Address" />
      <el-table-column prop="zip" label="Zip" />
    </el-table>
    <div class="bottomBox">
      <div class="desc">特征和程度:</div>
      <EditableColumn style="height: 50px; width: 100%" v-model="chengdu" />

      <div class="bl">是否首检:</div>
      <div class="br">检验员：（盖章）:</div>
    </div>
  </div>
</template>
<script setup>
import { html2CanvasPrint } from "@/utils/common";

// 1.定义ref
const toPrintRef = ref(null);

// 2.调用方法传入ref
const printClick = () => {
  // console.log(tableData.value);
  console.log(chengdu.value);
  // html2CanvasPrint(toPrintRef.value);
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "warning-row";
  }
  return "";
};

const chengdu = ref("");

const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
]);
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-border-color-hover);
}

.title {
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.qrcode {
  width: 100px;
  height: 100px;
  display: inline-block;
}
.header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  text-align: left;
  height: 100px;
  align-items: end;
  margin-bottom: 15px;
  .rightTitle {
    margin-right: 200px;
  }
}

.content {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

.bottomBox {
  height: 120px;
  border: 1px solid var(--el-border-color);
  border-top: 0;
  background: white;
  position: relative;
  padding: 5px;
  width: 100%;
  font-size: 14px;
  .desc {
    font-size: 14px;
  }
  .bl {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }
  .br {
    position: absolute;
    bottom: 5px;
    right: 150px;
  }
}
</style>
