<template>
  <div class="print-content" v-show="visible" style="background-color: #fff">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button type="primary" v-print="'#print-container3'" :disabled="disabled">打印</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
        </span>
      </a-col>
    </a-row>
    <div style="position: relative;">
      <div class="container" style="position: absolute; top: 50px; left: 50px;" id="print-container2">
        <div class="text-center">
          <h3>
            费用报销单
          </h3>
        </div>
        <div class="row text-center">
          <div class="col-md-4 text-left">报销部门：</div>
          <div class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;填</div>
          <div class="col-md-4 text-right">单据及附件共：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</div>

        </div>
        <table class="gridtable content">
          <tbody>
            <tr>
              <td width="37%">用途</td>
              <td width="25%">金额（元）</td>
              <td width="5%" rowspan="3">备注</td>
              <td width="33%" rowspan="3" colspan="3"></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td rowspan="3">领导审批</td>
              <td rowspan="3" colspan="3"></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>合计</td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2" width="50%">金额大写：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td colspan="2" width="18%">原借款：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</td>
              <td colspan="2" width="32%">应退余款：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</td>
            </tr>
          </tbody>

        </table>

        <div class="row">
          <div class="col-md-3">会计主管：</div>
          <div class="col-md-2">复核：</div>
          <div class="col-md-2">出纳：</div>
          <div class="col-md-2">报销人：</div>
          <div class="col-md-2">领款人：</div>
        </div>
      </div>
      <div class="container" style="position: absolute; top: 50px; left: 50px;" id="print-container3">
        <div class="text-center">
          <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
        </div>
        <div class="row text-center">
          <div class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;{{ record.deptName }}</div>
          <div class="col-md-4">{{ formatDateCh(new Date()) }}</div>
          <div class="col-md-4 text-right">1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

        </div>
        <table class="gridtable1 content">
          <tbody>
            <tr>
              <td width="37%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td width="25%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td width="5%" rowspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td width="33%" rowspan="3" colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
            <tr>
              <td>【{{ record.deptName }}】项目{{ itemMap[record.item] }}</td>
              <td>{{ record.money }}</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td rowspan="3"></td>
              <td rowspan="3" colspan="3"></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>{{ record.money }}</td>
            </tr>
            <tr>
              <td colspan="2" width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ transformNumberIntoCHN(record.money) }}</td>
              <td colspan="2" width="18%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td colspan="2" width="32%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
          </tbody>

        </table>

        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-2"></div>
          <div class="col-md-2"></div>
          <div class="col-md-2"></div>
          <div class="col-md-2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchDept } from '@/api/upms/dept'
import { formatDate, transformNumberIntoCHN } from '@/utils/util'

export default {
  name: 'BasePurchaseOrderPrint',
  components: { },
  data () {
    return {
      visible: false,
      disabled: true,
      record: {},
      user: this.$store.getters.userInfo,
      itemMap: {}
      // 下拉框map
    }
  },
  props: {},
  created () {
    // 下拉框map
    this.itemMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REIMBURSE_ITEM)
  },
  computed: {
  },
  methods: {
    base (record) {
      this.disabled = true
      this.visible = true
      fetchDept({ deptId: this.user.projectId }).then(res => {
        record.deptName = res.data.name
        this.record = record
        this.disabled = false
      })
    },
    formatDateEn (value) {
      if (!value) {
        return ''
      }
      return formatDate(new Date(value), 'yyyy-MM-dd')
    },
    transformNumberIntoCHN (value) {
      if (!value) {
        return ''
      }
      return transformNumberIntoCHN(value)
    },
    formatDateCh (value) {
      if (!value) {
        return ''
      }
      return formatDate(new Date(value), 'yyyy年MM月dd日')
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok', values)
    }

  }
}
</script>
<style media=print>

  /* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
  .page {
    page-break-after: always;
  }
</style>
<style>
  .print-content{
    width: 1123px;
  }

  #print-container2 * {
    font-family: SimHei !important;
    color: #333447;
    line-height: 1.5;
  }

  .container {
    width: 95%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-center {
    text-align: center;
  }

  table.gridtable {
    width: 100%;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }

  table.gridtable1 {
    border: none;
  }

  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }

  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }

  table.gridtable1 td {
    padding: 8px;
    border: none;
    background-color: #ffffff;
    background-color:transparent;
  }

  table.content td {
    height: 50px;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .container:before,
  .container:after,
  .row:before, .row:after {
    display: table;
    content: " ";
  }

  .container:after, .row:after {
    clear: both;
  }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-11 {
    width: 91.66666667%;
  }

  .col-md-10 {
    width: 83.33333333%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-8 {
    width: 66.66666667%;
  }

  .col-md-7 {
    width: 58.33333333%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-5 {
    width: 41.66666667%;
  }

  .col-md-4 {
    width: 33.33333333%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-2 {
    width: 16.66666667%;
  }

  .col-md-1 {
    width: 8.33333333%;
  }
</style>
