<template>
  <div class="footer-info">
    <div v-if="oemSiteInfo.copyrightInfo?.configDesc">
      <span @click="jumpUrl(oemSiteInfo.copyrightInfo.configUrl)">{{ oemSiteInfo.copyrightInfo.configDesc }}</span>
    </div>
    <div class="top-list">
      <div v-if="oemSiteInfo.reportIcp?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportIcp.configUrl)">
        <img src="./icons/icon-icp.png" alt="">
        ICP备案：{{ oemSiteInfo.reportIcp.configDesc }}
      </div>
      <div v-if="oemSiteInfo.reportJh?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportJh.configUrl)">
        <img src="./icons/icon-pay.png" alt="">
        中国支付清算协会备案编码：{{ oemSiteInfo.reportJh.configDesc }}
      </div>
      <div v-if="oemSiteInfo.reportDx?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportDx.configUrl)">
        <img src="./icons/icon-telecom.png" alt="">
        电信增值业务许可证编号：{{ oemSiteInfo.reportDx.configDesc }}
      </div>
      <div v-if="oemSiteInfo.reportGa?.configDesc" class="t-list-item" @click="jumpUrl(oemSiteInfo.reportGa.configUrl)">
        <img src="./icons/icon-public.png" alt="">
        公安备案：{{ oemSiteInfo.reportGa.configDesc }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useOem } from '@/store/modules/oem'
// 获取网站信息
const oemSiteInfo: any = useOem().getSiteInfo()
// 判断链接 是否 合法 不合法 自动 拼接 https
const url_REG = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
const jumpUrl = (url: any) => {
  if (!url) return
  if (!url_REG.test(url)) url = 'https://' + url 
  const a = document.createElement('a')
  a.target = '_blank'
  a.href = url
  a.click()
}
</script>

<style lang="less" scoped>
.footer-info {

  padding-bottom: 25px;
  color: #b3b3b3;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-align: center;

  span {
    cursor: pointer;
  }

  img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
  }

  .top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;

    .t-list-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      margin-left: 30px;
      cursor: pointer;
    }
  }

  a {
    color: #b3b3b3;
  }
}
</style>
