<template>
  <div class="inventoryReviewDetail-wrap">
    <a-page-header :ghost="false" @back="handleBack" >
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="inventoryReviewDetail-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
      </template>
      <!-- 操作区，位于 title 行的行尾 -->
      <!-- <template slot="extra">
        <a-button key="2" id="inventoryReviewDetail-preview-btn">打印预览</a-button>
        <a-button key="1" type="primary" id="inventoryReviewDetail-print-btn">快速打印</a-button>
      </template> -->
    </a-page-header>
    <!-- 内容 -->
    <a-page-header title="盘点单号：CG2021010100001" ></a-page-header>
    <!-- alert -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div slot="message"><strong class="red">红色代表盘盈</strong>，<strong class="green">绿色代表盈亏</strong></div>
    </a-alert>
    <!-- 盈亏统计 -->
    <a-card size="small" :bordered="false" class="inventoryReviewDetail-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1" header="盈亏统计">
          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="库存数量">2</a-descriptions-item>
            <a-descriptions-item label="库存成本">20</a-descriptions-item>
            <a-descriptions-item label="盘盈数量">￥120.36</a-descriptions-item>
            <a-descriptions-item label="盘盈成本">3</a-descriptions-item>
            <a-descriptions-item label="盘亏数量">4</a-descriptions-item>
            <a-descriptions-item label="盘亏成本">￥11.2</a-descriptions-item>
            <a-descriptions-item>
              <template slot="label">
                盈亏总数量
                <a-popover>
                  <template slot="content">
                    盘盈数量与盘亏数量之和
                  </template>
                  <a-icon type="question-circle" theme="twoTone" />
                </a-popover>
              </template>
              4
            </a-descriptions-item>
            <a-descriptions-item>
              <template slot="label">
                盈亏总成本
                <a-popover>
                  <template slot="content">
                    盘盈成本与盘亏成本之和
                  </template>
                  <a-icon type="question-circle" theme="twoTone" />
                </a-popover>
              </template>
              4
            </a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <!-- 产品明细 -->
    <a-card size="small" :bordered="false" class="inventoryReviewDetail-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1" header="产品明细">
          <!-- 列表 -->
          <s-table
            class="sTable"
            ref="table"
            size="small"
            :rowKey="(record) => record.id"
            :columns="columns"
            :data="loadData"
            :scroll="{ x: 1290 }"
            bordered>
            <!-- 采购数量 -->
            <template slot="purchaseNum" slot-scope="text, record">
              <span>{{ record.purchaseNum }}</span>
            </template>
            <!-- 缺货数量 -->
            <template slot="outOfStockNum" slot-scope="text, record">
              <span>{{ record.outOfStockNum }}</span>
            </template>
          </s-table>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
export default {
  components: { STable, VSelect },
  data () {
    return {
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
        { title: '产品编码', dataIndex: 'productCode', width: 160, align: 'center' },
        { title: '产品名称', dataIndex: 'productName', align: 'center', ellipsis: true },
        { title: '单位', dataIndex: 'productOrigUnit', width: 100, align: 'center' },
        { title: '仓库', dataIndex: 'warehouseName', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '仓位', dataIndex: 'warehouseLocationName', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '库存数量', dataIndex: 'qtsy', width: 110, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '库存成本', dataIndex: 'price', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '盘点数量', dataIndex: 'qtssy', width: 110, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '盘点盈亏数量', dataIndex: 'qtdsy', width: 120, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '盘点盈亏成本', dataIndex: 'prifce', width: 120, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        // return customerBundleDelayList( 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
        // })
        const _this = this
        return new Promise(function (resolve, reject) {
          const data = {
            pageNo: 1,
            pageSize: 10,
            list: [
              { id: '1', purchaseNo: 'jgqp11111111111', creatDate: '产品1', custName: 'jgqp111123545', totalP: '箭冠品牌', totalNums: '产品分类1', totalPrice: '5', payType: '122' }
            ],
            count: 10
          }
          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
          resolve(data)
        })
      }
    }
  },
  methods: {
    //  返回列表
    handleBack () {
      this.$router.push({ path: '/financialManagement/inventoryReview/list', query: { closeLastOldTab: true } })
    }
  }
}
</script>

<style lang="less">
  .inventoryReviewDetail-wrap{
    .inventoryReviewDetail-cont{
      margin-bottom: 10px;
    }
    .green{
      color: #19be6b;
    }
    .red{
      color: #ed1c24;
    }
  }
</style>
