<!--
  @description: 收货订单管理-确认收货编辑
  @author: 王俊楠
  @routerPath: /procurement/procurementOrderReceiveAdd
  @date： 2020-10-30 15:42:12
-->
<template>
  <div class="p0-16">
    <section class="title title_border">
      <i class="iconfont icon-fanhui pointer" @click="back()" />
      收货处理
    </section>
    <div>
      <el-form ref="formData" :model="formData" :inline-message="true">
        <p class="page-title">
          1.收货确认
        </p>
        <table class="tableData mb16">
          <tr>
            <td>运输工具</td>
            <td>{{ filterDictText(transport_toolList,formData.transportTool ) }}</td>
            <td>物流公司</td>
            <td>{{ formData.logisticsCompany }}</td>
          </tr>
          <tr>
            <td>发货联系人</td>
            <td>{{ formData.sendGoodsLinkerName }}</td>
            <td>发货联系人手机号</td>
            <td>{{ formData.sendGoodsLinkerTel }}</td>
          </tr>
          <tr>
            <!-- <td>货物计量单位</td>
            <td>{{ filterDictText(purchaseUnitList,formData.measuringUnit) }}</td> -->
            <td>货物名称</td>
            <td>{{ formData.goodsName }}</td>
            <td>物流单号</td>
            <td>{{ formData.logisticsSingleNumber }}</td>
          </tr>
          <tr>
            <td>发货地区</td>
            <td>{{ formData.sendGoodsRegion }}</td>
            <td>重量(t)或体积（m³)</td>
            <td>{{ formData.measuringNum }}</td>
          </tr>
          <tr>
            <td>发货日期</td>
            <td>{{ $Moment(formData.sendGoodsTime).format(momentDate) }}</td>
            <td>详细地址</td>
            <td>{{ formData.sendGoodsAddress }}</td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="3">
              {{ formData.remarks }}
            </td>
          </tr>
        </table>
        <p class="page-title">
          2.货物信息
        </p>
        <el-table :data="tableData" border class="mb16 tableLimit">
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column
            prop="orderProductNo"
            header-align="center"
            align="center"
            min-width="150"
            label="订单号"
          />
          <el-table-column
            prop="orderProductMessage"
            header-align="center"
            align="left"
            min-width="200"
            label="物资信息"
          />
          <el-table-column header-align="center" min-width="110" align="right">
            <template slot="header">
              <span>采购数量</span>
            </template>
            <template slot-scope="scope">
              <p>
                {{ scope.row.orderProductNum }}
              </p>
            </template>
          </el-table-column>
          <el-table-column header-align="center" min-width="110" align="right">
            <template slot="header">
              <span>发货数量</span>
            </template>
            <template slot-scope="scope">
              <p>
                {{ scope.row.sendGoodsNum }}
              </p>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" min-width="180">
            <template slot="header">
              <div class="deliveryDate">
                <span>计划到货时间</span>
              </div>
            </template>
            <template slot-scope="scope">
              <p>
                {{ scope.row.goodsArrivalTime }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="productDescribe"
            header-align="center"
            align="left"
            min-width="220"
            label="备注"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsArrivalAddress"
            header-align="center"
            align="left"
            min-width="200"
            label="到货地址"
          />
          <el-table-column header-align="center" min-width="180" align="right">
            <template slot="header">
              <span>确认收货数量</span>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <gx-input
                  v-model.trim="scope.row.confirmGoodsNum"
                  size="mini"
                />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <pagination :pagination-data="paginationData" @change="loadData" />
      </el-form>
      <!--操作按钮-->
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button type="primary" :loading="confirmLoading" @click.stop="sureReceipt('formData')">
              确认收货
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* api接口*/
import {
  queryProcurementSendGoodsInfo, // 收获基本信息
  queryProcurementGoodsDetailInfo, // 货物信息
  queryProcurementConfrimSendGoods // 确认收获
} from '@/api/procurement/procurementOrder'
/* 公共方法 */
import { filterDictText } from '@/assets/js/utils' // 深拷贝
import { ListMixin } from '@/mixins/ListMixin' // 分页
import pagination from '@comp/common/pagination/pagination' // 分页组件

import { procurementOrderGroupMixins } from '@/views/procurement/procurementOrder/mixins/procurementOrderGroupMixins.js'
export default {
  name: 'ProcurementOrderReceiveAdd',
  components: {
    pagination // 分页
  },
  mixins: [procurementOrderGroupMixins, ListMixin],
  data() {
    return {
      tableData: [],
      formData: {},
      backPath: '', // 退回路径
      confirmLoading: false // 提交按钮loading
    }
  },
  computed: {
  },
  watch: {
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.backPath = from.path
    })
  },
  created() {
    // 获取收货信息
    this.loadData()
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 获取数据
    loadData() {
      const params = {
        goodsId: this.$route.params.goodsId
      }
      const paramsData = {
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize,
        goodsId: this.$route.params.goodsId
      }
      queryProcurementSendGoodsInfo(params).then(response => {
        this.formData = response.data
      }).catch(() => {
      })
      queryProcurementGoodsDetailInfo(paramsData).then((response) => {
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      })
    },
    // 返回收货订单处理页面
    back() {
      // this.$router.push({
      //   path: 'procurementOrderReceiveList'
      // })
      const pathOf = this.backPath.lastIndexOf('/') + 1
      const path = this.backPath.substr(pathOf)
      this.$router.push({
        path
      })
    },
    // 跳转处理订单详情
    navOrderDetail() {
      this.$router.push({
        name: 'ProcurementOrderHandleDetail'
      })
    },
    // 收货
    receipt(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            id: this.formData.id,
            updateSendGoodsDetailDtos: this.tableData
          }
          queryProcurementConfrimSendGoods(params).then((res) => {
            this.back()
          })
        }
      })
    },
    // 点击确认收货校验
    sureReceipt(formName) {
      const verifyAmountList = this.verifyAmountList()
      if (verifyAmountList) {
        this.$confirm('确认收货吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          this.receipt(formName)
        })
        this.confirmLoading = false
      }
    },
    // 提交时校验 收货数量不能大于发货数量且收货数量不能为空
    verifyAmountList() {
      let verifyAmount = true
      this.tableData.map(item => {
        if (Number(item.confirmGoodsNum) > Number(item.sendGoodsNum)) {
          this.$message({
            type: 'warning',
            message: '收货数量不能大于发货数量'
          })
          verifyAmount = false
        }
        if (item.confirmGoodsNum === null || item.confirmGoodsNum === '' || Number(item.confirmGoodsNum) <= 0) {
          this.$message({
            type: 'warning',
            message: '收货数量不能为空或小于等于零'
          })
          verifyAmount = false
        }
      })
      return verifyAmount
    }
  }
}
</script>

<style lang="less" scoped>
</style>

