<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="跟踪单号">
          <el-input v-model="pagerDto._Eq_TrackingNumber" clearable />
        </el-form-item>
        <el-form-item label="客户单号">
          <el-input v-model="pagerDto._Eq_CustomerOrderNumber" clearable />
        </el-form-item>
        <el-form-item label="客户SKU">
          <el-input v-model="pagerDto._Eq_SkuNo" clearable />
        </el-form-item>
        <el-form-item label="系统SKU">
          <el-input v-model="pagerDto._Eq_SkuId" clearable />
        </el-form-item>
        <el-form-item label="产品标题">
          <el-input v-model="pagerDto._Eq_Title" clearable />
        </el-form-item>
        <el-form-item label="发货日期">
          <el-date-picker
            v-model="pagerDto._Range_DeliveryTime"
            type="daterange"
            range-separator="至"
            start-placeholder="发货开始日期"
            end-placeholder="发货结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="pagerSerach(1)">搜索</el-button>
          <el-button type="success" @click="exportData">导出</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="客户采购单号" prop="CustomerOrderNumber" />
        <el-table-column label="系统采购单号">
          <template slot-scope="r">{{ r.row.CustomerId }}-{{ r.row.CustomerOrderNumber }}</template>
        </el-table-column>
        <el-table-column label="跟踪单号" prop="TrackingNumber" />
        <el-table-column label="客户Sku" prop="SkuNo" />
        <el-table-column label="系统Sku" prop="SkuId">
          <template slot-scope="r">
            {{ 'SKU-'+ (r.row.SkuId+'').PadLeft(9,'0') }}
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="ThumbnailsUrl">
          <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="border-radius:5px;"
            />
          </template>
        </el-table-column>
        <el-table-column label="销售标题" prop="Title" width="300" />
        <el-table-column label="颜色" prop="Color" />
        <el-table-column label="尺寸" prop="Size" />
        <el-table-column label="发货件数" prop="DeliveryCount" />
        <el-table-column label="收货件数" prop="ReceiveCount" />
        <el-table-column label="发货时间" prop="DeliveryTime" />
        <el-table-column label="最后一次收件时间" prop="LastReceiveTime" />

      </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 { QueryPurchaseDelivery, getTemplate, inputData, _exportData } from '@/api/purchase/purchaseDelivery'
export default {
  name: 'PurchaseList',
  components: { 'base-list': BaseList },
  data() {
    return {
      orderStatus: [{ Id: 0, Name: '未收货' }, { Id: 1, Name: '部分收货' }, { Id: 2, Name: '收货完成' }],
      data: [], dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0, _Eq_Status: 0, QuerySort: [
        { 'Field': 'Id', 'IsDesc': true }
      ] },
      activeQty: 0,
      showInput: false,
      inputLoading: false
    }
  },
  created() {
    this.pagerSerach(1)
  },
  mounted() {
    String.prototype.PadLeft = function(len, charStr) {
      var s = this + ''
      return new Array(len - s.length + 1).join(charStr || '') + s
    }
  },
  methods: {
    exportData() {
      this.dataLoading = true
      _exportData(this.pagerDto)
      this.dataLoading = false
    },
    postInput(url) {
      this.inputLoading = true
      inputData(url).then(r => {
        this.$message({ type: 'success', message: '导入成功' })
        this.pagerSerach(1)
      }).finally(r => { this.inputLoading = false })
    },
    downtemp() {
      getTemplate()
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      QueryPurchaseDelivery(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
        this.activeQty = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    },
    selectMenu(index, indexPath) {
      this.activeQty = 0
      this.pagerDto._Eq_Status = index
      this.pagerSerach()
    }
  }
}
</script>
<style scoped>
  .topBox{
    margin-bottom: 25px;margin-top:-15px;
  }
  .el-badge{margin-left:5px}
  .el-menu-item .el-badge{display: none;}
  .is-active .el-badge{display: inline-block;}
</style>
