<!-- 购买会员订单 -->
<template>
  <div>
    <el-form inline :model="queryForm">
      <el-form-item>
        <el-date-picker style="width: 300px" v-model="times" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
          @change="selectTimeChange"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <selectUser v-model="queryForm.key" placeholder="选择用户"></selectUser>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="tableData.loading" icon="Search" @click="searchHandle">搜索</el-button>
        <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="total_info_wrap">
      <div class="item">
        <img class="icon" src="@/assets/applocation/dds.png" />
        <div class="info">
          <el-text>订单数</el-text>
          <el-text>{{ tableData.total }}</el-text>
        </div>
      </div>
      <div class="item">
        <img class="icon" src="@/assets/applocation/ddje.png" />
        <div class="info">
          <el-text>订单金额（元）</el-text>
          <el-text>{{ tableData.amount }}</el-text>
        </div>
      </div>
    </div>
    <div>
      <el-table :data="tableData.list" border stripe v-loading="tableData.loading">
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="用户" prop="name">
          <template v-slot="scope">
            <div class="column">
              <div>{{ scope.row.nickName }}</div>
              <div style="color: #999;">{{ scope.row.phone }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="amount">
          <template v-slot="scope">
            <span>{{ multiplyAndFormat(scope.row.amount || 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买时长" prop="circleTime">
          <template v-slot="scope">
            <span>{{ scope.row.circleTime }}个{{ scope.row.circleUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 14px;">
      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.pageSize"
        :page-sizes="[10, 100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { reactive, ref, onMounted } from 'vue';
import selectUser from '../../components/selectUser.vue';
import { memberOrder } from '@/api/coupon/index.js';
import { multiplyAndFormat } from '@/utils/index'

const times = ref([]);
const queryForm = reactive({
  startTime: '',
  endTime: '',
  key: '',
});

const selectTimeChange = (value) => {
  if (value && value.length === 2) {
    queryForm.startTime = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
    queryForm.endTime = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
  } else {
    queryForm.startTime = '';
    queryForm.endTime = '';
  }
};

function searchHandle() {
  tableData.page = 1;
  getTableData();
}

function resetHandle() {
  times.value = [];
  queryForm.startTime = '';
  queryForm.endTime = '';
  queryForm.key = '';
  tableData.page = 1;
  getTableData();
}

const tableData = reactive({
  loading: false,
  page: 1,
  pageSize: 10,
  amount: 0,
  total: 0,
  list: [],
  toatalInfo: {}
});

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.pageSize = e;
  getTableData();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  getTableData();
}

// 已领取详情
async function getTableData() {
  try {
    tableData.loading = true;
    const res = await memberOrder({
      page: tableData.page,
      size: tableData.pageSize,
      ...queryForm
    });
    tableData.total = res.totalRow;
    tableData.list = res.records;
    tableData.amount = res.totalAmount;
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false;
  }, 500);
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.total_info_wrap {
  display: flex;
  gap: 24px;
  padding-bottom: 20px;

  .item {
    display: flex;
    padding: 14px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;

    .icon {
      width: 44px;
      height: 44px;
    }

    .info {
      display: flex;
      flex-direction: column;
      padding-left: 10px;
      align-items: center;
    }
  }
}

.column {
  display: flex;
  flex-direction: column;
}
</style>