<template>
  <a-modal
    v-model:visible="vdata.visible"
    title="获取商户通APP/小程序"
    :footer="null"
    width="900px"
    :bodyStyle="{
      padding: '0',
    }"
  >
    <div class="img-content">
      <div class="app-content">
        <div class="title">安卓APP下载</div>
        <QrcodeVue v-if="vdata.mchDownloadUrl" class="Qrcode" :value="vdata.mchDownloadUrl" />
        <div v-else class="down-none">暂无下载链接</div>
        <div class="tips">请使用手机浏览器扫码下载商户通APP</div>
      </div>
      <div class="wechat-contnent">
        <div class="title">微信小程序获取</div>
        <img :src="vdata.getSiteInfo.appletImgUrl" alt="">
        <div class="tips">请使用手机微信扫码使用商户通小程序</div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose } from 'vue'
import QrcodeVue from 'qrcode.vue'
import { useOem } from '@/store/modules/oem' // OEM信息
import { $getAppDownloadUrl } from '@/api/manage'
const vdata: any = reactive({
  visible: false,
  type: '',
  getSiteInfo: useOem().getSiteInfo(),
})
const open = (v: any) => {
  vdata.type = v
  vdata.visible = true
  $getAppDownloadUrl().then((res) => {
    console.log('res', res)
    vdata.mchDownloadUrl = res
  })
}

defineExpose({ open })
</script>

<style lang="less" scoped>
.img-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  .app-content,
  .wechat-contnent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    box-sizing: border-box;
    width: 50%;
    height: 400px;
  }
  .wechat-contnent {
    border-left: 1px solid #dedede;
    img {
      width: 75%;
    }
  }
  .Qrcode {
    box-shadow: border-box;
    padding: 25px !important;
    width: 75% !important;
    height: auto !important;
  }
  .title {
    font-size: 16px;
    margin-bottom: 25px;
  }
  .tips {
    margin-top: 15px;
    color: #666;
  }
}
.down-none{
  height: 270px;
}
</style>
