<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="list"
            :fields="jsonFields"
            :before-generate = "startDownload"
            name="待收货发货单明细.xls"
            worksheet="待收货发货单明细">
            <el-button type="primary">导出数据</el-button>
          </json-excel>
        </template>
        <ai-table
          :isShowPagination="false"
          :tableData="list"
          :col-configs="colConfigs"
          :total="list.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: [],
        mallId: '',
        colConfigs: [
          { prop: 'productName', label: '商品名称', align: 'left' },
          { prop: 'skcExtCode', label: '货号', align: 'left' },
          { prop: 'productSkcId', label: 'SKC ID', align: 'left' },
          { prop: 'productSkuId', label: 'SKU ID', align: 'left' },
          { prop: 'specName', label: '商品属性', align: 'left' },
          { prop: 'skuNum', label: '发货件数', align: 'left' },
          { prop: 'expressCompany', label: '物流公司', align: 'left' },
          { prop: 'expressDeliverySn', label: '物流单号', align: 'left' },
          { prop: 'deliveryOrderSn', label: '发货单号', align: 'left' },
          { prop: 'subWarehouseName', label: '收货仓库', align: 'left' },
          { prop: 'expectPickUpGoodsTime', label: '预约取货时间', align: 'left' }
        ],
        jsonFields: {
          "商品名称": "productName",
          "货号": "skcExtCode",
          "SKC ID": "productSkcId",
          "SKU ID": "productSkuId",
          "商品属性": "specName",
          "发货件数": "skuNum",
          "物流公司": "expressCompany",
          "物流单号": "expressDeliverySn",
          "发货单号": "deliveryOrderSn",
          "收货仓库": "subWarehouseName",
          "预约取货时间": "expectPickUpGoodsTime"
        },

        currentPage: 1,
        packageNumber: 0
      }
    },

    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.getList()
        }).catch((err) => {
          this.isLoading = false
        })
      },
      getList () {
        sendChromeAPIMessage({
          url: 'bgSongbird-api/supplier/deliverGoods/management/pageQueryDeliveryBatch',
          needMallId: true,
          mallId: this.mallId,
          data: {
            "pageNo": this.currentPage,
            "pageSize": 100,
            "status": 1
          }}).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.expressCompany = item.expressCompany
              data.expressDeliverySn = item.expressDeliverySn
              data.subWarehouseName = item.subWarehouseName
              data.expectPickUpGoodsTime = timestampToTime(item.expectPickUpGoodsTime)

              for(let j = 0;j < item.deliveryOrderList.length; j++) {
                let item1 = item.deliveryOrderList[j]
                data = {...data,
                  deliveryOrderSn: item1.deliveryOrderSn,
                  productName: item1.subPurchaseOrderBasicVO.productName,
                  skcExtCode: item1.subPurchaseOrderBasicVO.skcExtCode,
                  productSkcId: item1.productSkcId}
                
                for(let k = 0; k < item1.packageDetailList.length; k++) {
                  data = {...data, 
                    productSkuId: item1.packageDetailList[k].productSkuId,
                    specName: '',
                    skuNum: item1.packageDetailList[k].skuNum}

                    this.list.push(data)
                }

                this.packageNumber = this.packageNumber + item.receivePackageNum
                setTimeout(() => {
                  this.getSkuDetailList(item1.deliveryOrderSn)
                }, 200 * i)
              }
            }
            if (this.pageSize == res.result.deliveryOrderList.length) {
              this.currentPage ++
              setTimeout(() => {
                this.getList()
              }, 1500)
            } else {
              if (this.currentPage == 1 && res.result.list.length == 0) {
                this.isLoading = false
              }
            }
          } else {
            setTimeout(() => {
              this.getList()
            }, 1500)
            // Message.error("【拼多多】" + res.errorMsg + ", 请重新尝试加载")
          }
        }).catch(() => {
          this.isLoading = false
        })
      },
      getSkuDetailList(sn) {
        sendChromeAPIMessage({
          url: 'bgSongbird-api/supplier/deliverGoods/management/queryDeliveryOrderPackageDetailInfo',
          needMallId: true,
          mallId: this.mallId,
          anti: true,
          data: {deliveryOrderSn: sn}}).then((res) => {
          if (res.errorCode == 1000000) {
            for(let i = 0;i < res.result.deliveryOrderDetails.length; i++) {
              let item = res.result.deliveryOrderDetails[i]

              let specArr = item.secondarySpecVOList.map(item => {
                return item.specName
              })
              let spec = specArr.join(',')

              for(let j = 0; j < this.list.length; j++) {
                if (this.list[j].productSkuId == item.productSkuId) {
                  this.list[j].specName = spec
                }
              }
            }
            this.packageNumber = this.packageNumber - res.result.deliveryOrderDetails.length

            if (this.packageNumber < 5) this.isLoading = false
          } else {
            setTimeout(() => {
              this.getSkuDetailList(sn)
            }, 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>
