<!--  -->
<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" :ref="'contentBody'" class="content-body">
      <div class="preview-box">
        <paper-swiper ref="swiper">
          <paper v-for="(item,index) in tableDataList" :key="index" style="width:730px">
            <div id="printPaper" class="printPaper">
              <div class="paper-header"> <!-- 表头  -->
                <h3 class="h2">{{ item.areaname }}市场监督管理局</h3>
                <h3 class="h2">列入经营异常名录决定书</h3>
                <span>{{ item.wrirsno }}</span>
              </div>
              <div class="enter" />
              <div class="paper-content">
                <div class="firstLine">
                  <div class="name"><span class="downLine">{{ item.entname }}</span><span>：</span></div>

                </div>
                <el-row style="border: unset"> <!-- contenteditable="true"设置span可编辑 -->
                  <p v-for="(each,index) in item.decisionContentList" :key="index">
                    {{ each }}
                  </p>
                  <!-- <p style="white-space: pre-wrap">{{ item.decisionContent }}</p> -->
                  <!-- <p>你单位如不服本决定，可在接到本决定书之日起六十日内<span contenteditable="true">企业监管机关</span>人民政府申请行政复议；或者三个月内向铁路法院提起行政诉讼。</p> -->
                  <!-- <p>如对被列入经营异常名录有异议的，可自公示之日起30日内向作出决定的市场监督管理部门提出书面申请并提交相关证明材料，市场监督管理部门依法作出处理。</p> -->
                </el-row>
                <el-row style="border: unset">
                  <div class="enter" />
                  <div class="right_down">({{ item.areaname }}市场监督管理局公章)</div>
                </el-row>
                <el-row style="border: unset">
                  <div class="right_down"><span>{{ item.year }}年{{ item.month }}月{{ item.day }}日</span></div>
                </el-row>
              </div>
              <el-divider />
              <div class="enter" />
              <div class="paper-header"> <!-- 表头  -->
                <div class="enter" />
                <h3 class="h2">送达回证</h3>
              </div>
              <div class="paper-table"><!--  表格 -->
                <table width="100%" border="1" style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <th width="15%">送达地点</th>
                      <td width="45%" />
                      <th width="15%">送达方式</th>
                      <td width="25%" />
                    </tr>
                  </tbody>
                </table>
                <table class="line2" width="100%" border="1" style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <th width="15%">收件人</th>
                      <td class="td" width="30%"><span>(签名或者盖章)</span><br>
                        <span class="mr20">年</span><span class="mr20">月</span>日</td>
                      <th width="15%">见证人</th>
                      <td class="td" width="40%"><span>(签名或者盖章)</span><br>
                        <span class="mr20">年</span><span class="mr20">月</span>日</td>
                    </tr>
                  </tbody>
                </table>
                <table class="line2" width="100%" border="1" style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <th width="15%">送达人</th>
                      <td width="85%"><el-row style="border: unset"><el-col :span="12" style="text-align: left;padding-left: 20px">(签名或者盖章)</el-col><el-col :span="12" style="text-align: right;"><span class="mr20">年</span><span class="mr20">月</span>日</el-col></el-row></td>
                    </tr>
                    <tr>
                      <th width="15%">备注</th>
                      <td width="85%" />
                    </tr>
                  </tbody>

                </table>
              </div>
            </div>
          </paper>
        </paper-swiper>
      </div>

    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getWritByBizseq } from '@/api/abnormal'
