<template>
  <el-card shadow="never" header="订单排行">
    <el-date-picker
      v-model="queryParams.createDateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      @change="getRankList"
      style="width: 100%;"
      size="mini"
      :picker-options="DatePickerOptions.DEFAULT"
    />

    <el-table
      :data="rankList"
      style="width: 100%;"
      size="mini"
      v-loading="loading"
    >
      <el-table-column label="排行" type="index" width="50">
        <template slot-scope="d">{{d.$index + 1}}</template>
      </el-table-column>
      <el-table-column label="运营区" prop="areaName" />
      <el-table-column label="金额" prop="orderAmount" />
      <el-table-column label="数量" prop="orderCount" />
      <el-table-column label="进行中" prop="processingCount" />
    </el-table>

  </el-card>
</template>

<script>
import { getOrderRank } from '@/api/dashboard/dashboardOrder'
import { getLastDateStr } from '@/utils'
import { DatePickerOptions } from '@/utils/constants'

export default {
  data() {
    return {
      DatePickerOptions,
      loading: false,
      rankList: [],
      queryParams: {
        createDateRange: [getLastDateStr(0), getLastDateStr(0)],
      }
    }
  },
  created() {
    this.getRankList();
  },
  methods: {
    getRankList() {
      this.loading = true;
      getOrderRank(this.queryParams).then(res => {
        this.rankList = res.data;
      }).finally(() => {
        this.loading = false;
      });
    }
  },
}
</script>

<style lang="scss" scoped>

</style>