<template>
  <div>
    <div class="sale-header">不合格品(质量问题)分析评审处置表</div>
    <div class="sale-right">编号: {{ saleModel.formNo }}</div>
    <table border-collapse="collapse">
      <tr>
        <td>产品型号</td>
        <td>{{ saleModel.materialModel }}</td>
        <td>产品分类</td>
        <td>{{ saleModel.type }}</td>
        <td>生产批号</td>
        <td>{{ saleModel.workOrderCode }}</td>
      </tr>
      <tr>
        <td>产品编号</td>
        <td colspan="2" style="font-weight: normal; text-align: left">
          {{ saleModel.seqs }}
        </td>
        <td>数量</td>
        <td colspan="2" style="font-weight: normal">{{ saleModel.seqNum }}</td>
      </tr>
      <tr>
        <td>器件名称及型号</td>
        <td>{{ saleModel.componentName }}</td>
        <td>器件检验批号或器件生产批号</td>
        <td>{{ saleModel.checkProduceNo }}</td>
        <td>数量</td>
        <td>{{ saleModel.num }}</td>
      </tr>
      <tr>
        <td>供方单位</td>
        <td colspan="5" style="font-weight: normal; text-align: left">
          {{ saleModel.company }}
        </td>
      </tr>
      <tr>
        <td>审理级别</td>
        <td v-if="saleModel.level === '0'">▣ 一级 ▢ 二级</td>
        <td v-else>▢ 一级 ▣ 二级</td>
        <td>发生阶段</td>
        <td>{{ saleModel.stage }}</td>
        <td>发生时间</td>
        <td>{{ saleModel.happenTime }}</td>
      </tr>
      <tr v-for="(item, index) in contentArray" :key="index">
        <td colspan="6">
          <div class="sale-box">
            <div class="sale-title">{{ item.title }}</div>
            <div class="sale-content">
              {{ item.content }}
            </div>
            <div class="sale-bottom">
              <div class="desc" v-if="item.title.includes('不合格现象（质量问题）描述')">
                填表人:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="item.title.includes('不合格现象（质量问题）描述')">
                检验人员:{{ item[`user1`] }}
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求')">
                技术人员:{{ item[`user1`] }}
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求')">
                联系电话:{{ item[`phone`] }}
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求') && saleModel.auditType === '1'">
                责任部门:{{ item[`user2`] }}
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求') && saleModel.auditType === '2'">
                责任部门:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="item.title.includes('原因分析') && saleModel.auditType === '1' ">
                分析单位:{{ item[`company`] }}
              </div>
              <div class="desc" v-if="item.title.includes('原因分析') && saleModel.auditType === '2' ">
                责任部门:{{ item[`user`] }}
              </div>

              <div class="desc" v-if="item.title.includes('采取的措施') && saleModel.auditType === '1' ">
                责任部门:{{ item[`users`] }}
              </div>
              <div class="desc" v-if="item.title.includes('采取的措施') && saleModel.auditType === '2' ">
                责任部门:{{ item[`user`] }}
              </div>

              <div class="desc" v-if="item.title.includes('措施落实') && saleModel.auditType === '1' ">
                责任部门:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="item.title.includes('措施落实') && saleModel.auditType === '2' ">
                责任部门:{{ item[`user`] }}
              </div>

              <div class="desc" v-if="item.title.includes('不合格品评审（审理）处置意见')">签字:{{ item[`user`] }}</div>
              <div class="desc" v-if="item.title.includes('组长（或分管领导）审批意见')">签字:{{ item[`user`] }}</div>
              <div class="desc">时间: {{ item.time }}</div>
              <el-button
                v-if="item.fileUrl && !isPrinting"
                link
                type="primary"
                size="small"
                @click="handleDownload(item)"
              >下载附件
              </el-button
              >
            </div>
          </div>
        </td>
      </tr>
      <tr v-for="(item, index) in contentArray2" :key="index">
        <td colspan="6">
          <div class="sale-box">
            <div class="sale-title">{{ item.title }}</div>
            <div class="sale-content">
            </div>
            <div class="sale-bottom">
              <div class="desc" v-if="item.title.includes('分析处置要求')">
                技术人员:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求')">
                联系电话:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="desc" v-if="item.title.includes('分析处置要求')">
                责任部门:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="desc" v-if="item.title.includes('原因分析') && saleModel.auditType === '1' ">分析单位:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc" v-if="item.title.includes('原因分析') && saleModel.auditType === '2' ">责任部门:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc" v-if="item.title.includes('采取的措施')">责任部门:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc" v-if="item.title.includes('措施落实') ">责任部门:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc" v-if="item.title.includes('不合格品评审（审理）处置意见') ">签字:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc" v-if="item.title.includes('组长（或分管领导）审批意见') ">签字:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="desc">时间: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import * as originalArray from "lodash-es";
