<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline label-width="100">
        <el-form-item label="客户Sku">
          <el-input v-model="pagerDto._Co_SkuNo" />
        </el-form-item>
        <el-form-item label="客户Spu">
          <el-input v-model="pagerDto._Co_SpuNo" />
        </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>
          <el-button type="primary" @click="pagerSerach(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <el-dropdown
        type="primary"
        split-button
        @command="handleCommand"
      >
        更多操作
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="g">导出汇总</el-dropdown-item>
          <el-dropdown-item command="d">导出明细</el-dropdown-item>
          <el-dropdown-item command="c">库存核对</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
    <template>
      <el-table
        v-loading=""
        :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="SpuNo" label="客户Spu" />
        <el-table-column prop="Title" label="系统Sku" width="200">
          <template slot-scope="r">
            {{ 'SKU-'+ (r.row.SkuId+'').PadLeft(9,'0') }}
          </template>
        </el-table-column>
        <el-table-column prop="ThumbnailsUrl" label="产品主图" align="center">
          <template slot-scope="r">
            <el-image
              :src="r.row.ThumbnailsUrl+'?x-oss-process=image/resize,m_lfit,h_120,w_120'"
              :preview-src-list="r.row.ImageUrlList"
              style="padding:1px;border:1px solid #ccc"
            /></template>
        </el-table-column>
        <el-table-column prop="Color" label="颜色" width="100" />
        <el-table-column prop="Size" label="尺寸" width="100" />
        <el-table-column prop="Position" label="货位" width="100" />
        <el-table-column prop="NotLockStock" label="可用库存" width="100" />
        <el-table-column prop="LockStock" label="锁定库存" width="100" />
        <el-table-column prop="InTransitStock" label="在途库存" width="100" />
        <el-table-column prop="ConfirmMissing" label="丢失确认中" width="100" />
        <el-table-column prop="WaitingForDestruction" label="待销毁" width="100" />
      </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>
    <el-dialog title="导入需核对数据" :visible.sync="dialogCheckStock">
      <el-form>
        <el-form-item label="所属客户">
          <el-select
            v-model="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="明细文件">
          <el-upload
            class="upload-demo"
            :action="`${apiAddress}/api/Finance/updateLoadFile`"
            :on-success="changeFileUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传XLSX文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckStock = false">取 消</el-button>
        <el-button type="primary" @click="startCheckStock">开始核对</el-button>
      </div>
    </el-dialog>
  </base-list>
</template>
<script>
const apiAddress = 'http://120.24.149.148'
import BaseList from '@/components/Xyy/baselist'
import { Query, DownloadStocks, StockCheck, DownloadStockDeatil } from '@/api/adminStock/api'
import { _getCustomers, _getChannel, _getDeliverChannel } from '@/api/baseInfo'
export default {
  name: 'DsStock',
  components: { 'base-list': BaseList },
  data() {
    return {
      apiAddress: apiAddress,
      dialogCheckStock: false,
      data: [], dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0, QuerySort: [
        { 'Field': 'NotLockStock', 'IsDesc': true },
        { 'Field': 'LockStock ', 'IsDesc': true }
      ] },
      fileUrl: '',
      customerId: '',
      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: {
    changeFileUrl(r) {
      this.fileUrl = r.Data.url
    },
    stockCheck() {
      this.dialogCheckStock = true
    },
    outStockDefault() {
      DownloadStockDeatil(this.pagerDto)
    },
    handleCommand(command) {
      debugger
      if (command == 'g') {
        this.downExcel()
      } else if (command == 'd') {
        this.outStockDefault()
      } else if (command == 'c') {
        this.stockCheck()
      }
    },
    startCheckStock() {
      StockCheck({ FileUrl: this.fileUrl, CustomerId: this.customerId })
    },
    downExcel() {
      DownloadStocks(this.pagerDto)
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      Query(this.pagerDto).then(res => {
        this.data = res.Result
        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
          }
        }
        this.pagerDto.total = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    },
    padRight(len, charStr) {
      var s = this + ''
      return new Array(len - s.length + 1).join(charStr || '') + s
    }
  }
}
</script>
