<template>
  <el-form inline>
    <el-form-item label="状态">
      <el-select v-model="status" placeholder="请选择" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="getList()" type="primary">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="out_trade_no" label="订单号" width="180" />
    <el-table-column prop="product_name" label="产品名" width="180" />
    <el-table-column prop="total_amount" label="价格" width="100">
      <template #default="scope">
        <div>{{ scope.row.total_amount }}元</div>
      </template>
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间" />
    <el-table-column prop="payment_time" label="支付时间" />
    <el-table-column label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.payment_status == 'Unpaid'" type="primary">未支付</el-tag>
        <el-tag v-if="scope.row.payment_status == 'Paid'" type="success">已支付</el-tag>
        <el-tag v-if="scope.row.payment_status == 'USERPAYING'" type="info">支付中</el-tag>
        <el-tag v-if="scope.row.payment_status == 'Refunded'" type="warning">已退款</el-tag>
        <el-tag v-if="scope.row.payment_status == 'Close'" type="warning">已关闭</el-tag>
        <el-tag v-if="scope.row.payment_status == 'Failed' || scope.row.payment_status == 'REVOKED'"
          type="danger">支付失败</el-tag>
      </template>
    </el-table-column>

  </el-table>
  <div class="flex-c-c mt20">
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" layout=" prev, pager, next" :total="count"
      background @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { orderList } from "@/utils/api.ts"

onMounted(() => {
  getList();
});

const tableData = ref([])
const count = ref(0)
const page = ref(1)
const pageSize = ref(20)
const status = ref("")

const options = [
  {
    label: "全部",
    value: "0"
  }, {
    label: "未支付",
    value: "Unpaid"
  },
  {
    label: "已支付",
    value: "Paid"
  },
  {
    label: "支付失败",
    value: "PAYERROR"
  },
  {
    label: "已退款",
    value: "Refunded"
  },
  {
    label: "已关闭",
    value: "Close"
  },

]

const handleCurrentChange = (val: number) => {
  page.value = val
  getList()
}

/**
 * @title 获取订单列表
 */
const getList = async () => {
  const params = {
    page: 1,
    size: 20,
  }
  if (status.value&&status.value!='0') {
    params.payment_status = status.value
  }
  const { code, body: { records, total } } = await orderList(params)
  if (code == 200) {
    tableData.value = records
    count.value = total
  }
}
</script>
<style scoped>
.flex-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt20 {
  margin-top: 20px;
}
</style>