import { getConstant } from '@/api/system'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      bizseq: '',
      reasonOptions: [],
      tableDataList: [],
      entname: '', // 企业名称
      reason: '________', // 原因
      wrirsno: '' // 文书号
    }
  },

  // 生命周期 - 挂载完成（可以访问DOM元素）
  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.reasonOptions = list
      }
    })
    // //加载主体名称及文书号
    getWritByBizseq(this.bizseq, '11').then(res => {
      if (res.code === 0) {
        res.data.forEach(each => {
          var that = each
          this.reasonOptions.forEach(each => {
            if (that.specause === each.value) {
              that.reason = each.label
            }
          })
          const dateArray = this.$util.formatDate.format(new Date(Date.parse(each.createtime)), 'yyyy-MM-dd').split('-')
          that.year = dateArray[0]
          that.month = dateArray[1]
          that.day = dateArray[2]
          const list = that.decisionContent.split('\n')
          that.decisionContentList = list
          this.tableDataList.push(that)
        })
      } else {
        this.$message.error('加载文书号失败')
      }
    })
  },
  // 方法集合
  methods: {
    print() {
      const printHtml = document.getElementById('content-body').innerHTML// 获取到要打印的节点内容
      window.document.body.innerHTML = printHtml// 把打印内容赋值给页面内容

      window.print()// 调用打印方法
      window.location.reload()// 打印之后页面重新加载
    },
    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.outerHTML
        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: 20pt;
  .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{
      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;
    }
  }
  .td{
      text-align: right;
  }
/* 浏览区域 */
  .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
    }
    .printPaper{
        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,.paper-table th{
    .right{
        text-align: right;
    }
    font-weight: normal;
    padding: 5PX 5PX;
    }
}
/* 换行 */
.enter{margin-top:20PX}
.enter:before{content:''}
.right_down{
    text-align: right;
    line-height: 30px;
}

</style>
<style lang="scss">
.main-content.abnormal{
    .printPaper{
       .el-divider--horizontal {
            margin: 8px 0;
            background: 0 0;
            border-top: 1px dashed #18191a;
        }
    }
    .line2{
      border-top: 0px;
    td,th{
        .right{
            text-align: right;
        }
        font-weight: normal;
        padding: 15PX 5PX;
    }
  }
  .noBorder{
    border: unset;
  }
}
/* 标题 */
.paper-header{text-align: center;line-height: 35PX;}
.paper-header>h3{font-weight:600;margin:0}
.paper-content{
    .firstLine{
        text-align: left;
    }
 .name{
    display: inline-block;
    }
 .downLine{
     border-bottom: solid 1px;
 }
}
p {
    text-indent: 2em;
    text-align: left;
    line-height: 30px;
    span{
        border-bottom: solid 1px;
    }
}
.mr20 {
  margin-right: 20px;
}
@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;
    }
  }
  .td{
      text-align: right;
  }
/* 浏览区域 */
  .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,.paper-table th{
    .right{
        text-align: right;
    }
    font-weight: normal;
    padding: 5PX 5PX;
    }
/* 标题 */
.paper-header{text-align: center; line-height: 35PX;}
.paper-header>h3{font-weight:600;margin:0}
/* 换行 */
.enter{margin-top:20PX}
.enter:before{content:''}
.right_down{
    text-align: right;
    line-height: 30px;
}
.paper{
    .printPaper{
        width:630PX;
        min-height:891PX;
        background:white;
        border:1PX solid #ccc;
        padding:40PX 50PX;
       .el-divider--horizontal { //虚线
            margin: 8px 0;
            background: 0 0;
            border-top: 1px dashed #18191a;
        }
    }
}
.line2{
      border-top: 0px;
    td,th{
        .right{
            text-align: right;
        }
        font-weight: normal;
        padding: 15PX 5PX;
    }
    .mr20 {
        margin-right: 20px;
    }
}
  .paper-content{
 .firstLine{
        text-align: left;
    }
 .name{
    display: inline-block;
    }
 .downLine{
     border-bottom: solid 1px;
 }
}
p {
    text-indent: 2em;
    text-align: left;
    line-height: 30px; //行间距
    span{
        border-bottom: solid 1px;
    }
}
.mr20 {
  margin-right: 20px;
}
.printPaper{
        min-height:891PX;
        background:white;
        padding:40PX 50PX;
       .el-divider--horizontal {
            margin: 8px 0;
            background: 0 0;
            border-top: 1px dashed #18191a;
        }
    }
@page {
    size: auto;
    margin: 0mm;
}
}
</style>