import Now from "lodash-es/now.js";

const saleModel = ref({});
const date = new Date();
const now = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
const contentArray = ref([]);
const contentArray2 = ref([]);
defineProps({
  isPrinting: Boolean
});
const refreshView = (row) => {
  saleModel.value = row;
  contentArray.value = [];
  if (row.remark1 && JSON.parse(row.remark1).content) {
    let remark1 = JSON.parse(row.remark1);
    contentArray.value.push({
      ...remark1,
      title: "不合格现象（质量问题）描述：",
    });
  }
  if (row.remark2 && JSON.parse(row.remark2).content) {
    let remark2 = JSON.parse(row.remark2);
    contentArray.value.push({...remark2, title: "分析处置要求："});
  }
  if (row.remark3 && JSON.parse(row.remark3).content) {
    let remark3 = JSON.parse(row.remark3);
    contentArray.value.push({...remark3, title: "原因分析："});
  }
  if (row.remark4 && JSON.parse(row.remark4).content) {
    let remark4 = JSON.parse(row.remark4);
    contentArray.value.push({...remark4, title: "采取的措施："});
  }
  if (row.remark5 && JSON.parse(row.remark5).content) {
    let remark5 = JSON.parse(row.remark5);
    contentArray.value.push({...remark5, title: "措施落实："});
  }
  if (row.remark6 && JSON.parse(row.remark6).content) {
    let remark6 = JSON.parse(row.remark6);
    contentArray.value.push({
      ...remark6,
      title: "不合格品评审（审理）处置意见：",
    });
  }
  if (row.remark7 && JSON.parse(row.remark7).content) {
    let remark7 = JSON.parse(row.remark7);
    contentArray.value.push({
      ...remark7,
      title: "组长（或分管领导）审批意见：",
    });
  }
  if (row.isEdit !== '是') {
    console.log("fsdfsdfsdf")
    contentArray2.value = [
      {title: "不合格现象（质量问题）描述："},
      {title: "分析处置要求："},
      {title: "原因分析："},
      {title: "采取的措施："},
      {title: "措施落实："},
      {title: "不合格品评审（审理）处置意见："},
      {title: "组长（或分管领导）审批意见："}
    ];
    // nextTick(() => {
    //   // 5. 执行切片逻辑
    //   contentArray2.value = contentArray2.value.slice(contentArray.value.length);
    //   console.log("dfdfdfdf", contentArray2.value)
    // });

    nextTick(() => {
      // 获取 contentArray 中所有的 title
      const existingTitles = contentArray.value.map(item => item.title);
      // 过滤掉 contentArray2 中已存在的 title
      contentArray2.value = contentArray2.value.filter(
        item => !existingTitles.includes(item.title)
      );
      console.log("过滤后的 contentArray2:", contentArray2.value);
    });
  } else {
    if (row.auditType === '1') {
      contentArray.value = [contentArray.value[0]];
    }
  }
};

const handleDownload = (item) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.fileUrl;

  // 创建一个 <a> 元素
  var link = document.createElement("a");
  // 设置文件的 URL
  link.href = url;
  // 设置下载的文件名
  link.download = item.fileName;

  // 将 <a> 元素添加到文档中（虽然不需要在页面上可见）
  document.body.appendChild(link);

  // 触发点击事件
  link.click();

  // 移除 <a> 元素
  document.body.removeChild(link);
};

defineExpose({refreshView});
</script>

<style scoped lang="scss">
.sale-header {
  text-align: center;
  font-size: 20px;
  //font-weight: bold;
  margin-bottom: 10px;
}

.sale-right {
  text-align: right;
  width: 800px;
}

table {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #000000;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000000;
  text-align: center;
  padding: 3px;
}

.sale-box {
  .sale-title {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: start;
  }

  .sale-content {
    font-size: 16px;
    min-height: 60px;
    margin-bottom: 10px;
    text-align: start;
    padding: 0 8px;
  }

  .sale-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .desc {
    margin-right: 20px;
  }
}

.no-print {
  display: none !important;
}
</style>
