<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" @keyup.enter.native="listQuery.page_index = 1; getList()" />
      <el-select v-model="listQuery.activity_id" style="width: 400px">
        <el-option label="全部" value="" />
        <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
      <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="listQuery.page_index = 1; 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>
      <span>总资金账户余额: <i class="red">{{ parseMoney(total.all_money) }}</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="mobile"
        label="代理手机号"
      >
        <span slot-scope="{ row: { mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ mobile }}</span>
      </el-table-column>
      <el-table-column
        prop="精装版"
        label="精装版"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['精装版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="简约版"
        label="简约版"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['简约版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="老人版"
        label="老人版"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['老人版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="纯棉老人版"
        label="纯棉老人版"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['纯棉老人版'] || 0 }} </span>
        </template>
      </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-column
        prop="money"
        label="账户余额"
        sortable="custom"
      >
        <span slot-scope="{ row: { money } }" :class="money > 0 ? 'red' : ''">{{ parseMoney(money) }}</span>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="tablelist.length" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
// api
import { list, toExport } from '@/api/data/order'
import { parseMoney } from '@/utils/index'
import { formatter } from '@/filters/index'
import { activityList } from '@/api/giftB'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 50,
        search_name: '',
        time: '',
        activity_id: ''
      },
      tablelist: [],
      tableTotal: 0,
      total: {
        all: 0,
        pay: 0,
        no_pay: 0,
        all_money: 0
      },
      activitys: []
    }
  },
  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.activityList(() => {
      this.getList()
    })
  },
  methods: {
    async getList() {
      this.loadingFull = true
      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
      await list({
        page_index, page_size, search_name, activity_id,
        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,
          all_money: 0
        }
        this.loadingFull = false
        if (res.code === 200) {
          this.tablelist = res.data.list.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.total = {
            all: res.data.list.total[0].account,
            pay: res.data.list.total[0].pay_account,
            no_pay: res.data.list.total[0].no_pay_account,
            all_money: res.data.list.all_money
          }
          // console.log('111',this.total.no_pay)
          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
      // this.getList()
    },
    async toExport() {
      this.loadingFull = true
      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
      toExport({
        page_index, page_size, search_name, activity_id,
        start_time: (time && time.length > 0) ? time[0] : '',
        end_time: (time && time.length > 0) ? time[1] : ''
      }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.$message.error('没有可导出数据')
            return false
          } else {
            const header = Object.keys(res.data[0])
            header.unshift('序号')
            import('@/vendor/Export2Excel').then(excel => {
              excel.export_json_to_excel({
                header: header,
                data: res.data.map((listItem, i) => header.map(j => {
                  if (j === '简约版' || j === '纯棉老人版' || j === '精装版' || j === '老人版') {
                    listItem[j] = Number(listItem[j]) || 0
                  }
                  if (j === '序号') {
                    listItem[j] = i + 1
                  }
                  return listItem[j]
                })),
                filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
                bookType: 'xlsx'
              })
            })
          }
        }
      }).catch(e => {
        this.$message.error('导出失败')
      }).finally(() => {
        this.loadingFull = false
      })
    },
    MoneySort(column) {
      const fieldName = column.prop
      const sortingType = column.order
      if (sortingType === 'descending') {
        this.tablelist.sort((a, b) => Number(b[fieldName] || 0) - Number(a[fieldName] || 0))
      } else if (sortingType === 'ascending') {
        this.tablelist.sort((a, b) => Number(a[fieldName] || 0) - Number(b[fieldName] || 0))
      }
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    }
  }
}
</script>

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

  .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>
