<template>
  <div class="printwrap">
    <Modal v-model="isShow" width='70' title="打印" @on-ok='handlePrint'>
      <div id='printmodal' class='print' v-if="chukuType==='领用'">
        <div class='printtitle'>苏州市河道管理处物资领用审批表</div>
        <div class="printtop">
          <span>业务科室:{{form.jieyongbumen}}</span>
          <span>编号:</span>
        </div>
        <table width='100%'>
          <tr>
            <td>物资名称</td>
            <td>领用时间</td>
            <td>数量</td>
            <td>规格型号</td>
            <td>业务科室</td>
            <td>备注</td>
          </tr>
          <tr v-for="item in mingxiList">
            <td>{{item.zichanmingcheng}}</td>
            <td>{{form.chukushijian}}</td>
            <td>{{item.jieyongshuliang}}</td>
            <td>{{item.guigexinghao}}</td>
            <td>{{form.jieyongbumen}}</td>
            <td>{{form.beizhu}}</td>
          </tr>

          <tr class="printbottom">
            <td colspan='3' rowspan='3'>
              <p>经办人</p>
              <p>
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </p>
            </td>
            <td colspan='3' rowspan='3'>
              <p>综合科意见</p>
              <p><span>年</span>
                <span>月</span>
                <span>日</span>
              </p>
            </td>
          </tr>
        </table>
      </div>
      <div id='printmodal1' class='print' v-if="chukuType==='处置'">
        <div class='printtitle'>苏州市河道管理处报废申请单</div>
        <div class="printtop">
          <span>上报科室:{{form.jieyongbumen}}</span>
          <span>上报时间:{{form.chukushijian}}</span>
        </div>
        <table width='100%'>
          <tr>
            <td>物资名称</td>
            <td>固定资产编号</td>
            <td>数量</td>
            <td>报废原因</td>
            <td>备注</td>
          </tr>
          <tr v-for="item in mingxiList">
            <td>{{item.zichanmingcheng}}</td>
            <td>{{form.gudingzichanbianhao}}</td>
            <td>{{item.jieyongshuliang}}</td>
            <td>{{form.baofeiyuanyin}}</td>
            <td>{{form.beizhu}}</td>
          </tr>

          <tr class="printbottom">
            <td colspan='3' rowspan='3'>
              <p>申请科室</p>
              <p>
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </p>
            </td>
            <td colspan='2' rowspan='2'>
              <p>申请科室分管领导</p>
              <p><span>年</span>
                <span>月</span>
                <span>日</span>
              </p>
            </td>
          </tr>
        </table>
      </div>

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

<script>
  import {
    show
  } from "@/api/system/baseForm.js"
  import {
    Message
  } from 'element-ui'
  export default {

    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        chukuType:'',
        tableName: 'outbounds',
        form: {
          chukushijian: "",
          chukuleixing: '',
          jieyongcangku: "",
          jieyongbumen: '',
          jieyongren: '',
          jilurenyuan: '',
          beizhu: '',
          chukumingxi: ''
        },
        mingxiList: []

      }
    },
    created() {},
    methods: {

      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.form = res
        this.mingxiList = res.id_outbounds_items_outbounds_id_relation
      },
      handlePrint() {
        if(this.chukuType=='领用'){
          this.$Print('#printmodal');
        }else if(this.chukuType=='处置'){
          this.$Print('#printmodal1');
        }

      },
      submit() {

      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'print') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.mingxiList = []
        }
      }
    }

  }
</script>

<style scoped>
  .print {}

  .printtitle {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

  .printtop {
    display: flex;
    justify-content: space-between;
    font-size: 18px
  }

  .print table {
    font-size: 18px;
    border-collapse: collapse;
    margin-top: 20px;
  }

  .print table tr {}

  .print table td {
    padding: 10px;
    border: 1px solid #ddd;
  }

  .printbottom {}

  .printbottom td {}

  .printbottom td p {
    text-align: left;
  }

  .printbottom td>p:first-child+p {
    padding-top: 80px;
    text-align: right;
  }
  .printbottom td p span{
    margin-left:30px;
    display: inline-block;
  }
</style>
