<template>
  <div>
    <div
      class="color"
      style="
        background-color: #f6fafd;
        height: 5vh;
        line-height: 5vh;
        padding-left: 20px;
        border-bottom: 1px solid black;
      "
    >
      <el-button v-print="print" plain type="primary">打印</el-button>
    </div>
    <div
      id="printContent"
      style="
        width: 680px;
        font-family: '宋体';
        margin: 0 auto;
        margin-top: 15px;
      "
      class="grid-content ep-bg-purple-light"
    >
      <div
        style="
          width: 680px;
          font-size: 30px;
          height: 4vh;
          line-height: 4vh;
          margin: auto;
          color: black;
          text-align: center;
          margin-top: 10px;
          font-family: '宋体';
          font-weight: 700;
        "
      >
        上级来文批办卡
      </div>

      <div
        style="
          display: flex;
          justify-content: space-between;
          color: black;
          margin-top: 1.5vh;
          margin-left: 40px;
          width: 640px;
          font-size: 21px;
          font-weight: 500;
          margin-bottom: 0.5vh;
        "
      >
        <div style="display: inline-block">
          流水号:{{ YbjData.yOffcialReceive.serial }}
        </div>
        <div style="margin-top: 2px; display: inline-block; margin-right: 50px">
          收文时间:
          {{
            parseTime(YbjData.yOffcialReceive.sendTime, "{y} 年 {m} 月 {d} 日")
          }}
        </div>
      </div>
      <div style="margin: 20px; margin-top: 0px; color: black">
        <table
          style="border-collapse: collapse"
          border="1"
          width="100%"
          height="90vh"
          align="center"
        >
          <tr style="height: 9vh">
            <td style="font-size: 20px" width="8%" align="center">
              来文 <br />
              单位
            </td>
            <td colspan="1" style="font-size: 20px; text-align: center">
              {{ YbjData.yOffcialReceive.sender }}
            </td>
            <td colspan="1" style="font-size: 20px; width: 6%" align="center">
              文<br />号
            </td>
            <td
              colspan="1"
              style="font-size: 20px; width: 17%; text-align: center"
            >
              {{ YbjData.yOffcialReceive.documentNum }}
            </td>
            <td colspan="1" style="font-size: 20px; width: 6%" align="center">
              密<br />级
            </td>
            <td
              colspan="2"
              style="font-size: 20px; text-align: center; width: 9%"
            >
              <span
                v-if="
                  YbjData.ywArchive != null &&
                  YbjData.ywArchive != '' &&
                  YbjData.ywArchive != undefined
                "
              >
                <span v-for="item in archive_levels" :key="item">
                  <span v-if="item.value == YbjData.ywArchive.levels">
                    {{ item.label }}
                  </span>
                </span>
              </span>
            </td>
            <td colspan="1" style="font-size: 20px; width: 6%" align="center">
              份<br />数
            </td>
            <td
              colspan="1"
              style="font-size: 20px; text-align: center; width: 6%"
            >
              <span
                v-if="
                  YbjData.ywArchive != null &&
                  YbjData.ywArchive != '' &&
                  YbjData.ywArchive != undefined
                "
              >
                {{ YbjData.ywArchive.printNum }}</span
              >
            </td>
          </tr>
          <tr style="height: 10vh">
            <td
              style="font-size: 20px; writing-mode: tb-rl"
              width="7%"
              align="center"
            >
              标 题
            </td>
            <td
              rowspan="1"
              colspan="8"
              style="font-size: 20px; text-align: center"
            >
              {{ YbjData.yOffcialReceive.title }}
            </td>
          </tr>
          <tr style="height: 18vh">
            <td
              style="font-size: 20px; writing-mode: tb-rl"
              width="7%"
              align="center"
            >
              局长（书记）意见
            </td>
            <td rowspan="1" colspan="8" style="font-size: 20px">
              <div v-for="item in YbjData.ldpsMaps" :key="item">
                {{ item.nickName }}:{{ item.Msg }}
              </div>
            </td>
          </tr>
          <tr style="height: 15vh">
            <td
              style="font-size: 20px; writing-mode: tb-rl"
              width="7%"
              align="center"
            >
              主管领导意见
            </td>
            <td rowspan="1" colspan="8" style="font-size: 20px">
              <div v-for="item in YbjData.zgldMaps" :key="item">
                <div v-if="item.ActionType != 22">
                  {{ item.nickName }}:{{ item.Msg }}
                </div>
              </div>
            </td>
          </tr>
          <tr style="height: 15vh">
            <td
              style="font-size: 20px; writing-mode: tb-rl"
              width="7%"
              align="center"
            >
              拟办意见
            </td>
            <td rowspan="1" colspan="8" style="font-size: 20px">
              <div v-for="item in YbjData.nbyjMaps" :key="item">
                {{ item.nickName }}:{{ item.Msg }}
              </div>
            </td>
          </tr>
          <tr style="height: 12vh">
            <td style="font-size: 20px" width="7%" align="center">
              落办 <br />
              结果
            </td>
            <td rowspan="1" colspan="8" style="font-size: 20px">
              <div style="float: left; display: inline-block; width: 280px">
                完成时限： {{ YbjData.yOffcialReceive.closeTime }}
                <br />
                责任科室：{{ keShis }}
              </div>
              <div style="float: right; display: inline-block; width: 280px">
                责任领导：{{ YbjData.yOffcialReceive.hostLeader }}
                <br />
                是否完成：是
              </div>
            </td>
          </tr>
          <tr style="height: 5vh">
            <td style="font-size: 20px" colspan="9">备注：</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
// import { VueHtmlToPaper } from "vue-html-to-paper";
import { getYbjInfo } from "@/api/liucheng";
import { ElMessage } from "element-plus";
import { useDict } from "@/utils/dict";

export default {
  // directives: {
  //   htmlToPaper: VueHtmlToPaper,
  // },

  name: "YinetYbjIndex",
  props: ["id"],
  data() {
    return {
      sw_open_type: useDict("sw_open_type").sw_open_type,
      archive_levels: useDict("archive_levels").archive_levels,

      //打印
      print: {
        id: "printContent",
      },
      YbjData: {
        cbcsStr: "",
        nbyjStr: "",
        ldpsStr: "",
        yOffcialReceive: {},
        ywArchive: {},
      },
      aaid: 32,
      keShis: "",
      ldNames: "",
    };
  },
  created() {
    console.log("archive_levels", this.archive_levels);
  },
  mounted() {
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      getYbjInfo(this.id).then((reData) => {
        this.YbjData = reData.data;
        console.log("YbjData", this.YbjData);
        if (
          this.YbjData.cbcsMaps != null &&
          this.YbjData.cbcsMaps != undefined &&
          this.YbjData.cbcsMaps != ""
        ) {
          this.keShis = this.YbjData.cbcsMaps
            .filter((item) => item.ActionType !== 22) // 过滤掉 ActionType 为 22 的项
            .map((item) => item.deptName) // 提取 deptName
            .join(","); // 连接成字符串
          this.ldNames = this.YbjData.cbcsMaps
            .filter((item) => item.ActionType !== 22) // 过滤掉 ActionType 为 22 的项
            .map((item) => item.nickName) // 提取 deptName
            .join(","); // 连接成字符串
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
}
</style>
<style>
@media print {
  html,
  body {
    height: inherit;
  }
}
</style>
