<template>
  <div class="app-container">
    <div class="filter-container">

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-document" @click="exportData">
        导出
      </el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>

      <el-table-column
        prop="sendKind"
        align="center"
        label="发货方式"
        width="100">
      </el-table-column>

      <el-table-column
        prop="orderMoneyStock"
        label="待发货金额汇总">
      </el-table-column>
      <el-table-column
        prop="orderPackage"
        label="待发货包数汇总">
      </el-table-column>
      <el-table-column
        prop="orderMoneyNew"
        label="待组版金额汇总">
      </el-table-column>
      <el-table-column
        prop="orderMoneySubmit"
        label="待入库金额汇总">
      </el-table-column>
    </el-table>
    <pagination
      v-show="listData.total>0"
      :total="listData.total"
      :page.sync="listData.page"
      :limit.sync="listData.pageSize"
      @pagination="getTableInfo"/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import 'vue-area-linkage/dist/index.css'
import {getOrderSendKindUnique, getOrderStatistical} from '@/api/order/orderSchedule'
import {exportData} from "@/api/orderCharge/orderCollection";

export default {
  components: {
    Pagination
  },
  data() {
    return {
      search: {
        keyWord: ''
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      listLoading: false,
      tableData: []
    }
  },
  mounted() {
    this.getTableInfo()
  },
  methods: {
    getStatis(sendKinds, sType) {
      const _that = this
      const statiParams = {
        sendKinds: sendKinds,
        sType: sType
      }
      getOrderStatistical(statiParams).then(response => {
        // console.log("tableData",response)
        if (response.httpCode === 200) {
          response.data.forEach(x => {
            const record = _that.tableData.find((y) => {
              return x.sendKind === y.sendKind
            })

            if (record) {
              switch (sType) {
                case 0:
                  record.orderMoneyStock = x.orderMoneyStock
                  record.orderPackage = x.orderPackage
                  break
                case 1:
                  record.orderMoneySubmit = x.orderMoneySubmit
                  break
                case 2:
                  record.orderMoneyNew = x.orderMoneyNew
                  break
              }
            }
          })
        } else {
          _that.$message.error(response.msg)
        }
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 获取发货方式
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      const params = _that.search
      const page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      const data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getOrderSendKindUnique(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        const tableData = []
        // 拿到这次的发货方式
        const sendKinds = []
        data.forEach(x => {
          sendKinds.push(x.resultStr)
          tableData.push(
            {
              sendKind: x.resultStr,
              orderMoneyNew: 0,
              orderMoneyStock: 0,
              orderMoneySubmit: 0,
              orderPackage: 0
            }
          )
        })
        const sendKindStr = sendKinds.join(',')

        tableData.forEach(a => {
          console.log(a.sendKind)
        })
        // 异步获取统计信息
        this.getStatis(sendKindStr, 0)
        this.getStatis(sendKindStr, 1)
        this.getStatis(sendKindStr, 2)

        // //  组合表单数据

        _that.tableData = tableData
        _that.listData.total = response.total
        // console.log(_that.tableData)
      }).catch(err => {
        _that.listLoading = false
      })
    },
    // 刷新表格
    tableRefresh() {
      // 刷新变革
      this.getTableInfo()
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getTableInfo()
    },
    exportData() {
      const _that = this
      const data = {
        code: 'Order_GetOrderStatistical_Exporter',
        exportName: '发货方式订单统计导出',
        params: _that.search
      }
      exportData(data).then(res => {
        console.log(res)
        if (res.httpCode === 200) {
          _that.$message.success('导出成功，请前至系统管理-我的任务中进行查看和下载')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 15px;
}
</style>
