<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-search-bar>
        <template #left>
          <el-radio-group v-model="type" @change="onChange">
            <el-radio-button label="0">即将售罄</el-radio-button>
            <el-radio-button label="1">已售罄</el-radio-button>
          </el-radio-group>
        </template>
        <template #right>
        </template>
      </ai-search-bar>
      <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" :disabled="!mallId || (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 {sendChromeAPIMessage} from '@/api/chromeApi'
import JsonExcel from 'vue-json-excel'
import { Message } from 'element-ui'

  export default {
    name: 'ExportSaleOutData',

    data () {
      return {
        type: '0',
        isLoading: false,
        tableData: [],
        mallId: '',
        colConfigs: [
          { prop: 'productName', label: '商品名称', align: 'left' },
          { prop: 'catName', 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: 'className', label: 'SKU属性', align: 'left' },
          { prop: 'prodSkuPayQtyTotal7d', label: '近7天SKU销量', align: 'left' },
          { prop: 'prodSkcPayQtyTotal7d', label: '近7天SKC销量', align: 'left' },
          { prop: 'totalStock', label: '仓内可用库存', align: 'left' },
          { prop: 'stockNotAvailable', label: '仓内暂不可用库存', align: 'left' },
          { prop: 'totalWaitReceiveNum', label: '已发货库存', align: 'left' },
          { prop: 'stockAvailable', label: '合计库存', align: 'left' },
          { prop: 'stockAvlbDays', label: '库存可售天数', align: 'left' },
          { prop: 'p7dSellOutSimuAmount', label: '近7天销售损失(CNY)', align: 'left' },
          { prop: 'p7dSellOutSimuAmountRatio', label: '近7天销售损失占比', align: 'left' },
          { prop: 'prodSkuPayQtyTotal7d2', label: '近7天sku已支付销量', align: 'left' },
          { prop: 'waitDeliverOrderSnList', label: '待发货备货单ID', align: 'left' }
        ],
        jsonFields: {
          "商品名称": "productName",
          "类目": "catName",
          "SKC ID": "productSkcId",
          "SKC货号": "skcExtCode",
          "SKU ID": "productSkuId",
          "SKU货号": "skuExtCode",
          "SKU属性": "className",
          "近7天SKU销量": "prodSkuPayQtyTotal7d",
          "近7天SKC销量": "prodSkcPayQtyTotal7d",
          "仓内可用库存": "totalStock",
          "仓内暂不可用库存": "stockNotAvailable",
          "已发货库存": "totalWaitReceiveNum",
          "合计库存": "stockAvailable",
          "库存可售天数": "stockAvlbDays",
          "近7天销售损失(CNY)": "p7dSellOutSimuAmount",
          "近7天销售损失占比": "p7dSellOutSimuAmountRatio",
          "近7天sku已支付销量": "prodSkuPayQtyTotal7d2",
          "待发货备货单ID": "waitDeliverOrderSnList"
        },

        currentPage: 1
      }
    },

    computed: {
    },

    components: {
      JsonExcel
    },

    created () {
    },

    methods: {
      onChange (e) {
        this.tableData = []
        this.currentPage = 1
        if (e === '0') {
          this.getList(1)
        } else {
          this.getList(2)
        }
      },
      beforeGetList() {
        if (!this.mallId) {
          Message.error("请先选择店铺")
          return
        }
        this.currentPage = 1
        this.tableData = []
        this.$userCheck(this.mallId).then(() => {
          this.isLoading = true
          if (this.type == '0') {
            this.getList(1)
          } else {
            this.getList(2)
          }
        }).catch((err) => {
          this.isLoading = false
        })
      },
      getList (detailType) {
        sendChromeAPIMessage({
          url: 'marvel-mms/cn/api/kiana/venom/sold/out/querySoldOutDetail',
          needMallId: true,
          mallId: this.mallId,
          anti: true,
          data: {
            "pageNo": this.currentPage,
            "pageSize": 200,
            "detailType": detailType
          }}).then((res) => {
          if (res.errorCode == 1000000) {
            res.result.soldOutDetailList.map(item => {
              this.tableData.push({...item, 
                p7dSellOutSimuAmount: item.p7dSellOutSimuAmount/100, 
                p7dSellOutSimuAmountRatio: (item.p7dSellOutSimuAmountRatio * 100).toFixed(2) + '%',
                waitDeliverOrderSnList: item.waitDeliverOrderSnList.join(',')})
            })
            if (200 == res.result.soldOutDetailList.length) {
              this.currentPage ++
              setTimeout(() => {
                this.getList(detailType)
              }, 1000)
            } else {
              this.isLoading = false
            }
          } else {
            setTimeout(() => {
              this.getList(detailType)
            }, 1000)
          }
        })
      },
      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>
