<template>
  <div class="chainTransferOutDetail-wrap">
    <a-page-header :ghost="false" @back="handleBack" class="chainTransferOutDetail-back">
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="chainTransferOutDetail-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
      </template>
      <!-- 操作区，位于 title 行的行尾 -->
      <template slot="extra">
        <a-button key="2" id="chainTransferOutDetail-preview-btn">打印预览</a-button>
        <a-button key="1" type="primary" id="chainTransferOutDetail-print-btn">快速打印</a-button>
      </template>
    </a-page-header>
    <!-- 总计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div slot="message">审核状态： <strong>支持市级</strong>，完结状态： <strong>支持市级</strong>，调出对象： <strong>支持市级</strong>，调入单号： <strong>2121212</strong>，总成本：￥<strong>6.33</strong>，总数量： <strong>6</strong> </div>
    </a-alert>
    <a-card :bordered="false" class="chainTransferOutDetail-cont">
      <!-- 列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="default"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        bordered>
        <!-- 成本小计 -->
        <template slot="costSubtotal" slot-scope="text, record">
          <span>{{(record.outCost * record.outQty) || 0}}</span>
        </template>
      </s-table>
    </a-card>
  </div>
</template>

<script>
  import { allocLinkageOutDetailList } from '@/api/allocLinkageOut'
  import { STable, VSelect } from '@/components'
  export default{
    components: { STable, VSelect },
    data(){
      return{
        queryParam: {
          allocationLinkageOutSn: this.$route.params.sn
        },
        disabled: false, //  查询、重置按钮是否可操作
        brandData: [],  //  产品品牌  下拉数据
        typeData: [],  //  产品类别  下拉数据
        // 表头
        columns: [
          { title: '序号', dataIndex: 'no', width: 70, align: 'center' },
          { title: '产品编码', dataIndex: 'productCode', align: 'center', customRender: function (text) { return text || '--' } },
          { title: '产品名称', dataIndex: 'productName', align: 'center', ellipsis: true },
          { title: '原厂编码', dataIndex: 'productOrigCode', align: 'center', customRender: function (text) { return text || '--' } },
          { title: '成本价', dataIndex: 'outCost', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
          { title: '调出仓库', dataIndex: 'warehouseName', align: 'center', customRender: function (text) { return text || '--' } },
          { title: '调出数量', dataIndex: 'outQty', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
          { title: '成本小计（￥）', scopedSlots: { customRender: 'costSubtotal' }, align: 'center' },
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.disabled = true
          return allocLinkageOutDetailList( Object.assign(parameter, this.queryParam) ).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
            }
            this.disabled = false
            return data
          })
        },
      }
    },
    methods: {
      //  重置
      resetSearchForm () {
        this.queryParam.orderBundleNo = ''
        this.queryParam.orderBundle.custMobile = ''
        this.queryParam.bundleName = ''
        this.queryParam.itemName = ''
        this.oldTime = undefined
        this.newTime = undefined
        this.$refs.table.refresh(true)
      },
      //  提交
      handleSubmit(){},
      //  返回列表
      handleBack(){
        this.$router.push({ path: '/allocationManagement/chainTransferOut/list'})
      },
    }
  }
</script>

<style lang="less">
  .chainTransferOutDetail-wrap{
    .chainTransferOutDetail-back{
      margin-bottom: 15px;
    }
    .chainTransferOutDetail-cont{
      margin-bottom: 15px;
    }
  }
</style>
