<template>
  <div class="salesReturnDetail-wrap">
    <a-page-header :ghost="false" :backIcon="false" class="salesReturnDetail-cont">
      <template slot="subTitle">
        <a href="javascript:;" @click="handleBack">
          <a-icon type="left"></a-icon>
          返回列表
        </a>
      </template>
      <template slot="extra">
        <a-button key="3" id="salesReturnDetail-preview-btn">打印预览</a-button>
        <a-button key="4" type="primary" id="salesReturnDetail-print-btn">快速打印</a-button>
      </template>
    </a-page-header>
    <!-- 基础信息 -->
    <a-card size="small" :bordered="false" class="salesReturnDetail-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1" header="基础信息">
          <a-descriptions size="small" :column="3" v-if="detailData">
            <a-descriptions-item label="客户名称">{{ detailData.buyerName || '--' }}</a-descriptions-item>
            <a-descriptions-item label="销退单号">{{ detailData.salesReturnBillNo || '--' }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ detailData.createDate || '--' }}</a-descriptions-item>
            <a-descriptions-item label="退货数量">{{ detailData.totalQty || detailData.totalQty == 0 ? detailData.totalQty : '--' }}</a-descriptions-item>
            <a-descriptions-item label="坏件数量">{{ detailData.totalBadQty || detailData.totalBadQty == 0 ? detailData.totalBadQty : '--' }}</a-descriptions-item>
            <a-descriptions-item label="返库数量">{{ detailData.totalBackStockQty || detailData.totalBackStockQty == 0 ? detailData.totalBackStockQty : '--' }}</a-descriptions-item>
            <a-descriptions-item label="退货金额">{{ detailData.totalAmount || detailData.totalAmount == 0 ? detailData.totalAmount : '--' }}元</a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <a-card size="small" :bordered="false" class="pages-wrap">
      <!-- 列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :rowKey="record => record.id"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: 1430 }"
        bordered></s-table>
    </a-card>
    <a-card size="small" :bordered="false" class="footer-cont">
      <a-button
        type="primary"
        class="button-warning"
        style="width: 150px;"
        size="large"
        v-if="detailData&&(detailData.billStatus == 'WAIT_AUDIT'||detailData.billStatus == 'HQ_CHANGE')"
        @click="handleEexamine()"
        id="salesReturn-eexamine-btn">审核</a-button>
      <a-button
        type="primary"
        class="button-info"
        size="large"
        style="width: 150px;"
        id="salesDetail-edit-btn"
        v-if="detailData&&detailData.salesReturnBillSource == 'SALES' && (detailData.billStatus == 'WAIT_AUDIT'||detailData.billStatus == 'WAIT_SUBMIT')"
        @click="handleEdit()"
      >
        编辑
      </a-button>
      <a-button
        size="large"
        style="width: 150px;"
        v-if="detailData&&detailData.salesReturnBillSource != 'SALES' && (detailData.billStatus == 'WAIT_AUDIT'||detailData.billStatus == 'HQ_CHANGE')"
        type="primary"
        class="button-info"
        @click="handleEdit()"
        id="salesReturn-edit-btn">改单</a-button>
    </a-card>
  </div>
</template>

<script>
import { getOperationalPrecision } from '@/libs/tools.js'
import { STable, VSelect } from '@/components'
import { salesReturnDetail, salesReturnAudit } from '@/api/salesReturn'
import { salesReturnDetailList } from '@/api/salesReturnDetail'
export default {
  name: 'SalesReturnDetail',
  components: { STable, VSelect },
  data () {
    return {
      disabled: false,
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '采购单号', dataIndex: 'purchaseBillNo', align: 'center', width: 200, customRender: function (text) { return text || '--' } },
        {
          title: '产品编码',
          dataIndex: 'productEntity.code',
          align: 'center',
          width: 160,
          customRender: function (text) { return text || '--' }
        },
        {
          title: '产品名称',
          dataIndex: 'productEntity.name',
          align: 'center',
          width: 200,
          customRender: function (text) { return text || '--' },
          ellipsis: true
        },
        {
          title: '售价',
          dataIndex: 'price',
          width: 100,
          align: 'center',
          customRender: function (text) {
            return ((text || text == 0) ? '￥' + text : '--')
          }
        },
        {
          title: '退货数量',
          dataIndex: 'qty',
          width: 100,
          align: 'center',
          customRender: function (text) {
            return text || text == 0 ? text : '--'
          }
        },
        {
          title: '坏件数量',
          dataIndex: 'badQty',
          width: 100,
          align: 'center',
          customRender: function (text) {
            return text || text == 0 ? text : '--'
          }
        },
        {
          title: '返库数量',
          dataIndex: 'backStockQty',
          width: 100,
          align: 'center',
          customRender: function (text) {
            return text || text == 0 ? text : '--'
          }
        },
        {
          title: '单位',
          dataIndex: 'productEntity.unit',
          align: 'center',
          width: 100,
          customRender: function (text) { return text || '--' }
        },
        {
          title: '退货金额小计',
          dataIndex: 'saleReturnSubtotal',
          width: 120,
          align: 'center',
          customRender: function (text) {
            return ((text || text == 0) ? '￥' + text : '--')
          }
        },
        {
          title: '退货原因',
          dataIndex: 'remark',
          width: 150,
          align: 'center',
          customRender: function (text) { return text || '--' },
          ellipsis: true
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        const params = Object.assign(parameter, { salesReturnBillSn: this.$route.params.sn })
        return salesReturnDetailList(params).then(res => {
          const data = res.data
          const no = (data.pageNo - 1) * data.pageSize
          for (var i = 0; i < data.list.length; i++) {
            data.list[i].no = no + i + 1
            // 折后退货金额小计  由于数据库内小数位数为4位，页面则需显示2位。因此会做小数运算精度处理
            data.list[i].saleReturnSubtotal = getOperationalPrecision(data.list[i].price, data.list[i].qty)
          }
          this.disabled = false
          return data
        })
      },
      detailData: null //  详情数据
    }
  },
  methods: {
    //  返回
    handleBack () {
      this.$router.push({ name: 'salesReturnList' })
    },
    //  审核
    handleEexamine () {
      const _this = this
      const row = this.detailData
      this.$confirm({
        title: '提示',
        content: '请点击下方按钮确认操作？',
        centered: true,
        closable: true,
        okText: '审核通过',
        cancelText: '审核不通过',
        onOk () {
          _this.auditOrder(row.salesReturnBillSn, 'WAIT_CHECK')
        },
        onCancel (e) {
          if (!e.triggerCancel) {
            _this.auditOrder(row.salesReturnBillSn, 'AUDIT_REJECT')
          }
          _this.$destroyAll()
        }
      })
    },
    auditOrder (salesReturnBillSn, billStatus) {
      salesReturnAudit({
        salesReturnBillSn,
        billStatus
      }).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          this.$refs.table.refresh()
        }
      })
    },
    // 编辑
    handleEdit () {
      const row = this.detailData
      this.$router.push({ name: row.grabFlag == 1 ? 'salesReturnGrabEdit' : 'salesReturnEdit', params: { sn: row.salesReturnBillSn, buyerSn: row.buyerSn } })
    },
    //  详情
    getDetail () {
      salesReturnDetail({ sn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detailData = res.data
        } else {
          this.detailData = null
        }
      })
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less">
.salesReturnDetail-wrap {
  .salesReturnDetail-cont {
    margin-bottom: 10px;
  }
  .footer-cont{
    margin-top: 5px;
    text-align: center;
  }
}
</style>
