<template>
    <div class="page justify-around">
      <div class="addbtn">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
            </el-form-item>
            <el-form-item label="商品名">
                <el-input v-model="formInline.mouldSmIdLike" placeholder="请输入商品名" clearable />
            </el-form-item>
            <el-form-item label="充值时间段">
                <el-date-picker
                    v-model="formInline.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    value-format="YYYY-MM-DD"
                    :default-value="new Date()"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getListData()">查询</el-button>
            </el-form-item>
        </el-form>
      </div>
  
      <el-table
        :data="tableData"
        style="width: 100%; height: 90%"
        size="large"
        align="center"
        border
      >
        <el-table-column
          prop="orderNumber"
          label="订单号"
          align="center"
        />
  
        <el-table-column
          prop="productTitle"
          label="商品名称"
          align="center"
        />
        <el-table-column
          prop="payVendor"
          label="支付方式"
          align="center"
        >
        <template #default="scope">
          {{ getPayVendor(scope.row.payVendor) }}
        </template>
        </el-table-column>
        <el-table-column
          prop="orderPriceStr"
          label="支付金额"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
        >
        <template #default="scope">
          {{ scope.row.cuserInfo ? scope.row.cuserInfo.phone : '' }}
        </template>
        </el-table-column>
  
        <el-table-column
          prop="createDate"
          label="创建时间"
          align="center"
        >
          <template #default="scope">
            {{ getDate(scope.row.createDate) }}
          </template>
        </el-table-column>
        
      </el-table>
    
      <!-- 登录账号 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <!-- videoType==1为竖,==2为横 -->
  <script setup>
  //#region  导入
  
  import { rechargeListApi } from '@/apis/userManage.js'
  
  import { useI18n } from "vue-i18n";
  
  import dayjs from "dayjs";
  
  import { useRoute, useRouter } from "vue-router";
  
  const route = useRoute();
  const router = useRouter();
  const { locale } = useI18n();
  const lanChange = ref(locale);
  
  const tableData = ref([]);
    
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
const getPayVendor = (val) => {
  return val === 2 ? "微信" : "支付宝";
};

  const getDate = (val) => {
    return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  };
  
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getListData(pageNum.value, pageSize.value);
  };
  
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    getListData(pageNum.value, pageSize.value);
  };
  
const formInline = ref({
    phone: route.query.phone || '',
    productTitle: '',
    time: ''
})
  
  const getListData = async (PageNum, PageSize) => {
    try {
      let data = {
        PageNum: PageNum || 1,
        PageSize: PageSize || 10,
        phone: formInline.value.phone,
        projectType: 2,
        productTitle: formInline.value.productTitle,
        startDate: formInline.value.time ? formInline.value.time[0] : '',
        endDate: formInline.value.time ? formInline.value.time[1] : '',
      }
      const res = await rechargeListApi(data);
      tableData.value = res.data.list;
      total.value = res.data.total * 1;
    } catch (error) {
      console.log(error, "err");
    }
  };
  
  
  onMounted(() => {
    getListData(1, 10);
  });
  </script>
  
  <style lang="scss" scoped>
  .page {
    height: calc(100vh - 80px);
    // height: calc(100vh - 80px);
    background-color: #ffffff;
    border-radius: 30px 0 0 0;
    overflow: hidden;
    padding: 10vh;
    .addbtn {
      margin-bottom: 2vh;
    }
    .formData {
      padding: 5vh 3vh;
    }
  
    .pagination {
      position: fixed;
      left: 55%;
      bottom: 8vh;
      transform: translateX(-50%);
      border-radius: 5px;
      padding: 10px 20px;
      z-index: 99;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        background-color: #b8b8b873;
      }
    }
  }
  </style>
  