<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; margin: 0 auto; margin-top: 15px"
      class="grid-content ep-bg-purple-light"
    >
      <div
        style="
          width: 680px;
          font-size: 32px;
          font-weight: 800;
          height: 3.2vh;
          line-height: 3.2vh;
          margin: auto;
          color: black;
          font-family: 宋体;
          text-align: center;
          margin-top: 60px;
        "
      >
        <!-- 河北省卫生健康委员会综合监督服务中心 <br /> -->
        发文审批笺
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          color: black;
          margin-top: 35px;
          margin-left: 40px;
          width: 640px;
          font-size: 22px;
          font-weight: 500;
        "
      ></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: 12vh">
            <td style="font-size: 20px" width="16.5%" align="center">
              文件标题
            </td>
            <td style="font-size: 16px; padding: 0 5px" colspan="5">
              {{ this.data11.title }}
            </td>
          </tr>
          <tr style="height: 12vh">
            <td style="font-size: 20px" align="center">附件</td>
            <td style="font-size: 16px; padding: 0 5px" colspan="5"></td>
          </tr>

          <tr style="height: 10vh">
            <td width="20%" style="font-size: 20px" align="center">发文编号</td>
            <td
              style="padding-right: 8px; font-size: 16px; padding: 0 5px"
              colspan="3"
            ></td>
            <td width="15%" style="font-size: 20px" align="center">密级</td>
            <td style="font-size: 16px; padding: 0 5px" colspan="2"></td>
          </tr>
          <tr style="height: 10vh">
            <td style="font-size: 20px" align="center">主送单位</td>
            <td style="font-size: 16px; padding: 0 5px" colspan="5"></td>
          </tr>
          <tr style="height: 55px">
            <td style="font-size: 20px" align="center">
              &nbsp;抄&nbsp;&nbsp;送 <br />
              单&nbsp;&nbsp;位
            </td>
            <td style="font-size: 16px; padding: 0 5px" colspan="5"></td>
          </tr>
          <tr style="height: 45px">
            <td style="font-size: 20px" width="30%" align="center">
              &nbsp;领&nbsp;&nbsp;导 <br />
              批&nbsp;&nbsp;示
            </td>
            <td style="" colspan="5">
              <div v-for="item in dataLD" :key="item">
                <div style="font-size: 16px; padding: 0 5px">
                  {{ item.EmpFromT }}：{{ item.Msg }} &nbsp;&nbsp;&nbsp;
                  {{ parseTime(item.RDT, "{y}-{m}-{d} ") }}
                </div>
                <div
                  style="
                    font-size: 16px;
                    line-height: 45px;
                    height: 45px;
                    padding: 0 5px;
                  "
                ></div>
              </div>
            </td>
          </tr>
          <!-- </table>
        <table
          style="border-collapse: collapse; border-top: 0.5px solid #808080"
          border="1"
          width="680px"
          height="200"
          align="center"
        > -->
          <tr style="height: 25px">
            <td width="30%" style="font-size: 20px" align="center">承办单位</td>
            <td
              style="width: 180px; font-size: 16px; padding: 0 5px"
              colspan="2"
            >
              {{ this.data11.undertakerUnit }}
            </td>

            <td style="font-size: 20px" colspan="1">拟稿人</td>
            <td style="font-size: 16px; padding: 0 5px" colspan="2">
              {{ this.data11.createBy }}
            </td>
          </tr>
          <tr style="height: 40px">
            <td width="20%" style="font-size: 20px" align="center">
              办公室 <br />
              核稿人
            </td>
            <td
              style="width: 95px; font-size: 16px; padding: 0 5px"
              colspan="1"
            ></td>
            <td
              style="width: 95px; font-size: 16px; padding: 0 5px"
              colspan="1"
            ></td>
            <td style="width: 95px; font-size: 20px" colspan="1">办公室文秘</td>
            <td
              style="width: 90px; font-size: 16px; padding: 0 5px"
              colspan="1"
            ></td>
            <td
              style="width: 95px; font-size: 16px; padding: 0 5px"
              colspan="1"
            ></td>
          </tr>
          <tr style="height: 25px">
            <td style="font-size: 20px" width="16.5%" align="center">
              发文时间
            </td>

            <td style="font-size: 16px; padding: 0 5px" colspan="5">
              {{ parseTime(this.data11.createTime, "{y}年{m}月{d}日") }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 共印 份，存档 1 份
            </td>
          </tr>
        </table>
        <div
          style="
            height: 30px;
            line-height: 30px;
            margin-top: 15px;
            font-size: 18px;
          "
        >
          <div style="float: left">注意事项：</div>

          <div style="display: inline-block; margin-left: 5px">
            1、批示意见不要越过装订线
            <br />
            <div>2、请不要用铅笔或不符合存档要求的圆珠笔书写</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { VueHtmlToPaper } from "vue-html-to-paper";
import { getFwYbjInfo } from "@/api/liucheng";
import { ElMessage } from "element-plus";
export default {
  // directives: {
  //   htmlToPaper: VueHtmlToPaper,
  // },

  name: "YinetYbjIndex",
  props: ["data"],
  data() {
    return {
      //打印
      print: {
        id: "printContent",
      },
      YbjDatas: [],
      data11: this.data,
      dataLD: [],
    };
  },
  created() {
    console.log("data111", this.data11);
    this.getInfoData();
  },
  mounted() {},
  methods: {
    getInfoData() {
      getFwYbjInfo(this.data.workId).then((reData) => {
        if (reData.data != null) {
          this.YbjDatas = reData.data;
          if (this.YbjDatas["203"] != undefined) {
            this.dataLD = this.YbjDatas["203"];
          } else if (this.YbjDatas["503"] != undefined) {
            this.dataLD = this.YbjDatas["503"];
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
}
</style>

<style>
@media print {
  html,
  body {
    height: inherit;
  }
}
</style>
