<template>
  <div>
    <a-card style="box-sizing:border-box;padding:30px">
      <!-- 选择下单的应用列表 -->
      <a-form>
        <div style="display:flex;flex-direction:row">
          <!-- <p style="margin-top:9px;margin-right:10px;"></p> -->
          <a-form-item label="" class="table-head-layout">
            <span>应用：</span>
            <a-select v-model:value="vdata.appId" style="width:300px" @change="changeAppId">
              <a-select-option key="">应用APPID</a-select-option>
              <a-select-option v-for="(item) in vdata.mchAppList" :key="item.appId">{{ item.appName }} [{{ item.appId }}]</a-select-option>
            </a-select>
            <span style="margin-left: 30px;">门店：</span>
            <a-select v-model:value="vdata.storeId" style="width:300px;" @change="changeStoreId">
              <a-select-option key="">选择门店</a-select-option>
              <a-select-option v-for="(item) in vdata.mchStoreList" :key="item.storeId">{{ item.storeName }} [{{ item.storeId }}]</a-select-option>
            </a-select>
          </a-form-item>
        </div>
      </a-form>

      <!-- 未配置支付方式提示框 -->
      <a-divider v-if="!vdata.appId">请选择应用APPID</a-divider>
      <a-divider v-else-if="vdata.noConfigText">您尚未配置任何支付方式</a-divider>
      <a-divider v-else />

      <div v-if="vdata.cashierUrl && vdata.isShowCashier">
        <div>
          <span>收银台地址链接：</span><br>
          <a :href="vdata.cashierUrl" target="_blank">{{ vdata.cashierUrl }}</a>
          <a-button v-clipboard:copy="vdata.cashierUrl" v-clipboard:success="() => $infoBox.message.success('复制成功')" style="margin-left: 10px;margin-bottom: 10px;" size="small" type="primary">复制</a-button>
        </div>
        <div>
          <span>收银台地址二维码：</span>
          <div style="padding: 10px 0 30px 0px;"><QrcodeVue :value="vdata.cashierUrl" :size="200" /></div>
        </div>
      </div>

      <!-- 支付测试面板 v-if=""-->
      <!-- <a-button v-if="$access('ENT_MCH_GET_CASHIER_URL')" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff" @click="immediatelyPay">创建收银台</a-button> -->
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { API_URL_MCH_APP, API_URL_MCH_STORE_LIST, req, $payTest, $payTestCreateCashier } from '@/api/manage' // 接口
import {ref, onMounted, reactive, getCurrentInstance,nextTick} from 'vue'
import {useRoute} from 'vue-router'
import QrcodeVue from 'qrcode.vue'
// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties


    const route = useRoute()
    const vdata =  reactive({
      mchAppList: [] as any, // app列表
      mchStoreList: [] as any, // 门店列表
      appId: '', // 已选择的appId
      storeId: '', // 已选择的门店ID
      appPaywayList: [] as any, // 商户app支持的支付方式
      noConfigText: false, // 尚无任何配置分割线提示文字
      cashierUrl: '',  // 收银台地址
      isShowCashier: true as any

    })
    const payTestBarCode =ref()
    const payTestModal = ref()
    onMounted(()=>{
        // 获取传入的参数，如果参数存在，则为appId 重新赋值
        const appId = route.params.appId as string
        
        if (appId) {
          vdata.appId = appId // appId赋值
          
          // appPaywayListHandle(appId) // 调用appPaywayListHandle，展示支付方式
        }
    
        // 请求接口，获取所有的appid，只有此处进行pageSize=-1传参
        req.list(API_URL_MCH_APP, { pageSize: -1, state: 1 }).then(res => {
          vdata.mchAppList = res.records
          if (vdata.mchAppList.length > 0) {
            // 赋予默认值
            //vdata.appId = vdata.mchAppList[0].appId
            //TODO
            if(vdata.appId == '') vdata.appId = vdata.mchAppList[0].appId
            // 根据appId的值，动态显示支付方式
            // appPaywayListHandle(vdata.appId)
            one()
          }
          
        })
        function one (){
          // 请求接口，获取商户所有门店，只有次数进行pageSize=-1传参
          req.list(API_URL_MCH_STORE_LIST, { pageSize: -1 }).then(res => {
            vdata.mchStoreList = res.records
            if (vdata.mchStoreList.length > 0) {
              // 赋予默认值
              if(vdata.storeId == '') vdata.storeId = vdata.mchStoreList[0].storeId
              two()
            }
          })
        }
        function two (){
          $payTestCreateCashier({
            appId: vdata.appId, // appId
            storeId: vdata.storeId, // storeId
          }).then(res => {
            vdata.cashierUrl = res
          }).catch(() => {
            payTestBarCode.value.processCatch()
          })
        }
    })

    // 变更 appId的事件
    function changeAppId (value) {
      immediatelyPay()
    }
    // 变更 门店ID的事件
    function changeStoreId (value) {
      immediatelyPay()
    }
    // 立即支付按钮
    function immediatelyPay () {

      // 判断是否选择门店
      if (vdata.appId === '') {
        vdata.isShowCashier = false
        return false
      }
      // 判断是否选择门店
      if (vdata.storeId === '') {
        vdata.isShowCashier = false
        return false
      }

      vdata.isShowCashier = true
      $payTestCreateCashier({
        appId: vdata.appId, // appId
        storeId: vdata.storeId, // storeId
      }).then(res => {
        vdata.cashierUrl = res
      }).catch(() => {
        payTestBarCode.value.processCatch()
      })
    }

</script>

<style scoped lang="css">
  @import './payTest.css';
</style>
