<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="客户Sku">
          <el-input v-model="pagerDto._Co_SkuNo" />
        </el-form-item>
        <el-form-item label="系统Sku">
          <el-input v-model="pagerDto._Eq_SkuId" />
        </el-form-item>
        <el-form-item label="货位ID">
          <el-input v-model="pagerDto._Eq_GridId" />
        </el-form-item>
        <el-form-item label="客户">
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="所属客户"
            clearable
            filterable
            style="width:290px"
          >
            <el-option
              v-for="item in Customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间" style="float:left;margin:0 10px">
          <el-date-picker
            v-model="pagerDto._Range_InTime"
            type="daterange"
            style="width:290px"
            range-separator="~"
            start-placeholder="入库时间开始"
            value-format="yyyy-MM-dd"
            end-placeholder="入库时间结束"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pagerSerach(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      Sku数量:
      <span style="color:#ff4949;font-size:14px">
        {{ SkuQty }}
      </span>
      物品数量:
      <span style="color:#ff4949;font-size:14px">
        {{ GoodsQty }}
      </span>
      <el-button @click="downExcel()">
        下载搜索条件的库存
      </el-button>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column prop="Customer" label="客户" />
        <el-table-column prop="SkuNo" label="客户Sku" />
        <el-table-column prop="Title" label="系统Sku">
          <template slot-scope="r">
            {{ 'SKU-'+ (r.row.SkuId+'').PadLeft(9,'0') }}
          </template>
        </el-table-column>
        <el-table-column prop="Size" label="尺寸" />
        <el-table-column prop="Position" label="货位" />
        <el-table-column prop="Qty" label="数量" />
        <el-table-column prop="InTime" label="入库时间" />
        <el-table-column prop="CreateUserName" label="入库人" />
        <el-table-column prop="GridId" label="货位ID" />
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { GetGoodsInPageResult, DownloadStockIn } from '@/api/adminStock/inStockLog'
import { _getCustomers } from '@/api/baseInfo'
export default {
  name: 'DsStockIn',
  components: { 'base-list': BaseList },
  data() {
    return {
      data: [], dataLoading: false,
      SkuQty: 0, GoodsQty: 0,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0, QuerySort: [
        { 'Field': 'InTime', 'IsDesc': true }
      ] },
      Customers: []
    }
  },
  mounted() {
    String.prototype.PadLeft = function(len, charStr) {
      var s = this + ''
      return new Array(len - s.length + 1).join(charStr || '') + s
    }
    _getCustomers().then(response => {
      this.Customers = response
      this.pagerSerach(1)
    })
  },
  methods: {
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      GetGoodsInPageResult(this.pagerDto).then(res => {
        this.data = res.Result
        this.SkuQty = res.SkuQty
        this.GoodsQty = res.GoodsQty
        this.pagerDto.total = res.TotalCount
        for (var i = 0; i < res.Result.length; i++) {
          var r = res.Result[i]
          var d = this.Customers.filter(x => x.Id == r.CustomerId)
          if (d && d.length > 0) {
            r.Customer = d[0].CompanyName
          }
        }
      }).finally(res => { this.dataLoading = false })
    },
    downExcel() {
      DownloadStockIn(this.pagerDto)
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}

</script>
