<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: 1080px;
        font-size: 33px;
        font-family: 宋体;
        margin: 0 auto;
        margin-top: 15px;
      "
      class="grid-content ep-bg-purple-light"
    >
      <div
        style="
          width: 1080px;
          font-size: 46px;
          font-weight: 800;
          height: 3.2vh;
          line-height: 3.2vh;
          margin: auto;
          color: black;
          font-family: 宋体;
          text-align: center;
          margin-top: 60px;
        "
      >
        河北省卫生健康委综合监督服务中心发文审批笺
      </div>

      <div
        style="
          display: flex;
          justify-content: space-between;
          color: black;
          margin-top: 15px;
          width: 780px;

          margin-bottom: 5px;
          margin-left: 600px;
        "
      >
        <div style="margin-top: 20px">
          <div>文号:{{ this.data11.wordNum }}</div>
        </div>
      </div>
      <div style="margin: 20px; margin-top: 0px; color: black">
        <table
          style="border-collapse: collapse; height: 90vh"
          border="1"
          width="100%"
          align="center"
        >
          <tr style="height: 27vh">
            <td style="" width="7%" align="center">
              <div style="margin-bottom: 5px">领&nbsp;导</div>
              意&nbsp;见
            </td>
            <td style="padding: 0 5px; font-size: 28px" colspan="5">
              <div v-for="item in dataLD" :key="item">
                <div style="padding: 0 5px">
                  {{ item.Msg }} {{ item.EmpFromT }}
                  {{ parseTime(item.RDT, "{y}-{m}-{d} {h}:{i}:{s}") }}
                </div>
                <div
                  style="line-height: 45px; height: 45px; padding: 0 5px"
                ></div>
              </div>
            </td>
          </tr>
          <tr style="height: 17vh">
            <td style="" align="center">
              <div style="margin-bottom: 5px">办公室</div>
              核稿
            </td>
            <td style="padding: 0 5px; font-size: 28px" colspan="5">
              <div v-for="item in bgsData" :key="item">
                <div style="padding: 0 5px">
                  {{ item.Msg }} {{ item.EmpFromT }}
                  {{ parseTime(item.RDT, "{y}-{m}-{d} {h}:{i}:{s}") }}
                </div>
                <div
                  style="line-height: 45px; height: 45px; padding: 0 5px"
                ></div>
              </div>
            </td>
          </tr>

          <tr style="height: 16vh">
            <td style="" align="center">
              <div style="margin-bottom: 5px">处&nbsp;室</div>
              核&nbsp;稿
            </td>
            <td colspan="2" style="padding: 0 5px; width: 40%; font-size: 28px">
              <div v-for="item in csData" :key="item">
                <div style="padding: 0 5px">
                  {{ item.Msg }} {{ item.EmpFromT }}
                  {{ parseTime(item.RDT, "{y}-{m}-{d} {h}:{i}:{s}") }}
                </div>
                <div
                  style="line-height: 45px; height: 45px; padding: 0 5px"
                ></div>
              </div>
            </td>
            <td style="width: 11%" align="center">处室拟稿</td>
            <td colspan="2" style="width: 24%; font-size: 28px">
              <div align="center">
                <div>{{ this.data11.createBy }}</div>
                {{ parseTime(this.data11.createTime, "{y}-{m}-{d} {h}:{i}") }}
              </div>
            </td>
          </tr>
          <tr style="height: 15vh">
            <td style="" align="center">
              <div style="margin-bottom: 5px">文&nbsp;件</div>
              标&nbsp;题
            </td>
            <td style="padding: 0 5px; font-size: 28px" colspan="4">
              {{ this.data11.title }}
            </td>
          </tr>
          <tr style="height: 16vh">
            <td style="" align="center">附&nbsp;件</td>
            <td colspan="4" style="padding: 0 5px; font-size: 28px">
              <div v-for="item in this.data11.messageFileList" :key="item">
                <div>{{ item.name }}</div>
              </div>
            </td>
          </tr>
          <tr style="height: 8vh">
            <td style="" align="center">主&nbsp;送</td>
            <td colspan="4" style="font-size: 28px">
              {{ this.data11.mainUnit }}
            </td>
          </tr>

          <tr style="height: 8vh">
            <td style="" align="center">抄&nbsp;送</td>
            <td colspan="4" style="padding: 0 5px; font-size: 28px">
              {{ this.data11.copyUnit }}
            </td>
          </tr>

          <tr style="height: 8.5vh">
            <td rowspan="2" style="" width="12%" align="center">信息公开</td>

            <td style="padding: 0 5px; width: 10%" align="center" colspan="1">
              公开方式
            </td>
            <td style="" colspan="3">
              <div style="padding-left: 20px">
                <el-checkbox-group v-model="OpenData">
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 40px;
                      color: black;
                    "
                    label="主动公开"
                    size="large"
                  />
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 75px;
                      color: black;
                    "
                    label="依申请公开"
                    size="large"
                  />
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 75px;
                      color: black;
                    "
                    label="不予公开"
                    size="large"
                  />
                </el-checkbox-group>
              </div>
            </td>
          </tr>
          <tr style="height: 8.5vh">
            <td style="padding: 0 5px; width: 16%" align="center" colspan="1">
              不公开理由
            </td>
            <td colspan="3">
              <div style="padding-left: 20px">
                <el-checkbox-group v-model="noOpenReason">
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 55px;
                      color: black;
                    "
                    label="内部请示报告"
                    size="large"
                  />
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 85px;
                      color: black;
                    "
                    label="不宜公开"
                    size="large"
                  />
                  <el-checkbox
                    disabled
                    style="
                      transform: scale(2.2);
                      margin-left: 50px;
                      color: black;
                    "
                    label="其他"
                    size="large"
                  />
                </el-checkbox-group>
              </div>
            </td>
          </tr>
        </table>
        <div style="height: 30px; line-height: 30px; margin-top: 15px">
          <div style="margin-left: 680px">印数：</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";
