<template>
  <div class="detail-container">
    <el-page-header @back="goBack" content="联查单据"></el-page-header>

    <div class="table" style="margin-top: 20px">
      <el-table
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        show-summary
        :summary-method="$getSummaries"
      >
        <el-table-column
          align="center"
          label="发货单"
          prop="id"
          min-width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="服务单类别" prop="inOrderType" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.inOrderType | orderTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="价税合计" prop="payAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.payAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="折扣后金额" prop="payAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.payAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="发货日期"
          prop="orderTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="仓库"
          prop="correspondName"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="客户名称"
          prop="customerName"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="物料编码"
          prop="materialCode"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="产品编码"
          prop="materialOldNumber"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="产品名称"
          prop="materialName"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="规格型号"
          prop="specification"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="right" label="无税金额" prop="noTotalAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.noTotalAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="无税单价" prop="afterTaxPrice" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.afterTaxPrice | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          label="数量"
          prop="refundableQty"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button @click="goBack">关 闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { checkOrder } from '@/api/common'

export default {
  name: 'RetailReturn',
  componentName: 'RetailReturn',
  props: ['checkOrderId'],
  filters: {
    orderTypeFilter(val) {
      const MAP = {
        1: '发货单',
        2: '退货单'
      }
      return MAP[val]
    }
  },
  data() {
    return {
      dataList: []
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    // 返回详情
    goBack() {
      this.$emit('backDetail')
    },

    // 获取详情
    getDetail() {
      checkOrder({ mainOrderId: this.checkOrderId }).then(res => {
        if (res.data) {
          res.data.forEach(item => {
            item.sums1 = ['refundableQty']
            item.sums2 = ['payAmount', 'afterTaxPrice', 'noTotalAmount']
          })
        }
        this.dataList = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail-container {
  width: 100%;
  height: 100%;
}
</style>
