<script setup lang="ts">
import * as $merchantApi from "@/api/merchant";
import * as $channelApi from "@/api/channel";
import Edit from "@/views/paytest/modules/edit.vue";
import {onMounted, reactive, ref} from "vue";
import {message} from "@/utils/message";
import * as $api from "@/api/order";

const editRef = ref();
const formRef = ref();
const payTest = () => {
  $api.test(pageData.formData).then((res: any) => {
      if(res.result.code==200){
        editRef.value!.open( res.result.result);
      }else{

          message(res.result.message)
      }
  })
  genbizOrderNoeNo();
};
// 结算台下部分内容
const payMoneyList = ref([
  // 支付金额列表
  {label: '0.01', value: 0.01},
  {label: '0.02', value: 0.02},
  {label: '0.03', value: 0.03},
  {label: '0.1', value: 0.1},
  {label: '1.00', value: 1.0},
  {label: '自定义', value: null},
])
// 初始化数据
const initData = {
  bizOrderNo: undefined,
  title: undefined,
  channelId: undefined,
  totalMoney: undefined
};
// 页面数据
const pageData: any = reactive({
  dialogVisible: false,
  title: "",
  formLoading: false,
  mode: "add",
  isUpdate: false,
  // 表单数据
  formData: initData,
  channelList: null
});
const payMoneyValue = ref(0.01);
const payMoneyShow = ref(false);

/**
 * 生成业务号
 */
function genbizOrderNoeNo() {
  pageData.formData.bizOrderNo = 'P' + new Date().getTime();

}
/**
 * 查询通道
 */
function queryChannel() {
  $channelApi.queryList(pageData.formData).then((res: any) => {
   console.log(res.result);
   pageData.channelList = res.result;
  });
}

/**
 * 支付金额变动
 */
function payMoneyValueChange() {
  pageData.formData.totalMoney = null;
  if (payMoneyValue.value == null) {
    payMoneyShow.value = true;
  } else {
    pageData.formData.totalMoney = payMoneyValue.value;
    payMoneyShow.value = false;
  }
}

onMounted(() => {
  queryChannel();
  genbizOrderNoeNo();
  pageData.formData.title = "测试支付";
  pageData.formData.totalMoney=0.01;

});

</script>
<template>
  <div>
    <el-card class="min-w-[800px]" style="border-radius: 8px" shadow="hover">
      <template #header>
        <el-text class="mx-1" type="primary" size="large">支付信息</el-text>
      </template>
      <div class="el-dialog-content">
        <el-form
            ref="formRef"
            :model="pageData.formData"
            style="margin: 20px 0"
            label-width="auto"
        >
          <el-form-item label="通道" prop="status">
            <el-select
              v-model="pageData.formData.channelId"
              clearable
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in pageData.channelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="业务单号">
            <el-input style="width: 200px"
                      v-model="pageData.formData.bizOrderNo"
                      clearable
                      placeholder="请输入业务单号"
            />
            <el-button type="primary" class="ml-3" style="height: 25px" @click="genbizOrderNoeNo">生成</el-button>
          </el-form-item>
          <el-form-item label="支付标题">
            <el-input
                v-model="pageData.formData.title"
                clearable
                placeholder="请输入支付标题"
            />
          </el-form-item>
          <el-form-item label="支付金额(元)：">
            <el-radio-group v-model="payMoneyValue" @change="payMoneyValueChange">
              <el-radio :value="item.value" v-for="(item, index) in payMoneyList" :key="index">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
            <el-input-number v-if="payMoneyShow"
                             style="width: 120px !important"
                             :min="0.01"
                             :precision="2"
                             v-model="pageData.formData.totalMoney"
            />
          </el-form-item>
          <div style="text-align: right">
                  <span
                      v-if="pageData.formData.totalMoney"
                      style="color: #fd482c; font-size: 18px; padding-right: 10px"
                  >{{ "¥ " + pageData.formData.totalMoney }}</span>
            <el-button
                type="primary"
                :disabled="!pageData.formData.totalMoney"
                @click="payTest"
            >立即支付
            </el-button>
          </div>
        </el-form>
      </div>
    </el-card>
    <edit ref="editRef"/>
  </div>
</template>
