<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="打印完成"
  >
    <a-card :bordered="false" :class="{ abcdefg: true }">
      <div class="no-print" style="text-align: right">
        <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
      </div>
      <section ref="print" id="printContent" class="abcdefg">
        <div style="text-align: center">
          <p style="font-size: 24px; font-weight: 800">领料单</p>
        </div>
        <div style="height: 1px; border-top: 1px solid #000000; margin-bottom: 30px"></div>
        <!--签字-->
        <a-table
          v-if="!loading"
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :scroll="{ x: true }"
          :indentSize="30"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :pagination="false"
          :defaultExpandAllRows="true"
        >
        </a-table>
        <a-row style="margin-top: 20px">
          <a-col :span="12">
            <span> &nbsp;&nbsp;&nbsp;承接人 :&nbsp;{{ this.workMan }} </span>
          </a-col>
          <a-col :span="12">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单日期 :&nbsp;{{ this.workOrderDate }}</span>
          </a-col>
        </a-row>
      </section>
    </a-card>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue, formatDate, filterObj } from '@/utils/util'

export default {
  name: 'PrintModalOrder',
  components: {},
  props: {},
  data() {
    return {
      title: '领料单',
      width: 800,
      visible: false,
      workMan: '',
      workOrderDate: '',
      // 表头
      columns: [
        {
          title: '物料编号',
          align: 'center',
          dataIndex: 'partNumber',
        },
        {
          title: '品名',
          align: 'center',
          dataIndex: 'productName',
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'type',
        },
        {
          title: '规格',
          align: 'center',
          dataIndex: 'spec',
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'operNumber',
        },
      ],
      dataSource: [],
      confirmLoading: false,
      loading: false,
      url: {
        list: '/work_order/tblWorkOrder/listOrderByMainIdNoPage',
      },
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      /* 筛选参数 */
      filters: {},
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      model: {},
    }
  },
  created() {},
  methods: {
    open(record) {
      this.visible = true
      this.loading = true
      this.queryParam['id'] = record.id
      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result
            this.workMan = res.result[0].workMan
            this.workOrderDate = res.result[0].workOrderDate
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      return filterObj(param)
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns.forEach(function (value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      that.visible = false
      that.$emit('ok')
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
  color: #000000 !important;
  -webkit-tap-highlight-color: #000000 !important;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

.abcdefg .ant-card-body {
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 1%;
  border: 0px solid black;
  min-width: 800px;
  color: #000000 !important;
}
.explain {
  text-align: left;
  margin-left: 50px;
  color: #000000 !important;
}
.explain .ant-input,
.sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}
.explain div {
  margin-bottom: 10px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>