<template>
    <div class="main">
      <el-card shadow="always"> 
        <el-space alignment="start" :size="30">
        充值金值：
        <el-input-number v-model="form.paymentPrice" :precision="0" :step="1" :max="100" :min="1" />
        <el-button type="primary" @click="handlePayment" :loading="loading">充值</el-button>
        </el-space>
      </el-card>
      <div style="margin-top:5px;">
        <!--<el-alert title="支付通道暂时有问题，如需急用，可加客服微信 K-coder 手动帮您支付" type="warning" :closable="false" />-->
        <!--<el-alert title="第一次充值建议先小额进行试用，充值最高100元，如遇支付受限，请点支付受限按钮" type="warning" :closable="false" />-->
        <el-alert title="第一次充值建议先小额进行试用，充值最高100元" type="warning" :closable="false" />
      </div>
    <div class="main2">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>充值历史</span>
          </div>
        </template>
        <el-table v-loading="loading" :data="orderList">
        <el-table-column label="订单号" align="center" prop="orderNo" />
        <el-table-column label="金额" align="center" prop="paymentPrice" />
        <el-table-column label="是否支付" align="center" prop="isPay">
          <template #default="scope">
            <dict-tag :options="sys_yes_no" :value="scope.row.isPay"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="支付方式" align="center" prop="paymentWay">
          <template #default="scope">
            <dict-tag :options="order_payment_way" :value="scope.row.paymentWay"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Refresh" @click="refreshOrderStatus(scope.row.orderNo)">手动刷新</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      </el-card>
    </div>
    <el-dialog title="请使用支付宝扫码充值" v-model="open" width="500px" :before-close="cancel" append-to-body>
      <div v-if="payType == '1'">
        <el-alert
          title="等待用户扫码中"
          description="扫码后如支付完成点击确认按钮即可查看已完成订单"
          type="warning"
          :closable="false">
        </el-alert>
        <center>
          <img :src="'https://xorpay.com/qr?data='+payUrl" alt="" width="300" />
        </center>
        <center>
          <img src="/src/assets/logo/alipay-logo.jpg" alt="" width="120" />
        </center>
      </div>
      <div v-if="payType == '2'">
        <el-alert
          title="请再次扫码"
          description="扫码后输入刚才的订单金额，备注一下用户名，支付后会帮您确认订单（微信客服请添加 K-coder）"
          type="warning"
          :closable="false">
        </el-alert>
        <center>
          <img src="/src/assets/images/alipay.jpg" alt="" width="300" />
        </center>
      </div>
      <template #footer>
        <div class="dialog-footer" v-if="payType == '1'">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="open = false">确认</el-button>
        </div>
        <div class="dialog-footer" v-if="payType == '2'">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="open = false">确认</el-button>
        </div>
      </template> 
    </el-dialog>
  </div>
</template>

<script setup name="money">
import { payment, refreshStatus }  from "@/api/order/payment";
import { currentUserListOrder } from "@/api/order/order";
import { getUserProfile } from "@/api/system/user";

const { proxy } = getCurrentInstance();
const { order_status, order_payment_way, sys_del_flag, sys_yes_no } = proxy.useDict('order_status', 'order_payment_way', 'sys_del_flag', 'sys_yes_no');
const orderList = ref([]);
const loading = ref(false);
const total = ref(0);
const open = ref(false);
const payUrl = ref("");
const aoid = ref("");
const payType= ref("1")
const data = reactive({
  form: {
    paymentPrice: 10,
    paymentWay: "alipay"
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId: null,
    orderNo: null,
    paymentWay: null,
    isPay: null,
    status: null,
    transactionId: null
  },
})
const { queryParams, form } = toRefs(data);

// 发起支付
function handlePayment() {
  payType.value = '1'
  loading.value = true
  payment(form.value).then(response => {
    payUrl.value = response.data.info.qr
    aoid.value = response.data.aoid // XorPay平台订单唯一标识
    loading.value = false
    open.value = true
  });
}

// 刷新订单状态
function refreshOrderStatus(orderNo) {
  refreshStatus(orderNo).then(response => {
    proxy.$modal.msgSuccess(response.msg);
    getList()
  })
}

function reset() {
  payUrl.value = ""
  aoid.value = ""
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
  getList()
}
/** 查询订单列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  currentUserListOrder(queryParams.value).then(response => {
    orderList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

proxy.$notify({
    title: '充值须值',
    message:  '<div>1. 充值后不支持退款，建议先小额充值进行测试，平台不限制最低充值金额，请按需充值。</div>'+
              '<div>2. 定价页面没写的模型和接口即不支持，不是所有的接口都支持，有特殊需求的朋友要注意。</div>'+
              '<div>3. 支付宝充值到账一般为几秒钟到几分钟，但是偶尔也会遇到延迟比较高的情况，如果遇到支付状态长时间没有变化，请点击手动刷新更新状态即可</div>'+
              '<div>4. 商务订制等大需求，请联系客服</div>',
    type: 'warning',
    dangerouslyUseHTMLString: true,
    duration: 0
});

getList()
</script>

<style scoped lang="scss">
.main {
  padding: 20px;
}

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

