<!-- 采购申请单 -->
<template>
  <Modal
    v-model="modal"
    width="800"
    :transfer="false"
    @on-cancel="cancel"
    class-name="vertical-center-modal"
  >
    <!--表单内容-->
    <div class="content">
      <!-- 标题 -->
      <div class="title" style="padding: 10px 0;text-align: center;font-size: 20px;font-weight: bold;">采购申请单</div>
      <!-- 头部信息 -->
      <div class="info" style="padding: 10px 0;">
        <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;">
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购单号：</div>
            <div class="value" style="flex: 1;">{{ formData.applyBillNo }}</div>
          </div>
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">采购部门：</div>
            <div class="value" style="flex: 1;">{{ formData.purchaseDepartment }}</div>
          </div>
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购日期：</div>
            <div class="value" style="flex: 1;">{{ formData.applyDate }}</div>
          </div>
        </div>
        <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;">
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购部门：</div>
            <div class="value" style="flex: 1;">{{ formData.applyDepartment }}</div>
          </div>
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购人：</div>
            <div class="value" style="flex: 1;">{{ formData.applyUser }}</div>
          </div>
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购类型：</div>
            <div class="value" style="flex: 1;">
              {{ formData.applyType }}
            </div>
          </div>
        </div>
        <div class="row" style="display: flex;justify-content: space-between;">
          <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
            <div class="label" style="width: 70px;">申购说明</div>
            <div class="value" style="flex: 1;">
              {{ formData.applyRemark }}
            </div>
          </div>
        </div>
      </div>
      <!-- 副标题 -->
      <div class="sub" style="margin-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
        <span class="sub-title" style="margin-top: 10px;font-size: 18px;font-weight: bold;">申购明细</span>
      </div>
      <!-- 申购明细表格 -->
      <div class="table">
        <table style="border-collapse:collapse;border:none;width: 100%;">
          <tr>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料编码</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料名称</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料规格</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">单位</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">请购数量</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">用途</th>
          </tr>
          <tr v-for="(item, index) in formData.applyDetails" :key="index">

            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.materialCode }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.materialName }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.spec }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">米</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.quantity }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.use }}</td>
          </tr>
        </table>
      </div>
      <!-- 副标题 -->
      <div class="sub" style="margin-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
        <span class="sub-title" style="margin-top: 20px;font-size: 18px;font-weight: bold;">审批意见</span>
      </div>
      <!-- 审批意见表格 -->
      <div class="table">
        <table style="border-collapse:collapse;border:none;width: 100%;">
          <tr>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批节点</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批人</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批时间</th>
            <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批意见</th>
          </tr>
          <tr v-for="(item, index) in formData.checkRecords" :key="index">
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.node }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.checkUser }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.checkDate }}</td>
            <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.remark }}</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer" slot="footer">
      <Button @click="print" class="btn" type="primary">打印</Button>
      <Button @click="cancel" class="btn">关闭</Button>
    </div>
    <vue-easy-print ref="print">
      <template slot-scope="func">
        <div class="content">
          <!-- 标题 -->
          <div class="title" style="padding: 10px 0;text-align: center;font-size: 20px;font-weight: bold;">采购申请单</div>
          <!-- 头部信息 -->
          <div class="info" style="padding: 10px 0;">
            <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;">
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购单号：</div>
                <div class="value" style="flex: 1;">{{ formData.applyBillNo }}</div>
              </div>
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">采购部门：</div>
                <div class="value" style="flex: 1;">{{ formData.purchaseDepartment }}</div>
              </div>
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购日期：</div>
                <div class="value" style="flex: 1;">{{ formData.applyDate }}</div>
              </div>
            </div>
            <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;">
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购部门：</div>
                <div class="value" style="flex: 1;">{{ formData.applyDepartment }}</div>
              </div>
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购人：</div>
                <div class="value" style="flex: 1;">{{ formData.applyUser }}</div>
              </div>
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购类型：</div>
                <div class="value" style="flex: 1;">
                  {{ formData.applyType }}
                </div>
              </div>
            </div>
            <div class="row" style="display: flex;justify-content: space-between;">
              <div class="col" style="flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;">申购说明</div>
                <div class="value" style="flex: 1;">
                  {{ formData.applyRemark }}
                </div>
              </div>
            </div>
          </div>
          <!-- 副标题 -->
          <div class="sub" style="margin-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
            <span class="sub-title" style="margin-top: 10px;font-size: 18px;font-weight: bold;">申购明细</span>
          </div>
          <!-- 申购明细表格 -->
          <div class="table">
            <table style="border-collapse:collapse;border:none;width: 100%;">
              <tr>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料编码</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料名称</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料规格</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">单位</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">请购数量</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">用途</th>
              </tr>
              <tr v-for="(item, index) in formData.applyDetails" :key="index">

                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.materialCode }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.materialName }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.spec }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">米</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.quantity }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.use }}</td>
              </tr>
            </table>
          </div>
          <!-- 副标题 -->
          <div class="sub" style="margin-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
            <span class="sub-title" style="margin-top: 20px;font-size: 18px;font-weight: bold;">审批意见</span>
          </div>
          <!-- 审批意见表格 -->
          <div class="table">
            <table style="border-collapse:collapse;border:none;width: 100%;">
              <tr>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批节点</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批人</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批时间</th>
                <th style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">审批意见</th>
              </tr>
              <tr v-for="(item, index) in formData.checkRecords" :key="index">
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.node }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.checkUser }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.checkDate }}</td>
                <td style="padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ item.remark }}</td>
              </tr>
            </table>
          </div>
        </div>
      </template>
    </vue-easy-print>
  </Modal>
</template>

<script>
import VueEasyPrint from 'vue-easy-print'
export default {
  name: 'index',
  data () {
    return {
      modal: false,
      formData: {}
    }
  },
  components: {
    VueEasyPrint
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
        this.$set(this.formData, 'applyPurType', 0)
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
    }
  },
  methods: {
    cancel () {
      this.formData = {}
      this.materialList = []
      this.modal = false
    },
    // 打印
    print () {
      this.$refs.print.print()
    }
  },
  beforeUpdate () {
    if (this.modal) {
      this.formData = { ...this.data }
    }
  }
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0; /*对垂直流动条有效*/
}
.content {
  padding: 0 40px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  .title {
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .info {
    padding: 10px 0;
    .row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      display: flex;
      justify-content: space-between;
      .col {
        flex: 1;
        display: flex;
        align-items: flex-start;
        .label {
          width: 70px;
        }
        .value {
          flex: 1;
        }
      }
    }
  }
  .sub {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sub-title {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .table {
    table {
      border-collapse:collapse;
      border:none;
      width: 100%;
      tr {
        td,th {
          padding: 5px;
          text-align: center;
          border:solid #dcdee2 1px;
          position: relative;
          font-size: 12px;
          th {
            background-color: #eeeeee;
          }
          .del {
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            border-radius: 50%;
            background-color: red;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 19px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

///deep/ .ivu-modal-body {
//  min-width: 750px;
//  height: 80vh;
//  overflow: auto;
//}
</style>
