<template>
  <div class="main-content abnormal">
    <div class="content-header">
      <span class="title">移出经营异常名录审批表</span>
      <div class="back-btn">
        <el-button type="primary" size="mini" @click="$router.back()">返回</el-button>
        <el-button type="primary" size="mini" @click="printCurrent">打印当前页</el-button>
        <el-button type="primary" size="mini" @click="printAll">全部打印</el-button>
        <!-- <el-button type="warning" icon="el-icon-caret-left" size="mini" @click="$router.back()">返回上一层</el-button> -->
      </div>
    </div>
    <div id="content-body" class="content-body">
      <div class="preview-box">
        <paper-swiper ref="swiper">
          <paper v-for="(item,index) in tableDataList" :key="index" style="width:730px">
            <div class="printPaper">
              <div class="paper-header" style="text-align:center"> <!-- 表头  -->
                <h2>{{ item.reDecorg }}</h2>
                <h2>移出经营异常名录审批表</h2>
              </div>
              <div class="enter" />
              <div class="paper-table">  <!-- 表格  -->
                <table width="100%" border="1" style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <th width="22%">企业名称</th>
                      <td colspan="7">{{ item.entname }}</td>
                    </tr>
                    <tr>
                      <th>统一社会信用代码/注册号</th>
                      <td colspan="7">{{ item.uscc }}</td>
                    </tr>
                    <tr>
                      <th>列入经营异常名录日期</th>
                      <td colspan="7">{{ item.abntime }}</td>
                    </tr>
                    <tr>
                      <th>列入经营异常名录原因</th>
                      <td colspan="7">{{ item.specausestring }}</td>
                    </tr>
                    <tr>
                      <th>移出经营异常名录原因</th>
                      <td colspan="7">{{ item.remexcpresString }}</td>
                    </tr>
                    <!-- <tr>
                      <th>事实和理由</th>
                      <td colspan="7">
                        <div style="min-height:80px">
                          <p>{{ item.remexcpresString }}</p>
                        </div>
                      </td>
                    </tr> -->
                    <tr>
                      <th>初审意见</th>
                      <td colspan="7">
                        <div style="min-height:80px">
                          <p>{{ historyLog[0].opinioncontent }}</p>
                        </div>
                        <div style="text-align:left;">
                          <el-row style="text-align: right;border: unset">经办人：<span style="display:inline-block;min-width:35%;text-align: left;">{{ historyLog[0].handler }}</span></el-row>
                          <!-- <span style="display:inline-block;width:45%">经办人：{{ historyLog[0].handler }}</span> -->
                          <span style="display:inline-block;width:98%;text-align:right">{{ historyLog[0].year }}年{{ historyLog[0].month }}月{{ historyLog[0].day }}日</span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>审核意见</th>
                      <td colspan="7">
                        <div style="min-height:80px">
                          <p>{{ historyLog[1].opinioncontent }}</p>
                        </div>
                        <div style="text-align:left;">
                          <el-row style="text-align: right;border: unset">审核人：<span style="display:inline-block;min-width:35%;text-align: left;">{{ historyLog[1].handler }}</span></el-row>
                          <!-- <span style="display:inline-block;width:45%">审核人：{{ historyLog[1].handler }}</span> -->
                          <span style="display:inline-block;width:98%;text-align:right">{{ historyLog[1].year }}年{{ historyLog[1].month }}月{{ historyLog[1].day }}日</span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>审批意见</th>
                      <td colspan="7">
                        <div style="min-height:80px">
                          <p>{{ historyLog[2].opinioncontent }}</p>
                        </div>
                        <div style="text-align:left;">
                          <el-row style="text-align: right;border: unset">审批人：<span style="display:inline-block;min-width:35%;text-align: left;">{{ historyLog[2].handler }}</span></el-row>
                          <!-- <span style="display:inline-block;width:45%">审批人：{{ historyLog[2].handler }}</span> -->
                          <span style="display:inline-block;width:98%;text-align:right">{{ historyLog[2].year }}年{{ historyLog[2].month }}月{{ historyLog[2].day }}日</span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>备注</th>
                      <td colspan="7">
                        <div style="min-height:60px">
                          <p>{{ item.remRemark }}</p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </paper>
        </paper-swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { getBizRemListPrintInfo } from '@/api/abnormal'
