<script setup lang="ts">

import * as $api from "@/api/auth/index";
import * as $merchantApi from "@/api/merchant/index";
import {onMounted, reactive, ref} from "vue";
import Bind from "@/views/welcome/bind.vue";

const bindRef = ref();
defineOptions({
  name: "Welcome"
});
const merchantKeyInfo: any = {};
onMounted(() => {
  merchantKey();
  $api.hasGoogleOtp().then((res: any) => {
    if (!res.result) {
      bindRef.value!.open();
    }
  });
});
const merchantKey = () => {
  $merchantApi.info().then((res: any) => {
    pageData.formData = res.result;
  });
};
const pageData: any = reactive({
  formData: {
    appId: "",
    appKey: ""
  }
});
</script>

<template>
  <div>
    <div class="max-w-full">
      <el-card style="border-radius: 8px" shadow="hover">
        <template #default v-if="merchantKeyInfo">
          <el-form :model="pageData.formData">
            <el-form-item label="appId:">
              <span>{{ pageData.formData.appId }}</span>
            </el-form-item>
            <el-form-item label="appKey:">
              <span>{{ pageData.formData.appKey }}</span>
            </el-form-item>
          </el-form>
          <a href="/static/支付接口文档.pdf" download="支付接口文档.pdf">下载接口文档</a>
        </template>
      </el-card>
    </div>
    <bind ref="bindRef" />
  </div>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 130px;
}

.ep-bg-purple {
  background: #fff;
}
</style>