import { useDict } from "@/utils/dict";
export default {
  // directives: {
  //   htmlToPaper: VueHtmlToPaper,
  // },

  name: "YinetYbjIndex",
  props: ["data"],
  data() {
    return {
      //打印
      print: {
        id: "printContent",
      },
      YbjDatas: [],
      OpenData: [],
      bgsData: [],
      csData: [],
      noOpenReason: [],
      sw_open_type: useDict("sw_open_type").sw_open_type,
      no_open_reason: useDict("no_open_reason").no_open_reason,
      data11: this.data,
      dataLD: [],
    };
  },
  created() {
    console.log("data11", this.data11);
    // this.data11.infoOpenType;
    this.sw_open_type.forEach((item) => {
      if (item.value == this.data11.infoOpenType) {
        this.OpenData.push(item.label);
      }
    });
    console.log("this.no_open_reason", this.no_open_reason);
    console.log("this.data11.noOpenReason", this.data11.noOpenReason);
    this.no_open_reason.forEach((item) => {
      console.log("item.value", item.value);
      if (item.value == this.data11.noOpenReason) {
        this.noOpenReason.push(item.label);
      }
    });
    this.getInfoData();
  },
  mounted() {},
  methods: {
    getInfoData() {
      console.log("this.data.workId", this.data.workId);
      getFwYbjInfo(this.data.workId).then((reData) => {
        console.log("reData", reData);
        if (reData.data != null) {
          this.YbjDatas = reData.data;
          if (this.YbjDatas["203"] != undefined) {
            this.dataLD = this.YbjDatas["203"];
            console.log("dataLD1", this.dataLD);
          }
          if (this.YbjDatas["202"] != undefined) {
            this.bgsData = this.YbjDatas["202"];
            console.log("bgsData", this.bgsData);
          }
          if (this.YbjDatas["206"] != undefined) {
            this.csData = this.YbjDatas["206"];
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
}
::v-deep .el-checkbox__label {
  display: inline-block;
  padding-left: 1px;
  line-height: 1;
  font-size: var(--el-checkbox-font-size);
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
::v-deep .el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #000000;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ffffff;
  border-color: #000000;
}
::v-deep .el-checkbox__input .el-checkbox__inner {
  background-color: #ffffff;
  border-color: #000000;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000000;
  cursor: not-allowed;
}
.el-checkbox {
  --el-checkbox-font-size: 14px;
  --el-checkbox-font-weight: var(--el-font-weight-primary);
  --el-checkbox-text-color: black;
  --el-checkbox-input-height: 14px;
  --el-checkbox-input-width: 14px;
  --el-checkbox-border-radius: 0;
  --el-checkbox-bg-color: black;
  --el-checkbox-input-border: var(--el-border);
  --el-checkbox-disabled-border-color: black;
  --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
  --el-checkbox-disabled-icon-color: black;
  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
  --el-checkbox-disabled-checked-input-border-color: black;
  --el-checkbox-disabled-checked-icon-color: black;
  --el-checkbox-checked-text-color: black;
  --el-checkbox-checked-input-border-color: var(--el-color-primary);
  --el-checkbox-checked-bg-color: var(--el-color-primary);
  --el-checkbox-checked-icon-color: var(--el-color-white);
  --el-checkbox-input-border-color-hover: var(--el-color-primary);
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: white;
  border-color: var(--el-checkbox-disabled-checked-input-border-color);
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: black;
  /* cursor: not-allowed; */
}
</style>

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