<!--
  @description: 发货订单管理-发货详情
  @author: 王俊楠
  @routerPath: /procurement/procurementOrderDeliverDetail
  @date： 2020-11-10 17:10:12
-->
<template>
  <div class="p0-16">
    <section 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>{{ filterDictText(purchaseUnitList,formData.measuringUnit) }}</td> -->
          <td>发货日期</td>
          <td>{{ $Moment(formData.sendGoodsTime).format(momentDate) }}</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 colspan="3">
            {{ formData.remarks }}
          </td>
        </tr>
      </table>
      <div class="clearfix offerInfo">
        <p class="fl page-title">
          2.货物信息
        </p>
      </div>
      <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="80" 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="80" 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="240">
          <template slot="header" slot-scope="scope">
            <div class="deliveryDate">
              <span>计划到货时间</span>
            </div>
          </template>
          <template slot-scope="scope">
            <p>
              {{ $Moment(scope.row.goodsArrivalTime).format(momentDateTime) }}
            </p>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="productDescribe"
          header-align="center"
          align="left"
          min-width="200"
          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="到货地址"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.goodsArrivalAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" min-width="180" align="right">
          <template slot="header">
            <span>确认收货数量</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.confirmGoodsNum }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button type="primary" :loading="exportLoading" 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' // 字典code翻译中文
import { procurementOrderGroupMixins } from '@/views/procurement/procurementOrder/mixins/procurementOrderGroupMixins.js'
import { ListMixin } from '@/mixins/ListMixin' // 分页
/*  公共组件 */
import pagination from '@comp/common/pagination/pagination' // 分页组件
export default {
  name: 'ProcurementOrderCollectionAdd',
  components: {
    pagination // 分页组件
  },
  mixins: [procurementOrderGroupMixins, ListMixin],
  data() {
    return {
      formData: {}, // 行项目信息
      tableData: [],
      exportLoading: false, // 导出送货单loading
      backPath: '', // 退回路径
      orderId: this.$route.params.orderId,
      goodsId: this.$route.params.goodsId
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.loadData()
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.backPath = from.path
    })
  },
  methods: {
    filterDictText, // 字典code翻译中文
    // 返回发货订单处理页面
    back() {
      // this.$router.push({
      //   path: 'procurementOrderDeliverHandleDetail'
      // })
      const pathOf = this.backPath.lastIndexOf('/') + 1
      const path = this.backPath.substr(pathOf)
      this.$router.push({
        path
      })
    },
    // 导出
    onExportFile() {
      const params = {
        orderId: this.orderId,
        goodsId: this.goodsId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      this.exportLoading = true
      expertProcurementGoodsDetailInfo(params).then((res) => {
        this.exportLoading = false
        download(res, '送货单基本信息.pdf')
      }).catch(() => {
        this.exportLoading = false
        this.$message.warning('导出失败！')
      })
    },
    // 获取数据
    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
      })
    }
  }
}
</script>

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

