<!--
  @description: 收货订单管理-确认收货详情
  @author: 王俊楠
  @routerPath: /procurement/procurementOrderReceiveDetail
  @date： 2020-10-30 15:42:12
-->
<template>
  <div class="p0-16">
    <section v-if="isBack" class="title title_border">
      <i class="iconfont icon-fanhui pointer" @click="back()" />
      收货详情
    </section>
    <div>
      <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>{{ formData.measuringUnit }}</td>
          <td>物流单号</td>
          <td>{{ formData.logisticsSingleNumber }}</td>
        </tr>
        <tr>
          <td>货物名称</td>
          <td>{{ formData.goodsName }}</td>
          <td>发货地区</td>
          <td>{{ formData.sendGoodsRegion }}</td>
        </tr>
        <tr>
          <td>重量(t)或体积（m³)</td>
          <td>{{ formData.measuringNum }}</td>
          <td>详细地址</td>
          <td>{{ formData.sendGoodsAddress }}</td>
        </tr>
        <tr>
          <td>发货日期</td>
          <td>{{ $Moment(formData.sendGoodsTime).format(momentDate) }}</td>
          <td>备注</td>
          <td>
            {{ formData.remarks }}
          </td>
        </tr>
      </table>
      <p class="page-title">
        2.货物信息
      </p>
      <template>
        <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="220"
            label="物资信息"
          />
          <el-table-column
            prop="orderProductNum"
            header-align="center"
            align="right"
            min-width="110"
            label="采购数量"
          />
          <el-table-column
            prop="sendGoodsNum"
            header-align="center"
            align="right"
            min-width="110"
            label="发货数量"
          />
          <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 && $Moment(scope.row.goodsArrivalTime).format(momentDate) }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            header-align="center"
            align="left"
            min-width="220"
            label="备注"
          />
          <el-table-column
            prop="goodsArrivalAddress"
            header-align="center"
            align="left"
            min-width="220"
            label="到货地址"
          />
          <el-table-column
            prop="confirmGoodsNum"
            header-align="center"
            align="right"
            min-width="110"
            label="确认收货数量"
          />
        </el-table>
        <pagination :pagination-data="paginationData" @change="loadData" />
      </template>
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button type="primary" plain size="small" @click="onExportFile()">
              导出送货单
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* api接口*/
import {
  queryProcurementSendGoodsInfo, // 收获基本信息
  queryProcurementGoodsDetailInfo, // 货物信息
  expertProcurementGoodsDetailInfo // 导出
} from '@/api/procurement/procurementOrder'
/* 公共方法 */
import { filterDictText, download } from '@/assets/js/utils' // 深拷贝
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { ListMixin } from '@/mixins/ListMixin' // 分页
import { procurementOrderGroupMixins } from '@/views/procurement/procurementOrder/mixins/procurementOrderGroupMixins.js'
export default {
  name: 'ProcurementOrderReceiveAdd',
  components: { pagination },
  mixins: [procurementOrderGroupMixins, ListMixin],
  data() {
    return {
      isBack: true, // 是否返回状态
      tableData: [],
      formData: {},
      backPath: '', // 退回路径
      orderId: this.$route.params.orderId,
      goodsId: this.$route.params.goodsId,
      confirmLoading: false // 提交按钮loading
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.isBack = this.$route.params.isBack !== '00' // 判断是否反回
    // 获取收货信息
    this.loadData()
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.backPath = from.path
    })
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 获取数据
    loadData() {
      const params = {
        goodsId: this.goodsId
      }
      const paramsData = {
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize,
        goodsId: this.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
      })
    },
    // 导出
    onExportFile() {
      const params = {
        orderId: this.orderId,
        goodsId: this.goodsId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      expertProcurementGoodsDetailInfo(params).then((res) => {
        download(res, '送货单基本信息.pdf')
      }).catch(() => {
        this.$message.warning('导出失败！')
      })
    },
    // 返回收货订单处理页面
    back() {
      const pathOf = this.backPath.lastIndexOf('/') + 1
      const path = this.backPath.substr(pathOf)
      this.$router.push({
        path
      })
    }
  }
}
</script>

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

