<template>
  <div class="app-container">
    <!-- 按钮操作栏 -->
    <el-row :gutter="10" class="mb10" />
    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="68px"
    >
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="送货单号" prop="deliveryOrderNo">
            <el-input
              v-model="queryParams.deliveryOrderNo"
              disabled
              clearable
              placeholder="请输入送货单号"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商" prop="supplierCode">
            <el-input
              v-model="queryParams.supplierCode"
              disabled
              clearable
              placeholder="请输入供应商"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="通知日期" prop="noticeDate">
            <el-input
              v-model="queryParams.noticeDate"
              disabled
              clearable
              placeholder="请输入通知日期"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="queryParams.remark"
              disabled
              clearable
              placeholder="请输入备注"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="创建时间" prop="createTime">
            <el-input
              v-model="queryParams.createTime"
              disabled
              clearable
              placeholder="请输入创建时间"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18" class="text-right">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-upload2"
            :loading="printLoading"
            @click="handleUploadFile"
          >附件</el-button>
          <el-button
            v-hasPermi="['wms:label-master-supplier:query']"
            type="primary"
            plain
            size="mini"
            icon="el-icon-printer"
            @click="handlePrintSupplier"
          >标签打印</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="list"
      border
      @selection-change="tableSelected"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column
        type="selection"
        width="55"
        fixed="left"
        align="center"
      />
      <el-table-column
        label="批号"
        align="center"
        prop="deliverBatch"
        width="150"
        fixed="left"
        show-overflow-tooltip
      />
      <el-table-column
        label="标签码"
        align="center"
        prop="qrCode"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="materialName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="规格"
        align="center"
        prop="size"
        show-overflow-tooltip
      />
      <el-table-column
        label="供应商"
        align="center"
        prop="supplierName"
        width="130"
        show-overflow-tooltip
      />
      <el-table-column
        label="单位"
        align="center"
        prop="unitCode"
      />
      <el-table-column
        label="数量"
        align="center"
        prop="qty"
        width="120"
      />
      <el-table-column
        label="生产日期"
        align="center"
        prop="produceDate"
        width="120"
      />
      <el-table-column
        label="有效期至"
        align="center"
        prop="validityDate"
        width="120"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="120"
      />
    </el-table>
    <!-- 分页组件 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getDetails"
    /> -->
    <!-- 单据打印 -->
    <IssuePrinit ref="issuePrinit" />
    <!-- 附件上传 -->
    <NoticeUploadFile ref="noticeUploadFile" />

  </div>
</template>

<script>
import { getSupplierPrintData, getSupplierMasterData, getSupplierFile } from '@/api/wms/orders/deliveryNotice'
import IssuePrinit from '../../output/productionIssue/issueDetails/IssuePrinit.vue'
const AccessTokenKey = 'ACCESS_TOKEN'
// 附件
import NoticeUploadFile from './NoticeUploadFile.vue'

export default {
  name: 'NoticeDetail',
  components: {
    IssuePrinit,
    NoticeUploadFile
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 附件遮罩层
      printLoading: false,
      // 选中的数据
      // 总条数
      total: 0,
      // 列表
      list: [],
      // 选中的列表
      currentRows: [],
      // 报表打印参数
      tokens: '',
      baseUrl: '',
      reportId: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        deliveryOrderNo: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    this.queryParams.deliveryOrderNo = this.$route.query.deliveryOrderNo
    this.tokens = localStorage.getItem(AccessTokenKey)
    this.baseUrl =
    this.reportId = this.$route.meta.reportId
    this.getList()
  },
  methods: {
    getList() {
      getSupplierPrintData(this.queryParams).then(res => {
        this.list = res.data
      })
      getSupplierMasterData(this.queryParams).then(res => {
        this.queryParams = res.data.list[0]
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        detailErpId: undefined,
        inStockId: undefined,
        erpInStockOrderId: undefined,
        erpInStockOrderNo: undefined,
        detailNumber: undefined,
        materialNo: undefined,
        materialName: undefined,
        materialQty: undefined,
        materialModels: undefined,
        unitName: undefined,
        shouldReceiveAmount: undefined,
        receiveQty: undefined,
        returnQty: undefined,
        materialStatus: undefined,
        supplierCode: undefined,
        supplierName: undefined,
        batch: undefined,
        price: undefined,
        taxPrice: undefined,
        allAmount: undefined,
        taxRate: undefined,
        comment: undefined,
        deliveryTime: undefined,
        erpMark: undefined
      }
      this.resetForm('form')
    },
    // 标签打印
    handlePrintSupplier() {
      this.ids = this.ids !== undefined ? this.ids : this.queryParams.deliveryOrderNo
      const src = `${this.baseUrl}/jmreport/view/${this.reportId}?token=${this.tokens}&batchNumber=${this.ids}`
      this.$refs.issuePrinit.dialogVisible = true
      this.$refs.issuePrinit.title = '单据打印'
      this.$refs.issuePrinit.src = src
    },
    // 表格选中
    tableSelected(val) {
      this.currentRows = val
      const list = this.currentRows.map(item => item.batchNumber)
      this.ids = list.join(',')
    },
    select(selection, row) {
      if (selection.length > 1) {
        const del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    // 附件
    async handleUploadFile() {
      const params = {
        id: this.queryParams.id
      }
      const { data } = (await getSupplierFile(params))
      this.$refs.noticeUploadFile.fileList = data
      // await getSupplierFile(params).then(res => {
      //   this.$refs.noticeUploadFile.fileList = res.data
      // })
      this.$refs.noticeUploadFile.deliveryId = this.queryParams.id
      this.$refs.noticeUploadFile.visible = true
    }
  }
}
</script>

