<template>
  <ai-list class="list" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <ai-title
      slot="title"
      title="普通备货单"
      isShowBottomBorder>
      <template #rightBtn>
        <div class="title-right">
          <div>
            <label style="width:90px">店铺：</label>
            <el-select v-model="form.mallId" @change="beforeGetList" placeholder="请选择" size="small">
              <el-option
                v-for="item in $store.state.mallList"
                :key="item.mallId"
                :label="item.mallName"
                :value="item.mallId">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
    </ai-title>
    <template slot="content">
      <ai-card title="数据明细" style="padding-bottom: 40px;">
        <template #right>
          <label style="width:80px">状态：</label>
          <el-select v-model="form.status" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label style="width:120px">备货单创建时间：</label>
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" @click="toLoad">加载</el-button>&nbsp;
          <json-excel
              :data="tableData"
              :fields="jsonFields"
              name="普通备货单列表.xls"
              worksheet="普通备货单列表">
              <el-button type="primary" :disabled="tableData.length == 0">下载数据</el-button>
            </json-excel>
        </template>
        <ai-table
          :isShowPagination="false"
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="tableData.length"
          height="500"
          style="margin-top: 8px;"
          @getList="() => {}">
        </ai-table>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
import { Message } from 'element-ui'
import {sendChromeAPIMessage} from '@/api/chromeApi'
import {timestampToTime} from '@/utils/date'
import JsonExcel from 'vue-json-excel'

  export default {
    name: 'MyNormalOrder',

    data () {
      return {
        form: {
          date: '',
          beginDate: '',
          endDate: '',
          status: [],
          mallId: ''
        },
        reqData: {
          purchaseTimeFrom: '',
          purchaseTimeTo: '',
          pageNo: 1,
          pageSize: 100,
          urgencyType: 0,
          statusList: [],
          isCustomGoods: false,
          oneDimensionSort: {
            firstOrderByParam: "createdAt",
            firstOrderByDesc: 1
          }
        },
        options: [
          {label: '待创建', value: 0},
          {label: '待发货', value: 1},
          {label: '已送货', value: 2},
          {label: '已收货', value: 3},
          {label: '质检全部退回', value: 5},
          {label: '已验收', value: 6},
          {label: '已入库', value: 7},
          {label: '已作废', value: 8},
          {label: '已取消', value: 10},
        ],
        colConfigs: [
          { prop: 'purchaseTime', label: '备货单创建时间', width: '180px', align: 'left', fixed: 'left' },
          { prop: 'subPurchaseOrderSn', label: '备货单号', width: '160px', align: 'left', fixed: 'left' },
          { prop: 'productName', label: '商品名称', width: '240px', align: 'left', fixed: 'left' },
          { prop: 'status', label: '状态', width: '80px', align: 'left' },
          { prop: 'productSkcId', label: 'SKC ID', width: '120px', align: 'left' },
          { prop: 'skcExtCode', label: 'SKC货号', width: '100px', align: 'left' },
          { prop: 'productSkuId', label: 'SKU ID', width: '120px', align: 'left' },
          { prop: 'extCode', label: 'SKU货号', width: '160px', align: 'left' },
          { prop: 'specName', label: 'SKU属性', width: '100px', align: 'left' },
          { prop: 'supplierPrice', label: '申报价格(CNY)', width: '180px', align: 'left' },
          { prop: 'xiadan', label: '送货数量', width: '100px', align: 'left' },
          { prop: 'skuNum', label: '入库数量', width: '100px', align: 'left' },
          { prop: 'deliveryOrderSn', label: '发货单号', width: '140px', align: 'left' },
          { prop: 'deliverTime', label: '发货时间', width: '160px', align: 'left' },
          { prop: 'receiveTime', label: '收货时间', width: '160px', align: 'left' }
        ],
        isLoading: false,
        tableData: [],
        jsonFields: {
          "备货单创建时间": "purchaseTime",
          "备货单号": "subPurchaseOrderSn",
          "商品名称": "productName",
          "商品图片": "productSkcPicture",
          "状态": "status",
          "SKC ID": "productSkcId",
          "SKC货号": "skcExtCode",
          "SKU ID": "productSkuId",
          "SKU货号": "extCode",
          "SKU属性": "specName",
          "申报价格(CNY)": "supplierPrice",
          "下单数量": "xiadan",
          "实际入库数量": "skuNum",
          "发货单号": "deliveryOrderSn",
          "发货时间": "deliverTime",
          "收货时间": "receiveTime"
        },
        snList: [],
        currentIndex: 0
      }
    },
    components: {
      JsonExcel
    },
    methods: {
      beforeGetList() {
        this.$userCheck(this.form.mallId).then(() => {
          
        }).catch((err) => {
          this.form.mallId = ''
        })
      },
      toLoad() {
        if (!this.form.mallId) {
          Message.error("请选择店铺")
          return
        }
        if (!this.form.date) {
          Message.error("请选择时间")
          return
        }
        this.reqData.purchaseTimeFrom = this.form.date[0].getTime()
        this.reqData.purchaseTimeTo = this.form.date[1].getTime() + 86400 * 1000
        this.reqData.pageNo = 1
        this.reqData.statusList = this.form.status
        this.tableData = []
        this.packageNumber = 0
        this.snList = []
        this.currentIndex = 0
        this.isLoading = true
        this.load()
      },
      load() {
        sendChromeAPIMessage({
          url: 'oms/bg/venom/api/supplier/purchase/manager/querySubOrderList',
          needMallId: true,
          mallId: this.form.mallId,
          anti: true,
          data: this.reqData}).then((res) => {
            if (res.errorCode == 1000000) {
              for(let i = 0;i < res.result.subOrderForSupplierList.length; i++) {
                let item = res.result.subOrderForSupplierList[i];
                let data = {};
                data.purchaseTime = timestampToTime(item.purchaseTime) 
                data.subPurchaseOrderSn = item.subPurchaseOrderSn
                data.productName = item.productName
                data.productSkcPicture = item.productSkcPicture
                data.productSkcId = item.productSkcId
                data.skcExtCode = item.productSn
                data.status = this.options.filter(i => {return  i.value == item.status})[0].label
                data.deliveryOrderSn = item.deliverInfo.deliveryOrderSn
                data.deliverTime = timestampToTime(item.deliverInfo.deliverTime)
                data.receiveTime = timestampToTime(item.deliverInfo.receiveTime)
                
                for(let k = 0; k < item.skuQuantityDetailList.length; k++) {
                  data = {...data,
                    productSkuId: item.skuQuantityDetailList[k].productSkuId,
                    specName: item.skuQuantityDetailList[k].className,
                    extCode: item.skuQuantityDetailList[k].extCode,
                    supplierPrice: item.skuQuantityDetailList[k].supplierPrice / 100,
                    xiadan: item.skuQuantityDetailList[k].deliverQuantity,
                    skuNum: item.skuQuantityDetailList[k].realReceiveAuthenticQuantity}

                    this.tableData.push(data)
                }

              }
              if (this.reqData.pageNo == 1 && res.result.subOrderForSupplierList.length == 0) {
                this.isLoading = false
              }
              else if (res.result.subOrderForSupplierList.length == 100) {
                this.reqData.pageNo ++
                this.load()
              } else {
                this.isLoading = false
              }
            }
          })
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    .title-right {
      display: flex;
      align-items: center;

      & > div:first-child {
        margin-right: 20px;
      }
    }
    ::v-deep.ai-list {
      .ai-list__content--right-wrapper {
        background: transparent;
        box-shadow: none;
        padding: 0!important;
      }
    }
  }
</style>