<template>
  <div>
    <div class="title">订单管理</div>
    <el-form
      ref="searchFormRef"
      class="form"
      :inline="true"
      label-width="98px"
      :model="queryParams"
    >
      <el-form-item label="订单编号" prop="order_no">
        <el-input
          clearable
          placeholder="请输入"
          style="width: 220px"
          v-model="queryParams.order_no"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单类型" prop="order_type">
        <el-select style="width: 220px" placeholder="请输入" v-model="queryParams.order_type">
          <el-option value="钱包充值" label="钱包充值"></el-option>
          <el-option value="会员购买" label="会员购买"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="100px">
        <el-button icon="Search" type="primary" @click="handleQuery"> 搜索 </el-button>
        <el-button icon="RefreshRight" @click="resetQuery"> 重置 </el-button>
      </el-form-item>
    </el-form>

    <!-- <div style="margin-bottom: 20px">
      <el-button icon="Plus" type="primary" @click="add"> 新建 </el-button>
    </div> -->
    <div ref="tableContainerEl" class="table_border table">
      <el-table
        ref="tableRef"
        :data="tableData"
        v-loading="loading"
        header-row-class-name="table-header"
      >
        <el-table-column align="center" label="订单编号" prop="order_no" show-overflow-tooltip />
        <el-table-column align="center" label="状态" prop="status" width="100">
          <template #default="{ row }">
            <span v-if="row.status === 'created'">待付款</span>
            <span v-if="row.status === 'pending'">待支付</span>
            <span v-if="row.status === 'paid'">已支付</span>
            <span v-if="row.status === 'failed'">支付失败</span>
            <span v-if="row.status === 'canceled'">已取消</span>
            <span v-if="row.status === 'refunded'">已退款</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名称" prop="user_name" show-overflow-tooltip />
        <el-table-column align="center" label="用户ID" prop="user_id" width="100" />
        <el-table-column align="center" label="订单类型" prop="order_type" width="100" />
        <el-table-column align="center" label="订单金额(¥)" prop="amount" width="120" />
        <el-table-column align="center" label="支付渠道" prop="pay_channel" width="100">
          <template #default="{ row }">
            <span v-if="row.pay_channel === 'wallet'">钱包</span>
            <span v-if="row.pay_channel === 'wxpay'">微信</span>
            <span v-if="row.pay_channel === 'alipay'">支付宝</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="CreatedAt" width="220">
          <template #default="{ row }">
            {{ row.created_at ? dayjs(row.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" @click="downloadRecord(row)" v-if="row.result_url">
              下载
            </el-button>
            <el-button link type="primary" @click="openDialog(row)"> 日志 </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:limit="queryParams.size"
      v-model:page="queryParams.page"
      @pagination="getList"
    />

    <HandleDialog v-if="isShowDialog" :row="currentRow" @closed="isShowDialog = false" />
  </div>
</template>

<script setup>
import HandleDialog from './HandleDialog.vue'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'

const isShowDialog = ref(false)
const loading = ref(false)

const currentRow = ref({})
const openDialog = (row) => {
  currentRow.value = row
  isShowDialog.value = true
}
const queryParams = ref({
  page: 1,
  size: 10,
  order_type: '',
})
const total = ref(0)
const tableData = ref([])
const getList = () => {
  loading.value = true
  RPC.post('/membership/order/list', queryParams.value)
    .then((res) => {
      tableData.value = res.list
      total.value = res.total
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  queryParams.value.page = 1
  getList()
}

const resetQuery = () => {
  queryParams.value = {
    page: 1,
    size: 10,
  }
  getList()
}

getList()

const downloadRecord = (record) => {
  const link = document.createElement('a')
  link.href = record.result_url
  link.download = record.file_name || 'download'
  // link.target = "_blank";
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>