import { opinionPrint } from '@/api/task'
import { getConstant } from '@/api/system'
// import { getDetail } from '@/api/company/company'
// import { createApplyRecord } from '@/api/process/dissent'
export default {
  data() {
    return {
      includeReasonList: [],
      removeReasonList: [],
      workflowId: '',
      bizseq: '',
      tasklistid: '',
      historyLog: [{ opinioncontent: '' }, { opinioncontent: '' }, { opinioncontent: '' }], // 意见记录
      tableDataList: [],
      name: '',
      uscc: '',
      isPlaceholder: true
    }
  },
  // watch: {
  //   isPlaceholder() {
  //     return this.$refs.dissentContent.innerHTML === '点击此处输入异议内容'
  //   }
  // },
  mounted() {
    this.bizseq = this.$route.query.bizseq
    this.workflowId = this.$route.query.workflowId
    this.tasklistid = this.$route.query.tasklistid

    // 加载企业列入原因
    getConstant('CD71').then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        // this.$set(this, 'reasonList', list)
        this.includeReasonList = list
      }
    })
    // 加载企业移出原因
    getConstant('CD72').then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        this.removeReasonList = list
      }
    })
    // 加载主体名称和注册号
    getBizRemListPrintInfo(this.$route.query.bizseq).then(res => {
      if (res.code === 0) {
        res.data.forEach(each => {
          if (each.remRemark === 'null') {
            each.remRemark = ''
          }
          each.uscc = each.uniscid ? each.uniscid : each.regno
          each.specausestring = this.$util.enumFormatter(this.includeReasonList, each.specause)
          each.remexcpresString = this.$util.enumFormatter(this.removeReasonList, each.remexcpres)
        })
        this.tableDataList = res.data
      } else {
        this.$message.error('加载主体信息失败')
      }
    })

    // 加载同意意见列表
    opinionPrint(this.workflowId).then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          const dateArray = this.$util.formatDate.format(new Date(Date.parse(each.handledate)), 'yyyy-MM-dd').split('-')
          each.year = dateArray[0]
          each.month = dateArray[1]
          each.day = dateArray[2]
          list.push(each)
        })
        this.historyLog = list
      } else {
        this.$message.error('加载意见记录失败')
      }
    })
  },
  methods: {
    printCurrent() {
      const swiper = this.$refs.swiper
      const page = swiper.getPaperElement()

      const printHtml = page.innerHTML// 获取到要打印的节点内容

      window.document.body.innerHTML = printHtml// 把打印内容赋值给页面内容

      window.print()// 调用打印方法
      window.location.reload()// 打印之后页面重新加载
    },
    printAll() {
      let html = ''
      const swiper = this.$refs.swiper
      for (let i = 0; i < this.tableDataList.length; i++) {
        const page = swiper.getPaperElement(i)
        const printHtml = page.innerHTML
        html += printHtml
      }
      const style = '<style type="text/css">body>div:not(:first-child){margin-top:600px}</style>'
      html += style
      window.document.body.innerHTML = html// 把打印内容赋值给页面内容

      window.print()// 调用打印方法
      window.location.reload()// 打印之后页面重新加载
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.main-content{
  padding: 10pt;
    .back-btn{
    display: inline-block;
    position: absolute;
    right: 40pt;
  }
  .content-header,.content-body{
    background: white;
    padding:20PX 10PX;
    border:1PX solid #eee;
  }
  .content-header{
    height:60PX;
    .title{
      text-align: center;
      font-weight: 700;
      font-size: $font-size-sub-title;
    }
  }
  .content-body{
    padding:20pt;
      .tab{
        .tab-title{
          label{
            background: $color-primary;
            display:inline-block;
            color:$color-title-color;
            padding:5px;
          }
        }
      }
    .form{
      margin-bottom: 20pt;
    }
  }
  .printPaper{
        width:630PX;
        min-height:891PX;
        background:white;
        border:1PX solid #ccc;
        padding:40PX 50PX;
    }
/* 浏览区域 */
  .preview-box{
      background-color:#e6e6e6;
       text-align:center;
       border:1PX solid #eee;
       min-height:800PX;
       overflow: hidden;
    }
    .paper-box{
        display: inline-block;
        margin-top:10PX
    }
    .paper{
        width:630PX;
        min-height:891PX;
        background:white;
        // border:1PX solid #ccc;
        padding:40PX 50PX
    }

/* 表格 */
.paper-table>div{border:1PX solid black;border-bottom: none;}
.paper-table>div:last-child{border-bottom:1PX solid black}
.row-field:not(:first-child){border-top:1PX solid black}
.field{min-height: 45PX;border-left:1PX solid black}
.paper-table td{
    padding:10px}
.paper-table th{
  padding: 10px;
  text-align: center;
  }
}
/* 换行 */
.enter{margin-top:20PX}
.enter:before{content:''}
p {
    text-indent: 2em;
    text-align: left;
    line-height: 30px;
    margin-block-start: auto;
    margin-block-end: auto;
}
</style>
<style lang="scss">
//打印样式
@media print{
.content-body{
    background: white;
    padding:20PX 10PX;
    border:1PX solid #eee;
}
.content-body{
    padding:20pt;
      .tab{
        .tab-title{
          label{
            background: $color-primary;
            display:inline-block;
            color:$color-title-color;
            padding:5px;
          }
        }
    }
    .form{
      margin-bottom: 20pt;
    }
}
.preview-box{
      background-color:#e6e6e6;
       text-align:center;
       border:1PX solid #eee;
       min-height:800PX;
       overflow: hidden;
    }
    .paper-box{
        display: inline-block;
        margin-top:10PX
    }
    .paper{
        width:630PX;
        min-height:891PX;
        background:white;
        padding:40PX 50PX
    }
.printPaper{
        min-height:891PX;
        background:white;
        padding:40PX 50PX;
    }
/* 表格 */
.paper-table>div{border:1PX solid black;border-bottom: none;}
.paper-table>div:last-child{border-bottom:1PX solid black}
.row-field:not(:first-child){border-top:1PX solid black}
.field{min-height: 45PX;border-left:1PX solid black}
.paper-table td{
    padding:10px}
.paper-table th{
  padding: 10px;
  text-align: center;
  }

p {
    text-indent: 2em;
    text-align: left;
    line-height: 30px;
    margin-block-start: auto;
    margin-block-end: auto;
}
/* 换行 */
.enter{margin-top:20PX}
.enter:before{content:''}
//去掉页眉页脚及打印链接
@page {
    size: auto;
    margin: 0mm;
}
}
</style>
