<template>
  <el-dialog
    title="文书"
    :visible.sync="visible"
    width="1200px"
    top="153px"
  >
    <div v-if="visible">
      <el-tabs ref="docel" type="border-card" :default-active-first="true" @tab-click="handleClick">
        <el-tab-pane label="列入严重违法失信自然人名单决定书" name="列入严重违法失信自然人名单决定书" class="doc-preview">
          <div class="title"><span v-if="!data.incAbnDecisionMap?.areaName" class="empty-input">&nbsp;</span>{{ data.incAbnDecisionMap?.areaName }}市场监督管理局</div>
          <div class="title">列入严重违法失信自然人名单决定书</div>
          <div class="writsNo">{{ data.incAbnDecisionMap?.writsNo }}</div>
          <div class="entName">{{ data.incAbnDecisionMap?.entName }}:</div>
          <div class="content">
            <div v-for="item in ((data.incAbnDecisionMap?.content)||'').split('\n')" :key="item" contenteditable>
              {{ item }}
            </div>
          </div>
          <div class="footer">
            <div class="decOrg" contenteditable>（<span v-if="!data.incAbnDecisionMap?.areaName" class="empty-input" />{{ data.incAbnDecisionMap?.areaName }}市场监督管理局公章）</div>
            <div class="date">{{ parseTime(data.incAbnDecisionMap?.abnTime, '{y}年{m}月{d}日') }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="送达回证" name="送达回证" class="doc-preview">
          <div class="title">送达回证</div>
          <table border="1" cellspacing="0">
            <tr>
              <td colspan="1">送达地点</td>
              <td colspan="3">&nbsp;</td>
              <td colspan="1">送达方式</td>
              <td colspan="1">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="1">收件人</td>
              <td colspan="2">
                <div style="text-align: right;">（签名或者盖章）</div>
                <div class="date" style="text-align: right;"><span>年</span><span>月</span><span>日</span></div>
              </td>
              <td colspan="1">见证人</td>
              <td colspan="2">
                <div style="text-align: right;">（签名或者盖章）</div>
                <div class="date" style="text-align: right;"><span>年</span><span>月</span><span>日</span></div>
              </td>
            </tr>
            <tr>
              <td colspan="1">送达人</td>
              <td colspan="5">
                <div style="display: flex;justify-content: space-between;">
                  <div style="text-align: right;">（签名或者盖章）</div>
                  <div class="date" style="text-align: right;"><span>年</span><span>月</span><span>日</span></div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">备注</td>
              <td colspan="5">&nbsp;</td>
            </tr>
          </table>
          <div class="content">本文书一式两份，一份送达，一份归档。</div>
        </el-tab-pane>
        <el-tab-pane label="列入严重违法失信自然人名单审批表" name="列入严重违法失信自然人名单审批表" class="doc-preview">
          <div class="title">列入严重违法失信自然人名单审批表</div>
          <table border="1" cellspacing="0">
            <tr>
              <td colspan="1">自然人姓名</td>
              <td colspan="3">{{ data.entname || data.incAbnDecisionMap?.entName || '' }}</td>
            </tr>
            <tr>
              <td colspan="1">身份证号</td>
              <td colspan="3">{{ data.cerno || '' }}</td>
            </tr>
            <tr>
              <td colspan="1">事实和理由</td>
              <td colspan="3">
                <div class="td-content">
                  {{ data.lostCreditExplain || data.incAbnDecisionMap?.content || '' }}
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">初审意见</td>
              <td colspan="3">
                <div v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'handle' || item.opinionType === '经办'})" :key="item.opinionId" class="option">
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, '{y}年{m}月{d}日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">审核意见</td>
              <td colspan="3">
                <div v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'examine' || item.opinionType === '审核'})" :key="item.opinionId" class="option">
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, '{y}年{m}月{d}日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">审批意见</td>
              <td colspan="3">
                <div v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'approve' || item.opinionType === '审批'})" :key="item.opinionId" class="option">
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, '{y}年{m}月{d}日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">备注</td>
              <td colspan="3">
                <div class="td-content">{{ data.remark || '' }}</div>
              </td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
      <div v-if="name === '列入严重违法失信自然人名单决定书'" style="font-weight: bold; font-size: 22px; margin-top: 10px">正文内容可编辑</div>
    </div>
    <div slot="footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      <el-button type="primary" @click="downloadDoc">打印</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { printElement, parseTime } from '@/utils'
import { asyncGetOptionsLabelByBaseCode } from '@/plugins/EasyComponent/optionsManager'
export default {
  data() {
    return {
      parseTime,
      visible: false,
      data: {},
      name: '列入严重违法失信自然人名单审批表'
    }
  },
  methods: {
    handleClick(tab, event) {
      this.name = tab.name
    },
    open(data) {
      this.visible = true
      this.data = data
      if (data.serillrea) {
        asyncGetOptionsLabelByBaseCode(('CD73'), data.serillrea).then((label) => {
          this.data.serillrea = label
        })
      }
    },
    downloadDoc() {
      this.visible = false
      printElement(this.$refs.docel.$el.children[1], {
        '.doc-preview': {
          height: 'unset!important'
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.doc-preview{
  height: calc(100vh - 400px);
  overflow: auto;
  font-size: 22px;
  line-height: 48px;
  padding: 0 120px;
  cursor: default;
  *[contenteditable]{
    cursor: text;
  }
  .title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
  }
  .writsNo{
    font-size: 22px;
    text-align: center;
  }
  .content{
    text-indent: 44px;
    margin-bottom: 80px;
  }
  .footer{
    text-align: right;
  }
  .empty-input{
    display: inline-block;
    width: 120px;
    border-bottom: 2px solid #000;
    position: relative;
    bottom: -2px;
    margin-right: 2px;
  }
  table{
    width: 100%;
    table-layout: fixed;
    font-size: 22px;
    line-height: 48px;
    td{
      text-align: center;
      padding: 10px 15px;
      .td-content{
        text-align: left;
      }
      .date{
        text-align: right;
        span{
          margin: 0 15px;
        }
      }
      .option{
        text-align: left;
        display: flex;
        line-height: 24px;
        .opinionContent{
          margin-right: 10px;
        }
        .handler{
          margin-left: auto;
          margin-right: 20px;
          flex-shrink: 0;
        }
        .laupTime{
          flex-shrink: 0;
        }
        &+.option{
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
