<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">
      <div class="content">
        <ai-search-bar>
          <template #left>
            <div class="search-item">
              <label style="width:120px">打包完成时间：</label>
              <el-date-picker
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </template>
          <template #right>
            <el-button type="primary" @click="toLoad">查询</el-button>
          </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">导出数据</el-button>
            </json-excel>
          </template>
          <ai-table
              :tableData="tableData"
              :col-configs="colConfigs"
              :total="total"
              height="500"
              style="margin-top: 8px;"
              @getList="getList">
            </ai-table>
        </ai-card>
      </div>
    </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: 'ReturnPackage',

    data () {
      return {
        isLoading: false,
        colConfigs: [
          { prop: 'returnSupplierPackageNo', label: '退货包裹号', width: '220px', align: 'left', fixed: 'left' },
          { prop: 'expressDeLiverySn', label: '运单号', width: '160px', align: 'left', fixed: 'left' },
          { prop: 'returnSubWarehouseName', label: '退货子仓', width: '160px', align: 'left' },
          { prop: 'returnSubWarehouseAddress', label: '退货子仓地址',width: '250px', align: 'left' },
          { prop: 'contactName', label: '退货子仓联系人',width: '160px', align: 'left' },
          { prop: 'contactPhone', label: '手机号', width: '160px',align: 'left' },
          { prop: 'packageStatusDesc', label: '状态',width: '100px', },
          { prop: 'returnSupplierReasonDesc', label: '退货原因', width: '120px'},
          { prop: 'reason', label: '退货原因备注', width: '120px'},
          { prop: 'returnSupplierQuantity', label: '退货数量(件)', width: '120px'},
          { prop: 'returnHandOverTypeDesc', label: '退货方式', width: '100px'},
          { prop: 'payMethodDesc', label: '快递支付方式', width: '120px'},
          { prop: 'logisticsTypeDesc', label: '物流商', width: '100px'},
          { prop: 'packageFinishTime', label: '打包完成时间', width: '160px'},
          { prop: 'latestSelfTakeTime', label: '最晚自提时间', width: '160px'},
          { prop: 'outboundTime', label: '出库时间', width: '160px'}
        ],
        jsonFields: {
          "退货包裹号": "returnSupplierPackageNo",
          "运单号": "expressDeLiverySn",
          "退货子仓": "returnSubWarehouseName",
          "退货子仓地址": "returnSubWarehouseAddress",
          "退货子仓联系人": "contactName",
          "手机号": "contactPhone",
          "状态": "packageStatusDesc",
          "退货原因": "returnSupplierReasonDesc",
          "退货原因备注": "reason",
          "退货数量(件)": "returnSupplierQuantity",
          "退货方式": "returnHandOverTypeDesc",
          "快递支付方式": "payMethodDesc",
          "物流商": "logisticsTypeDesc",
          "打包完成时间": "packageFinishTime",
          "最晚自提时间": "latestSelfTakeTime",
          "出库时间": "outboundTime"
        },
        form: {
          mallId: '',
          date: ''
        },
        currentPage: 1,
        pageSize: 100,

        tableData: [],
        total: 0,
        search: {
          current: 1,
          size: 10,
          mallId: ''
        }
      }
    },

    computed: {
    },

    components: {
      JsonExcel
    },

    created () {
    },

    methods: {
      changeDataType() {

      },
      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.currentPage = 1
        this.tableData = []

        this.getList()
      },
      getList () {
        sendChromeAPIMessage({
          url: 'dunland/api/gmp/returnSupplier/package/pageQueryReturnSupplierPackage',
          needMallId: true,
          mallId: this.form.mallId,
          data: {
            pageNo: this.currentPage,
            pageSize: 100,
            packageTimeEnd: this.form.date[1].getTime() + 86400*1000 - 1,
            packageTimeStart: this.form.date[0].getTime()
          }}).then((res) => {
          if (res.errorCode == 1000000) {
            for(let i = 0;i < res.result.items.length; i++) {
              let item = res.result.items[i];
              let data = {};
              data.returnSupplierPackageNo = item.returnSupplierPackageNo
              data.expressDeLiverySn = item.expressDeLiverySn
              data.returnSubWarehouseName = item.returnSubWarehouseName
              data.returnSubWarehouseAddress = item.returnSubWarehouseAddress
              data.contactName = item.contactName
              data.contactPhone = item.contactPhone
              data.packageStatusDesc = item.packageStatusDesc
              data.returnSupplierReasonDesc = JSON.parse(item.returnSupplierReasonDesc).join('')
              data.reason = item.reason
              data.returnSupplierQuantity = item.returnSupplierQuantity
              data.returnHandOverTypeDesc = item.returnHandOverTypeDesc
              data.payMethodDesc = item.payMethodDesc
              data.logisticsTypeDesc = item.logisticsTypeDesc
              data.packageFinishTime = timestampToTime(item.packageFinishTime)
              data.latestSelfTakeTime = timestampToTime(item.latestSelfTakeTime)
              data.outboundTime = timestampToTime(item.outboundTime)
              
              this.tableData.push(data)
            }
            if (100 == res.result.items.length) {
              this.currentPage ++
              setTimeout(() => {
                this.getList()
              }, 1500)
            } else {
              this.isLoading = false
            }
          } else {
            setTimeout(() => {
              this.getList()
            }, 1500)
          }
        }).catch(() => {
          this.isLoading = false
        })
      },
      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>
