<template>
  <div class="print-content" v-show="visible">
    <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-container'" :disabled="disabled">打印</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
        </span>
      </a-col>
    </a-row>
    <div class="container" id="print-container">
      <div class="text-center">
        <h3>
          设备物资委托国内采购计划审批表
        </h3>
      </div>
      <div class="row text-right" style="margin-right: 10px;">
        {{ formatDateEn(new Date()) }}
      </div>

      <table class="gridtable content">
        <tbody>
          <tr>
            <td>分公司名称</td>
            <td>{{ record.companyName }}</td>
            <td></td>
            <td>项目名称</td>
            <td>{{ record.projectName }}</td>
          </tr>
          <tr>
            <td>设备物资类别</td>
            <td>{{ record.typeName }}</td>
            <td>年度采购批次</td>
            <td></td>
            <td>计划编号：{{ record.billNo }}</td>
          </tr>
          <tr>
            <td>年初预算金额:</td>
            <td></td>
            <td>本次预算金额:</td>
            <td></td>
            <td>累计金额:</td>
          </tr>
          <tr>
            <td>项目负责人意见</td>
            <td colspan="4"></td>
          </tr>
          <tr>
            <td>分公司意见</td>
            <td colspan="4"></td>
          </tr>
          <tr>
            <td>非洲总部意见</td>
            <td colspan="4"></td>
          </tr>
          <tr>
            <td>分管领导意见</td>
            <td colspan="4"></td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="4">采购计划见附件</td>
          </tr>
        </tbody>

      </table>
      <div class="page"></div>
      <table class="gridtable list">
        <tbody>
          <tr >
            <td colspan="6" style="height:90px;text-align:center;font-size: 20px;">Hitch ABB</br>{{ record.projectName }}项目采购计划单</td>
          </tr>
          <tr>
            <td>编号</td>
            <td colspan="2">{{ record.billNo }}</td>
            <td>日期</td>
            <td colspan="2">{{ formatDateCh(new Date()) }}</td>
          </tr>
          <tr>
            <td>类别</td>
            <td colspan="2">{{ record.typeName }}</td>
            <td>项目</td>
            <td colspan="2">{{ record.projectName }}</td>
          </tr>
          <tr>
            <td>呈报</td>
            <td colspan="5">{{ record.reportTypeName }}</td>
          </tr>
          <tr>
            <td>抄送</td>
            <td colspan="5"></td>
          </tr>
          <tr>
            <td>事项</td>
            <td colspan="2"></td>
            <td>单号</td>
            <td colspan="2">{{ record.billNo }}</td>
          </tr>
          <tr>
            <td colspan="6" style="height:90px;">设备物资综述：</td>
          </tr>
          <tr>
            <td>序号</td>
            <td>名称</td>
            <td>型号/件号</td>
            <td>单位</td>
            <td>数量</td>
            <td>备注</td>
          </tr>
          <tr :key="index" v-for="(item,index) in planList">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.specs }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.remark }}</td>
          </tr>
          <tr>
            <td colspan="6">特殊情况说明（如有）：</td>
          </tr>
        </tbody>

      </table>
      <div class="row">
        <div class="col-md-6">项目部负责人签字：</div>
        <div class="col-md-6">设备负责人签字：</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryPurchasePlanList } from '@/api/purchase/purchase-plan-list'
import { formatDate } from '@/utils/util'

export default {
  name: 'BasePurchasePlanPrint',
  components: { },
  data () {
    return {
      visible: false,
      disabled: true,
      record: {},
      planList: [],
      // 下拉框map
      typeMap: {},
      reportTypeMap: {},
      periodTypeMap: {}

    }
  },
  props: {},
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_TYPE)
    this.reportTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPORT_RANK)
    this.periodTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_PERIOD_TYPE)
  },
  computed: {
  },
  methods: {
    base (record) {
      this.disabled = true
      this.visible = true
      this.record = record
      this.record.typeName = this.typeMap[this.record.type]
      this.planList = []
      queryPurchasePlanList({ purchasePlanId: record.id }).then(res => {
        this.planList = res.data
        this.disabled = false
      })
    },
    formatDateEn (value) {
      console.log(value)
      return formatDate(new Date(value), 'yyyy/MM/dd')
    },
    formatDateCh (value) {
      return formatDate(new Date(value), 'yyyy年MM月dd日')
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok', values)
    }

  }
}
</script>
<style media=print>
  /* 应用这个样式的在打印时隐藏 */
  .noPrint {
    display: none;
  }

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

  #print-container * {
    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.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.content td {
    height: 95px;
  }

  .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>
