<template>
  <el-dialog
    v-dialogDrag
    title="退料"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >
    <!-- 搜索栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="68px"
      :disabled="searching"
      @submit.native.prevent
    >
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="箱号" prop="id">
            <el-input
              ref="materialNos"
              v-model="queryParams.id"
              placeholder="请输入/扫入箱号"
              clearable
              @keyup.enter.native="getCurrentMaterial"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="数量" prop="returnQty">
            <el-input-number
              v-model="queryParams.returnQty"
              :min="0"
              :max="queryParams.maxAmount"
              style="width: 100%"
              label="请输入退货数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="退货原因" prop="remark">
            <el-input
              v-model="queryParams.remark"
              style="width: 100%"
              label="请输入退货原因"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="退货类型" prop="returnType">
            <DictSelect v-model="queryParams.returnType" placeholder="请选择退货类型" dict-type="SALE_RETURN_TYPE" />
          </el-form-item>
        </el-col>
        <el-col :span="4" class="text-right">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            :disabled="queryParams.returnQty <=0"
            @click="handleAdd"
          >添加</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-descriptions
      v-if="Object.keys(currentData).length > 0"
      size="mini"
      :column="4"
      border
      class="mb10"
      :label-style="{
        width: '80px'
      }"
    >
      <el-descriptions-item label="箱号">
        {{ currentData.boxNo }}
      </el-descriptions-item>
      <el-descriptions-item label="物料编码">
        {{ currentData.materialNo }}
      </el-descriptions-item>
      <el-descriptions-item label="物料名称">
        {{ currentData.materialName }}
      </el-descriptions-item>
      <el-descriptions-item label="销售订单">
        {{ currentData.erpOrderNo }}
      </el-descriptions-item>
      <el-descriptions-item label="出货单号">
        {{ currentData.saleOutNo }}
      </el-descriptions-item>
      <el-descriptions-item label="发货数量">
        {{ currentData.sendQty }}
      </el-descriptions-item>
      <el-descriptions-item label="可退数量">
        {{ currentData.canReturnQty }}
      </el-descriptions-item>
      <el-descriptions-item label="本次退货数">
        {{ currentData.returnQty }}
      </el-descriptions-item>
      <el-descriptions-item label="客户名称">
        {{ currentData.customerName }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 列表数据 -->
    <el-table :data="list" border size="mini">
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        show-overflow-tooltip
      />
      <el-table-column
        label="箱号"
        align="center"
        prop="boxNo"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="materialName"
        show-overflow-tooltip
      />
      <el-table-column label="可退数" align="center" prop="canReturnQty" />
      <el-table-column label="本次退货数" align="center" prop="returnQty" />
      <el-table-column label="销售订单" align="center" prop="erpOrderNo" />
      <el-table-column label="出货单号" align="center" prop="saleOutNo" />
      <el-table-column label="发货数量" align="center" prop="sendQty" />
      <el-table-column label="客户名称" align="center" prop="customerName" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="160"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['wms:out-stock-detail:query']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            class="text-danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        v-hasPermi="['wms:other-out-sock:create']"
        :loading="buttonLoading"
        type="primary"
        :disabled="list.length === 0"
        @click="handleFinish"
      >完成</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getProductToReturn, createSaleReturnMaster } from '@/api/wms/output/salesReturn'

