<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search-container">
      <el-input v-model="listQuery.search_name" type="text" placeholder="下单人昵称" style="width:300px" />
      <el-date-picker
        v-model="listQuery.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      />
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button type="primary" @click="toExport">导出</el-button>
    </div>
    <div class="total_money">
      <span>总订货金额: <i class="red">{{ parseMoney(total.all) }}</i></span>
      <span>总付款金额: <i class="red">{{ parseMoney(total.pay) }}</i></span>
      <span>总未付款金额: <i class="red">{{ parseMoney(total.no_pay) }}</i></span>
    </div>
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="limitTable"
      @sort-change="MoneySort"
    >
      <el-table-column
        type="index"
        :index="index"
        label="序号"
        width="80"
        align="center"
      >
        <span slot-scope="{ row: { no_pay_account }, $index }" :class="no_pay_account > 0 ? 'red' : ''">{{ $index + 1 + Number(listQuery.page_size) * (Number(listQuery.page_index) - 1) }}</span>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="代理昵称"
      >
        <span slot-scope="{ row: { nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ nickname }}</span>
      </el-table-column>
      <el-table-column
        prop="realname"
        label="代理姓名"
      >
        <span slot-scope="{ row: { realname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ realname }}</span>
      </el-table-column>
      <el-table-column
        prop="account"
        label="订货金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(account) }}</span>
      </el-table-column>
      <el-table-column
        prop="pay_account"
        label="已付款金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { pay_account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(pay_account) }}</span>
      </el-table-column>
      <el-table-column
        prop="no_pay_account"
        label="未付款金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(no_pay_account) }}</span>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
// api
import { list } from '@/api/data/order'
import { parseMoney } from '@/utils/index'
import { formatter } from '@/filters/index'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 50,
        search_name: '',
        time: ''
      },
      tablelist: [],
      tableTotal: 0,
      total: {
        all: 0,
        pay: 0,
        no_pay: 0
      }
    }
  },
  computed: {
    limitTable() {
      const { page_index, page_size } = this.listQuery
      return this.tablelist.slice((Number(page_index) - 1) * Number(page_size), (Number(page_index) - 1) * Number(page_size) + page_size)
    }
  },
  created() {
    this.parseMoney = parseMoney
    this.getList()
  },
  methods: {
    async getList() {
      this.loadingFull = true
      const { page_index, page_size, search_name, time } = this.listQuery
      await list({
        page_index, page_size, search_name,
        start_time: (time && time.length > 0) ? time[0] : '',
        end_time: (time && time.length > 0) ? time[1] : ''
      }).then(res => {
        this.total = {
          all: 0,
          pay: 0,
          no_pay: 0
        }
        this.loadingFull = false
        if (res.code === 200) {
          this.tablelist = res.data.list
          res.data.list.map(item => {
            this.total.all += item.account
            this.total.pay += item.pay_account
            this.total.no_pay += item.no_pay_account
          })
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    index(i) {
      const { page_index: a, page_size: b } = this.listQuery
      return (a - 1) * b + i + 1
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
    },
    async toExport() {
      // this.loadingFull = true
      // const { search_name, time } = this.listQuery
      // await toExport({
      //   search_name,
      //   start_time: time.length > 0 ? time[0] : '',
      //   end_time: time.length > 0 ? time[1] : ''
      // }).then(res => {
      //   this.loadingFull = false
      //   if (res.code === 200) {
      //     if (res.data && res.data.length > 0) {
      //       import('@/vendor/Export2Excel').then(excel => {
      //         excel.export_json_to_excel({
      //           header: Object.keys(res.data[0]),
      //           data: res.data.map(listItem => Object.keys(listItem).map(j => listItem[j])),
      //           filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
      //           bookType: 'xlsx'
      //         })
      //       })
      //     } else {
      //       this.$message.error('没有可导出数据')
      //     }
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // }).catch(e => {
      //   this.loadingFull = false
      // })
      if (this.tablelist.length < 1) {
        this.$message.error('没有可导出数据')
        return false
      }
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: ['代理昵称', '代理姓名', '订货金额', '已付款金额', '未付款金额'],
          data: this.tablelist.map(listItem => ['nickname', 'realname', 'account', 'pay_account', 'no_pay_account'].map(j => {
            if (j === 'account' || j === 'pay_account' || j === 'no_pay_account') {
              listItem[j] = Number(listItem[j])
            }
            return listItem[j]
          })),
          filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
          bookType: 'xlsx'
        })
      })
    },
    MoneySort(column) {
      const fieldName = column.prop
      const sortingType = column.order
      if (sortingType === 'descending') {
        this.tablelist.sort((a, b) => b[fieldName] - a[fieldName])
      } else if (sortingType === 'ascending') {
        this.tablelist.sort((a, b) => a[fieldName] - b[fieldName])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-container {
    display: flex;
    margin-bottom: 15px;

    /deep/ .el-input {
      margin-right: 10px;
    }

    /deep/ .el-button {
      margin-left: 10px;
    }
  }

  .red {
    color: crimson;
  }

  .total_money {
    margin-bottom: 15px;

    span {
      display: inline-block;
      margin-right: 15px;
    }

    .red {
      display: inline-block;
      color: crimson;
      font-size: 18px;
    }
  }
</style>
