<template>
  <div v-if="showPage" class="replenishmentDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 基础信息 -->
      <a-collapse :activeKey="['1']" v-if="detailData">
        <a-collapse-panel key="1" header="基础信息">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="关联客户">
              {{ detailData&&detailData.customerName || '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="货架名称" :span="2">
              {{ detailData&&detailData.shelfInfo.shelfName || '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="补货单号">{{ detailData && detailData.replenishBillNo || '--' }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ detailData && detailData.createDate || '--' }}</a-descriptions-item>
            <a-descriptions-item label="补货单状态">{{ detailData&&detailData.billStateDictValue || '--' }}</a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
      <div class="pages-wrap">
        <!-- alert -->
        <a-alert type="info" style="margin: 10px 0;">
          <div slot="message">
            总款数：<strong>{{ detailData&&(detailData.totalCategory || detailData.totalCategory==0) ? detailData.totalCategory : '--' }}</strong>；
            总数量：<strong>{{ detailData&&(detailData.totalQty || detailData.totalQty==0) ? detailData.totalQty : '--' }}</strong>；
            总成本：<strong>{{ detailData&&(detailData.totalCost || detailData.totalCost==0) ? detailData.totalCost : '--' }}</strong>；
          </div>
        </a-alert>
        <!-- 列表 -->
        <s-table
          class="sTable"
          ref="table"
          size="small"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          :scroll="{ y: 400 }"
          :showPagination="false"
          bordered>
        </s-table>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import { queryListForOutStock, shelfReplenishDetail } from '@/api/shelfReplenish'
export default {
  name: 'SalesDetail',
  components: { STable, VSelect },
  mixins: [commonMixin],
  props: {
    outBizSn: { //  有值则为弹框，无值则为页面
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      showPage: false,
      spinning: false,
      disabled: false,
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
        { title: '产品编码', dataIndex: 'product.code', width: '22%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'product.name', width: '28%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '补货实发数量', dataIndex: 'confirmQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '单位', dataIndex: 'product.unit', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
        // { title: '成本价', dataIndex: 'product.unit', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '成本小计', dataIndex: 'totalCost', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '是否急件', dataIndex: 'oosFlag', width: '15%', align: 'center', customRender: function (text) { return text == 1 ? '是' : '否' } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        return queryListForOutStock({ replenishBillSn: this.outBizSn || this.$route.params.sn }).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            for (var i = 0; i < data.length; i++) {
              data[i].no = i + 1
              data[i].putQty = data[i].confirmQty
            }
            this.disabled = false
            this.listData = data || []
          }
          this.spinning = false
          return data
        })
      },
      localDataSource: [],
      detailData: null //  详情数据
    }
  },
  methods: {
    // 基本信息
    getDetail () {
      shelfReplenishDetail({ sn: this.outBizSn || this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detailData = res.data
        } else {
          this.detailData = null
        }
      })
    },
    pageInit () {
      const vm = this
      vm.$nextTick(() => {
        vm.spinning = false
        vm.disabled = false
        vm.getDetail()
      })
    }
  },
  mounted () {
    this.showPage = true
    if (!this.$store.state.app.isNewTab || this.outBizSn) { // 页签刷新 或 为弹框时调用
      this.pageInit()
    }
  },
  activated () {
    this.showPage = true
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>
