<template>
  <div class="bgColor" @click="close" v-if="modelValue">
    <div class="body" @click.stop>
      <div class="header">
        <div class="text">详情查看</div>
        <div class="delete">
          <el-button
            style="margin-right: 10px"
            type="primary"
            size="small"
            class="btn"
            v-print="'#print'"
            >打印</el-button
          >
          <span style="padding: 20px; cursor: pointer" @click="close">X</span>
        </div>
      </div>
      <div class="box">
        <el-scrollbar>
          <div id="print">
            <div class="tableInfo">
              <div class="info">
                <div class="text" style="margin-left: 20px">表号：J05-018B</div>
              </div>
              <div class="title" style="text-align: center">返工记录卡</div>
              <div class="title-remark" style="text-align: center">
                (随工单附表，代替随工单上的返工)
              </div>
              <div class="title-head">
                <div class="head-term" style="margin-left: 20px; width: 240px">
                  产品名称: {{ tableData.materialName }}
                </div>
                <div class="head-term" style="width: 110px">
                  数量: {{ tableData.num }}
                </div>
                <div class="head-term" style="width: 180px">
                  返工提出者: {{ tableData.creator }}
                </div>
                <div class="head-term" style="width: 150px">
                  日期: {{ tableData.dateCreate }}
                </div>
              </div>
              <table style="border-collapse: collapse; border-bottom: 0">
                <tbody>
                <tr>
                  <td class="detail-title" rowspan="2">需返工内容</td>
                  <td class="title-one-height title-one-width title-size">
                    管号
                  </td>
                  <td class="title-one-height title-one-width title-size">
                    生产批号
                  </td>
                  <td class="title-one-height title-size" style="width: 265px">
                    具体返工内容
                  </td>
                  <td class="title-one-height title-size">返工原因</td>
                </tr>
                <tr style="border-bottom: 0">
                  <td class="title-size">{{ tableData.seqNos }}</td>
                  <td class="title-size">{{ tableData.workOrderCode }}</td>
                  <td class="title-size">
                    {{ tableData.remark }}
                  </td>
                  <td class="title-size">
                    {{ tableData.reason }}
                  </td>
                </tr>
                </tbody>
              </table>
              <table>
                <tbody>
                <tr>
                  <td
                    class="detail-title"
                    :rowspan="tableData.itemList.length + 1"
                  >
                    各工序返工情况
                  </td>
                  <td class="title-one-height title-one-width title-size">
                    工序
                  </td>
                  <td class="title-one-height title-size" style="width: 191px">
                    主要工艺条件
                  </td>
                  <td class="title-one-height title-size" style="width: 58px">
                    接收数
                  </td>
                  <td class="title-one-height title-size" style="width: 58px">
                    合格数
                  </td>
                  <td class="title-one-height title-size" style="width: 58px">
                    合格率
                  </td>
                  <td class="title-one-height title-size">操作者</td>
                  <td class="title-one-height title-size">日期</td>
                  <td class="title-one-height title-size">检验人</td>
                </tr>
                <tr v-for="item in tableData.itemList">
                  <td class="title-size">{{ item.operationName }}</td>
                  <td class="title-size">{{ item.processAsk }}</td>
                  <td class="title-size">{{ item.num }}</td>
                  <td class="title-size">{{ item.qualifiedNum }}</td>
                  <td class="title-size">{{ item.qualifiedRate }}</td>
                  <td class="title-size">{{ item.operateName }}</td>
                  <td class="title-size">{{ item.operateDate }}</td>
                  <td class="title-size" v-if="!item.signatureUrl">{{ item.checkName }}</td>
                  <td class="title-size" v-if="item.signatureUrl" ><img :src="item.signatureUrl" style="height: 30px"></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [Boolean],
  },
  tableData: {
    type: [Object],
  },
});
const emits = defineEmits(["update:modelValue"]);
const close = () => {
  emits("update:modelValue", false);
};
const setBoxValue = () => {
  const checkboxes1 = document.getElementsByName("options1");
  const checkboxes2 = document.getElementsByName("options2");
};
watch(
  () => props.tableData,
  () => {
    nextTick(() => {
      setBoxValue();
    });
  }
);
</script>

<style lang="scss" scoped>
#checkboxForm1 {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}
#checkboxForm2 {
  display: flex;
  label {
    margin-right: 20px;
  }
}
.title-size {
  font-size: 13px;
  text-align: center;
}
.title-one-width {
  width: 100px;
}
@media print {
  #print {
    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
    top: 20px; /* 调整顶部位置 */
    margin: 0; /* 重置边距 */
    width: 700px;
  }
}
table {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框 */
  table-layout: fixed;
}
th,
td {
  border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
  padding: 8px;
  text-align: left;
  word-wrap: break-word;
}
th {
  background-color: #f2f2f2; /* 设置表头的背景颜色 */
}
.title-one-height {
  height: 20px;
}
.detail-title {
  font-size: 13px;
  width: 30px;
}
.sale-box {
  .sale-title {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: start;
  }
  .sale-content {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: start;
    padding: 0 8px;
  }
  .sale-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .desc {
    margin-right: 20px;
  }
}
.bgColor {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  .body {
    width: 800px;
    height: 85vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    .header {
      width: 100%;
      height: 40px;
      display: flex;
      padding-bottom: 10px;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    .box {
      height: calc(100% - 40px);
    }
  }
}
.tableInfo {
  width: 100%;
  height: 60px;

  .title {
    margin: 10px 0 0;
    font-size: 28px;
    font-weight: 600;
  }
  .title-remark {
    margin: 0 0 20px;
    font-size: 12px;
  }
  .head-term {
    float: left;
  }
  .info {
    display: flex;
    justify-content: space-between;
  }
}
</style>
