<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="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>
          <json-excel
            :data="tableData"
            :fields="jsonFields"
            :before-generate = "startDownload"
            name="待装箱发货单明细.xls"
            worksheet="待装箱发货单明细">
            <el-button type="primary">导出数据</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 {sendChromeAPIMessage} from '@/api/chromeApi'
import JsonExcel from 'vue-json-excel'
import {timestampToTime} from '@/utils/date'
import { Message } from 'element-ui'

  export default {
    name: 'WaitShippingList',

    data () {
      return {
        isLoading: false,
        list: [],
        tableData: [],
        mallId: '',
        colConfigs: [
          { prop: 'subPurchaseOrderSn', label: '备货单号', align: 'left' },
          { prop: 'deliveryOrderSn', label: '发货单号', align: 'left' },
          { prop: 'productName', label: '商品名称', align: 'left' },
          { prop: 'productSkcId', label: 'SKC ID', align: 'left' },
          { prop: 'skcExtCode', label: 'SKC货号', align: 'left' },
          { prop: 'productSkuId', label: 'SKU ID', align: 'left' },
          { prop: 'skuExtCode', label: 'SKU货号', align: 'left' },
          { prop: 'specName', label: '属性集', align: 'left' },
          { prop: 'supplierPrice', label: '申报价格', align: 'left' },
          { prop: 'skuNum', label: '发货数量', align: 'left' },
          { prop: 'subWarehouseName', label: '收货仓库', align: 'left' },
          { prop: 'createTime', label: '创建时间', align: 'left' }
        ],
        jsonFields: {
          "备货单号": "subPurchaseOrderSn",
          "发货单号": "deliveryOrderSn",
          "商品名称": "productName",
          "SKC ID": "productSkcId",
          "SKC货号": "skcExtCode",
          "SKU ID": "productSkuId",
          "SKU货号": "skuExtCode",
          "属性集": "specName",
          "申报价格": "supplierPrice",
          "发货数量": "skuNum",
          "收货仓库": "subWarehouseName",
          "创建时间": "createTime"
        },

        currentPage: 1,
        packageNumber: 0,

        skcIds: []
      }
    },

    computed: {
    },

    components: {
      JsonExcel
    },

    created () {
    },

    methods: {
      changeDataType() {

      },
      beforeGetList() {
        if (!this.mallId) {
          Message.error("请先选择店铺")
          return
        }
        this.currentPage = 1
        this.list = []
        this.$userCheck(this.mallId).then(() => {
          this.isLoading = true
          this.skcIds = []
          this.getList()
        }).catch((err) => {
          this.isLoading = false
        })
      },
      getList () {
        sendChromeAPIMessage({
          url: 'bgSongbird-api/supplier/deliverGoods/management/pageQueryDeliveryOrders',
          needMallId: true,
          mallId: this.mallId,
          anti: true,
          data: {
            "pageNo": this.currentPage,
            "pageSize": 100,
            "sortType": 0,
            "status": 0
          }}).then((res) => {
          if (res.errorCode == 1000000) {
            for(let i = 0;i < res.result.list.length; i++) {
              let item = res.result.list[i];
              let data = {};
              data.subWarehouseName = item.subWarehouseName
              data.skcExtCode = item.skcExtCode
              data.createTime = timestampToTime(item.deliveryOrderCreateTime)
              data.productName = item.subPurchaseOrderBasicVO.productName,
              data.productSkcId = item.productSkcId
              data.deliveryOrderSn = item.deliveryOrderSn
              data.subPurchaseOrderSn = item.subPurchaseOrderSn

              if (this.skcIds.indexOf(item.productSkcId) == -1) {
                this.skcIds.push(item.productSkcId)
              }

              for(let j = 0; j < item.packageDetailList.length; j++) {
                let item1 = item.packageDetailList[j]
                data = {...data,
                  productSkuId: item1.productSkuId,
                  skuNum: item1.skuNum}
                
                this.list.push(data)
              }
            }
            if (100 == res.result.list.length) {
              this.currentPage ++
              setTimeout(() => {
                this.getList()
              }, 1000)
            } else {
              this.getProductDetailList(0)
            }
          } else {
            setTimeout(() => {
              this.getList()
            }, 1000)
            // Message.error("【拼多多】" + res.errorMsg + ", 请重新尝试加载")
          }
        })
      },
      getProductDetailList(page) {
        let productSkcIds = []
        let i = page * 100
        let j = 0
        for (; i < this.skcIds.length; i++) {
          productSkcIds.push(this.skcIds[i])
          j ++
          if (j == 100) break
        }
        if (productSkcIds.length == 0) {
          this.isLoading = false
          this.tableData = this.list
          return
        }

        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/skc/pageQuery',
          needMallId: true,
          anti: true,
          mallId: this.mallId,
          data: {
            "productSkcIds": productSkcIds,
            "page": 1,
            "pageSize": 100
          }}).then((res) => {
          if (res.errorCode == 1000000) {
            for(let i = 0;i < res.result.pageItems.length; i++) {
              let item = res.result.pageItems[i]

              item.productSkuSummaries.map(temp1 => {
                for (let j = 0; j < this.list.length; j++) {
                  if (this.list[j].productSkuId == temp1.productSkuId) {
                    this.list[j].skuExtCode = temp1.extCode
                    this.list[j].supplierPrice = (temp1.supplierPrice / 100).toFixed(2)

                    let specList = temp1.productSkuSpecList.map(temp3 => {
                      return temp3.specName
                    })

                    this.list[j].specName = specList.join(",")
                  }
                }
              })
            }
            this.getProductDetailList(page + 1)
          } else {
            setTimeout(() => {
              this.getProductDetailList(page)
            }, 200)
          }
        })
      },
      startDownload() {
        this.$http.post('/api/malluser/info').then(res => {
          if (res.code == 0) {
            this.$store.commit('setUserInfo', res.data)
            if (res.data.flag != 1) {
              Message.error('您的账号未激活或已失效，请激活后使用')
              this.$store.commit('setActiveDlgShow', true)
              return;
            }
          }
        })
      }
    }
  }
</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>