export default {
  components: {
  },
  data() {
    return {
      printData: [],
      printStyle: `
        <style>
          table {
            width:100%;
            margin: 0 auto;
            border: 1px solid #000000;
            border-collapse: collapse;
            page-break-after:always;
            font-size: 12px;
            table-layout: fixed;
          }

          th, td {
            border: 1px solid #000000;
          }
        </style>
      `,
      // 遮罩层
      loading: false,
      buttonLoading: false,
      // 总条数
      total: 0,
      // WMS 生产发料 主列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 签收按钮禁用
      signDisable: true,
      // 显示搜索条件
      showSearch: true,
      searching: false,
      currentData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        remark: '',
        type: 1,
        returnQty: 0,
        maxAmount: 0,
        departmentNo: undefined,
        recipient: undefined,
        outType: undefined,
        encodedEmployeeId: undefined,
        returnType: undefined,
        id: null
      },
      // form表单
      form: {}
    }
  },
  methods: {
    // 查询当前物料
    getCurrentMaterial() {
      if (!this.queryParams.id) {
        this.$modal.msgWarning('请先扫入或输入标签码！')
        return
      }
      this.searching = true
      const { id } = this.queryParams
      const params = {
        id
      }
      getProductToReturn(params).then(res => {
        const { data } = res
        if (data.length <= 0) {
          this.$modal.msgWarning('该标签码不存在')
        } else {
          this.queryParams.returnQty = data[0].returnQty
          this.queryParams.maxAmount = data[0].canReturnQty
          this.currentData = {
            ...res.data[0],
            ...this.queryParams
          }
        }
      }).finally(() => {
        this.searching = false
      })
    },
    // 删除
    handleDelete(row) {
      const { qrCode } = row
      const index = this.list.findIndex(item => item.qrCode === qrCode)
      if (index > -1) {
        this.list.splice(index, 1)
      }
    },
    // 添加
    handleAdd() {
      const { boxNo } = this.currentData
      const { remark, returnQty } = this.queryParams
      const isEmpty = remark !== '' && returnQty !== ''
      if (!isEmpty) {
        this.$modal.msgWarning('请输入退货原因/数量!')
        return
      }
      if (returnQty <= 0) {
        this.$modal.msgWarning('退货数量不能为0!')
        return
      }
      // 检测是否重复
      const some = this.list.some(i => i.boxNo === boxNo)
      if (some) {
        this.$modal.msgWarning('已存在相同批次的物料，请勿重新添加！')
        return
      }
      this.currentData = {
        ...this.currentData,
        ...this.queryParams
      }
      //   添加到list
      this.list.push(JSON.parse(JSON.stringify(this.currentData)))
      this.queryParams.id = undefined
      this.currentData = {}
      this.autoFocus()
    },
    dialogOpen() {
      this.autoFocus()
    },
    autoFocus() {
      this.$nextTick(() => {
        this.$refs.materialNos.focus()
      })
    },
    // 重置
    reset() {
      // this.list = []
      this.queryParams = {
        id: undefined,
        returnQty: undefined,
        remark: undefined
      }
      this.currentData = {}
      this.open = false
      this.resetForm('form')
    },
    // 取消操作
    cancel() {
      this.reset()
      this.open = false
    },
    // 完成
    handleFinish() {
      try {
        this.buttonLoading = true
        if (this.list.length === 0) {
          this.$modal.notifyWarning('物料不能为空，请先扫码添加物料！')
          return
        }
        if (!this.queryParams.returnType) {
          this.$modal.msgWarning('退货类型必填,请选择退货类型!')
          return
        }
        // const detailList = this.list.map(item => {
        //   const { materialLots, materialNo, materialName, qrCode, returnQty, supplierCode, purchaseOrderNo } = item
        //   return {
        //     materialLots,
        //     materialNo,
        //     materialName,
        //     qrCode,
        //     returnQty,
        //     supplierCode,
        //     purchaseOrderNo
        //   }
        // })
        const params = {
          remark: this.queryParams.remark,
          returnType: this.queryParams.returnType,
          detail: this.list
        }
        this.buttonLoading = true
        createSaleReturnMaster(params).then(() => {
          this.$emit('complete')
          this.$modal.msgSuccess('操作成功!')
          this.reset()
          this.open = false
        })
      } catch (error) {
        console.log(error)
      } finally {
        this.buttonLoading = false
        this.loading = false
      }
    },
    dialogClose() {
      this.list = []
      this.queryParams.remark = undefined
      this.queryParams.id = null
      this.queryParams.returnQty = null
      this.currentData = []
      this.queryParams.maxAmount = 0
    }
  }
}
</script>

      <style>

      </style>

