<template>
  <ele-modal title="出库单" :visible.sync="visible" v-if="visible" width="60%">
    <div id="printSection" v-if="numValue == 1">
      <table border cellspacing="0">
        <tbody>
          <tr>
            <td style="padding: 20px" colspan="13" align="center">
              <div class="title1">长沙鼓风机厂有限责任公司</div> <br />
              <div class="title2">设备一级保养记录表</div>
            </td></tr
          >
          <tr>
            <td colspan="1" class="tex_center">部门</td>
            <td colspan="12">{{ formData.executeGroupName }}</td>
          </tr>
          <tr>
            <td colspan="1" class="tex_center">设备编号</td>
            <td colspan="3">{{ formData.deviceList[0].substance.code }} </td>
            <td colspan="1" class="tex_center">设备名称</td>
            <td colspan="4">{{ formData.deviceList[0].substance.name }} </td>
            <td colspan="1" class="tex_center">型号</td>
            <td colspan="3"> {{ formData.deviceList[0].substance.model }} </td>
          </tr>
          <tr>
            <td colspan="1" class="tex_center">生产厂家</td>
            <td colspan="8"></td>
            <td colspan="1" class="tex_center">操作保养人</td>
            <td colspan="3"> {{ formData.executeUserName }} </td>
          </tr>
          <tr align="center">
            <td colspan="1" class="tex_center">序号</td>
            <td colspan="8" class="tex_center">保养内容</td>
            <td colspan="1" class="tex_center">项目结果</td>
            <td colspan="3" class="tex_center">备注</td>
          </tr>
          <tr
            align="center"
            v-for="(item, index) in formData.deviceList[0].workItems"
          >
            <td colspan="1" class="tex_center">{{ index + 1 }}</td>
            <td colspan="8">{{ item.content }}</td>
            <td colspan="1">{{ options[item.status] }}</td>
            <td colspan="3"></td>
          </tr>
          <tr align="center">
            <td colspan="1" class="tex_center">保养验收</td>
            <td colspan="8"></td>
            <td colspan="1" class="tex_center">日期</td>
            <td colspan="3">{{ formatDate(formData.createTime) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="footer">
      <el-button @click="print">打印</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getWordOrderDetail } from '@/api/maintenance/patrol_maintenance';

  export default {
    name: 'print',

    data() {
      return {
        visible: false,
        formData: {},
        options: {
          0: '正常',
          '-1': '缺陷'
        },
        numValue: 0
      };
    },

    methods: {
      open(id, num) {
        this.numValue = num;
        console.log(num, 'num');
        getWordOrderDetail(id).then((res) => {
          this.formData = res;
          this.visible = true;
        });
      },
      close() {
        this.visible = false;
      },
      print() {
        const printSection = document.getElementById('printSection');
        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      },
      formatDate(dateString) {
        // 创建Date对象
        const date = new Date(dateString);

        // 获取年、月、日
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = date.getDate();

        // 格式化输出
        return `${year}年${month.toString().padStart(2, '0')}月${day
          .toString()
          .padStart(2, '0')}日`;
      },
      getNowFormatDate() {
        let date = new Date(),
          obj = {
            year: date.getFullYear(), //获取完整的年份(4位)
            month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate: date.getDate(), // 获取当前日(1-31)
            week: '星期' + '日一二三四五六'.charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
            hour: date.getHours(), //获取当前小时(0 ~ 23)
            minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
            second: date.getSeconds() //获取当前秒数(0 ~ 59)
          };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });

        return `${obj.year}年${obj.month}月${obj.strDate}日`;
      }
    }
  };
</script>

<style lang="scss">
  #printSection {
    display: flex;
    align-items: center;
    justify-content: center;
    th,
    td {
      padding: 10px;
    }
    .title1 {
      font-size: 28px;
      font-weight: 600;
    }
    .title2 {
      font-size: 22px;
      text-align: center;
    }
    .tex_center {
      text-align: center;
      font-weight: bold;
    }
  }
</style>
