<template>
  <div class="inventoryConfirmationDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" @back="handleBack" class="inventoryConfirmationDetail-cont" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="inventoryConfirmationDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
          <span class="billno">单号：{{ detail&&detail.checkWarehouseNo }}</span>
          <a-button size="small" type="link" class="button-default" @click="showDetail=!showDetail">
            <a-icon :type="showDetail ? 'eye-invisible' : 'eye'"/> {{ showDetail?'隐藏':'查看' }}信息
          </a-button>
        </template>
      </a-page-header>
      <!-- 基础信息 -->
      <a-card size="small" :bordered="false" class="inventoryConfirmationDetail-cont" v-show="showDetail">
         <a-descriptions :column="3">
           <a-descriptions-item label="创建人">{{ (detail&&detail.creatorName) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="创建时间">{{ (detail&&detail.createDate) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="盘点类型">{{ (detail&&detail.checkTypeDictValue) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="盘点状态">{{ (detail&&detail.checkStateDictValue) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="盘点人">{{ (detail&&detail.checkPersonName) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="盘点时间">{{ (detail&&detail.checkTime) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="监盘状态">{{ (detail&&detail.checkSuperviseStateDictValue) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="监盘人">{{ (detail&&detail.checkSupervisePersonName) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="监盘时间">{{ (detail&&detail.checkSuperviseTime) || '--' }}</a-descriptions-item>
           <a-descriptions-item label="财务确认时间">{{ (detail&&detail.financeAuditTime) || '--' }}</a-descriptions-item>
         </a-descriptions>
      </a-card>
      <!-- 产品详情 -->
      <a-card size="small" :bordered="false" class="inventoryConfirmationDetail-cont">
        <!-- 总计 -->
        <a-alert type="info" style="margin-bottom:10px">
          <div slot="message" style="display: flex;">
            盘盈数量：<strong :style="{ color: productTotal && productTotal.profitQty>0?'red':productTotal && productTotal.profitQty<0?'green':'' }">{{ productTotal && (productTotal.profitQty || productTotal.profitQty==0) ? productTotal.profitQty : '--' }}</strong>，
            <div v-if="$hasPermissions('B_inventoryConfirmationDetail_costPrice')">
              盘盈金额：<strong :style="{ color: productTotal && productTotal.profitCost>0?'red':productTotal && productTotal.profitCost<0?'green':'' }">{{ productTotal && (productTotal.profitCost || productTotal.profitCost==0) ? toThousands(productTotal.profitCost) : '--' }}</strong>，
            </div>
            盘亏数量：<strong :style="{ color: productTotal && productTotal.lossQty>0?'red':productTotal && productTotal.lossQty<0?'green':'' }">{{ productTotal && (productTotal.lossQty || productTotal.lossQty==0) ? productTotal.lossQty : '--' }}</strong>，
            <div v-if="$hasPermissions('B_inventoryConfirmationDetail_costPrice')">
              盘亏金额：<strong :style="{ color: productTotal && productTotal.lossCost>0?'red':productTotal && productTotal.lossCost<0?'green':'' }">{{ productTotal && (productTotal.lossCost || productTotal.lossCost==0) ? toThousands(productTotal.lossCost) : '--' }}</strong>，
            </div>
            盈亏总数量：<strong :style="{ color: productTotal && productTotal.profitLossQty>0?'red':productTotal && productTotal.profitLossQty<0?'green':'' }">{{ productTotal && (productTotal.profitLossQty	|| productTotal.profitLossQty ==0) ? productTotal.profitLossQty : '--' }}</strong>，
            <div v-if="$hasPermissions('B_inventoryConfirmationDetail_costPrice')">
              盈亏总金额：<strong :style="{ color: productTotal && productTotal.profitLossCost>0?'red':productTotal && productTotal.profitLossCost<0?'green':'' }">{{ productTotal && (productTotal.profitLossCost || productTotal.profitLossCost==0) ? toThousands(productTotal.profitLossCost) : '--' }}</strong>
            </div>
          </div>
        </a-alert>
        <!-- 搜索条件 -->
        <div class="table-page-search-wrapper">
          <a-row :gutter="15">
            <a-col :span="18">
              <a-form-model :model="queryParam" layout="inline" @keyup.enter.native="$refs.table.refresh(true)" >
                <a-row :gutter="15">
                  <a-col :md="8" :sm="24">
                    <a-form-model-item label="产品编码">
                      <a-input v-model.trim="queryParam.productCode" allowClear placeholder="输入产品编码" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="inventoryConfirmationDetail-refresh">查询</a-button>
                    <a-button style="margin-left: 5px" @click="resetSearchForm" id="inventoryConfirmationDetail-reset">重置</a-button>
                  </a-col>
                </a-row>
              </a-form-model>
            </a-col>
            <a-col :span="6">
              <div style="float:right;overflow: hidden;margin-top:6px;">
                <a-checkbox v-model="foldState" @change="foldStateChange"><span style="display: inline-block;margin-top: 1px;">仅显示盈亏</span></a-checkbox>
              </div>
            </a-col>
          </a-row>
        </div>
        <!-- 列表 -->
        <s-table
          class="sTable fixPagination"
          ref="table"
          size="small"
          :style="{ height: tableHeight+70+'px' }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :scroll="{ y: tableHeight }"
          :data="loadData"
          :pageSize="30"
          :defaultLoadData="false"
          bordered>
          <!-- 盈亏数量 -->
          <template slot="profitLossQty" slot-scope="text, record">
            <span :style="{ color: record.profitLossQty>0?'red':record.profitLossQty<0?'green':'', fontWeight: record.profitLossQty!=0?'bold':'' }">
              {{ (record.profitLossQty || record.profitLossQty==0) ? record.profitLossQty : '--' }}
            </span>
          </template>
          <!-- 盈亏金额 -->
          <template slot="profitLossCost" slot-scope="text, record">
            <span :style="{ color: record.profitLossCost>0?'red':record.profitLossCost<0?'green':'', fontWeight: record.profitLossCost!=0?'bold':'' }">
              {{ (record.profitLossCost || record.profitLossCost==0) ? toThousands(record.profitLossCost) : '--' }}
            </span>
          </template>
        </s-table>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import { checkWarehouseDetail, checkWarehouseDetailFinanceList, checkWarehouseDetailCount } from '@/api/checkWarehouse'
export default {
  name: 'InventoryConfirmationDetail',
  mixins: [commonMixin],
  components: { STable, VSelect },
  data () {
    return {
      spinning: false,
      disabled: false,
      showDetail: false,
      queryParam: {
        profitLossFlag: undefined,
        productCode: ''
      },

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        const params = Object.assign(parameter, this.queryParam, { checkWarehouseSn: this.$route.params.sn })
        return checkWarehouseDetailFinanceList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            this.getCount(params)
            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
          }
          this.spinning = false
          return data
        })
      },
      tableHeight: 0,
      detail: null, //  详情数据
      foldState: false, //  是否仅显示盈亏
      productTotal: null //  合计
    }
  },
  computed: {
    columns () {
      const arr = [
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
        { title: '产品名称', dataIndex: 'productName', width: '11%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '单位', dataIndex: 'productUnit', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '仓库', dataIndex: 'warehouseName', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '仓位', dataIndex: 'warehouseLocationName', width: '10%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '入库时间', dataIndex: 'lastStockTime', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '批次', dataIndex: 'stockBatchNo', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品编码', dataIndex: 'productCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '库存数量', dataIndex: 'stockQty', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '盘点数量', dataIndex: 'checkQty', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '监盘数量', dataIndex: 'checkSuperviseQty', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        // { title: '单价', dataIndex: 'checkCost', width: '5%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '盈亏数量', dataIndex: 'profitLossQty', scopedSlots: { customRender: 'profitLossQty' }, width: '6%', align: 'center' }
      // { title: '盈亏金额', dataIndex: 'profitLossCost', scopedSlots: { customRender: 'profitLossCost' }, width: '6%', align: 'center' }
      ]
      if (this.$hasPermissions('B_inventoryConfirmationDetail_costPrice')) { // 成本价权限
        arr.splice(11, 0, { title: '单价', dataIndex: 'checkCost', width: '5%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') })
        arr.splice(13, 0, { title: '盈亏金额', dataIndex: 'profitLossCost', scopedSlots: { customRender: 'profitLossCost' }, width: '6%', align: 'right' })
      }
      return arr
    }
  },
  methods: {
    //  返回列表
    handleBack () {
      this.$router.push({ name: 'inventoryConfirmationList', query: { closeLastOldTab: true } })
    },
    // 重置
    resetSearchForm () {
      this.queryParam.productCode = ''
      this.$refs.table.refresh(true)
      this.setTableH()
    },
    getCount (params) {
      checkWarehouseDetailCount(params).then(res => {
        if (res.status == 200) {
          this.productTotal = res.data
        } else {
          this.productTotal = null
        }
      })
    },
    //  详情
    getDetail () {
      checkWarehouseDetail({ sn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detail = res.data
        } else {
          this.detail = null
        }
      })
    },
    // 折叠列表
    foldStateChange (e) {
      if (e.target.checked) {
        this.queryParam.profitLossFlag = 1
        this.$refs.table.refresh(true)
      } else {
        this.queryParam.profitLossFlag = undefined
        this.$refs.table.refresh(true)
      }
    },
    setTableH () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.tableHeight = window.innerHeight - 315
      })
    }
  },
  watch: {
    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时，需同时更改表格高度
      this.setTableH()
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.resetSearchForm()
      this.getDetail()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.resetSearchForm()
      this.getDetail()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .inventoryConfirmationDetail-wrap{
    .inventoryConfirmationDetail-cont{
      margin-bottom: 6px;
      .billno{
        font-size: 16px;
        font-weight: bold;
        margin: 0 15px;
      }
      .state-c{
        color: #ed1c24;
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
</style>
