<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: 30px;
      "
      class="grid-content ep-bg-purple-light"
    >
      <div
        style="
          width: 680px;
          font-size: 35px;
          font-weight: 800;
          height: 4vh;
          line-height: 4vh;
          margin: auto;
          color: black;
          text-align: center;
          margin-top: 40px;
        "
      >
        <!-- 河北省卫生健康委员会综合监督服务中心 <br /> -->
        发表学术论文审批登记表
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          color: black;
          margin-top: 40px;
          margin-left: 40px;
          width: 640px;
          font-size: 22px;
          font-weight: 500;
        "
      ></div>

      <div style="margin-bottom: 20px; font-size: 26px; color: black">
        <table
          style="border-collapse: collapse; margin-top: 20px"
          border="1"
          width="680px"
          height="800"
          align="center"
        >
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" width="30%" align="center">
              投稿人姓名
            </td>
            <td style="padding: 0 5px; font-size: 24px">
              {{ YbjData.ywJournalPublish.userName }}
            </td>
          </tr>
          <tr style="height: 9vh">
            <td style="font-size: 24px" width="16.5%" align="center">
              投稿时间
            </td>
            <td style="padding: 0 5px; font-size: 24px">
              {{
                parseTime(
                  YbjData.ywJournalPublish.registrationDate,
                  "{y} 年 {m} 月 {d} 日"
                )
              }}
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">论文名称</td>
            <td style="padding: 0 5px; font-size: 24px">
              {{ YbjData.ywJournalPublish.paperName }}
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">期刊级别</td>
            <td style="padding: 0 5px; font-size: 24px">
              {{ YbjData.ywJournalPublish.journalLevel }}
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">期刊年、卷、期</td>
            <td style="padding: 0 5px; font-size: 24px">
              {{ YbjData.ywJournalPublish.journalNumber }}
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">版面费金额</td>
            <td style="padding: 0 5px; font-size: 24px">
              <div v-if="YbjData.ywJournalPublish.layoutFees != ''">
                {{ YbjData.ywJournalPublish.layoutFees }}元
              </div>
            </td>
          </tr>
          <tr style="height: 10vh">
            <td style="font-size: 24px" align="center">
              主管学术领导 <br />
              签批
            </td>
            <td style="padding: 0 5px; font-size: 24px">
              <div
                v-if="YbjData.ldpsMaps != undefined && YbjData.ldpsMaps != null"
              >
                <template
                  v-for="(item, index) in YbjData.ldpsMaps"
                  :key="index"
                >
                  <span>{{ item.nickName }}：{{ item.Msg }}</span>
                </template>
              </div>
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">学术委员会备案</td>
            <td style="padding: 0 5px; font-size: 24px">
              <div
                v-if="YbjData.cbcsMaps != undefined && YbjData.cbcsMaps != null"
              >
                <template
                  v-for="(item, index) in YbjData.cbcsMaps"
                  :key="index"
                >
                  <span>{{ item.nickName }}：{{ item.Msg }}</span>
                </template>
              </div>
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="font-size: 24px" align="center">报销金额<br />及时间</td>
            <td style="padding: 0 5px; font-size: 24px">
              <div v-if="YbjData.ywJournalPublish.eliminateMoney != ''">
                {{ YbjData.ywJournalPublish.eliminateMoney }}元<br />
              </div>
              {{
                parseTime(
                  YbjData.ywJournalPublish.registrationDate,
                  "{y} 年 {m} 月 {d} 日"
                )
              }}
            </td>
          </tr>
        </table>
        <div
          style="
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            margin-top: 10px;
          "
        >
          注:论文发表后请持此表到办公室登记并由主管学术领导签批后到财务办理报销手续。
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { VueHtmlToPaper } from "vue-html-to-paper";
import { getXslwYbjInfo } from "@/api/liucheng";
import { ElMessage } from "element-plus";
export default {
  // directives: {
  //   htmlToPaper: VueHtmlToPaper,
  // },

  name: "getXslwYbjInfo",
  props: ["id"],
  data() {
    return {
      //打印
      print: {
        id: "printContent",
      },
      YbjData: {
        ywJournalPublish: {},
      },
    };
  },
  mounted() {
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      getXslwYbjInfo(this.id).then((reData) => {
        this.YbjData = reData.data;
        console.log("YbjData", this.YbjData);
      });
    },
  },
};
</script>

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