<template>
  <div v-if="xhkOpened" class="card-box xhk-state">
    <img class="xhk-icon" src="https://img.lkbang.net/xcx/xhk-icon.png" />
    <div v-if="parseInt(xhkInfo.accountStatus) === 4" class="xhk-title">
      <div class="xhk-bold">激活享花卡</div>
      <span class="display-block">已获得消费额度：¥{{ xhkInfo.creditTotalAmount || 0 }}</span>
      <span class="color-gray">激活享花卡，即可使用额度，享最高40天免息</span>
    </div>
    <div v-else class="xhk-title">
      <div class="xhk-bold">开通享花卡</div>
      <span>使用享花卡支付，享最高40天免息！</span>
    </div>
    <button
      :class="[xhkBtnState ? '' : 'disabled']"
      class="card-xhk-btn btn-position"
      @click="handleOpen('xhk-btn-popup')"
    >
      {{ xhkBtnText }}
    </button>
  </div>
  <div v-else class="card-box">
    <div class="card-title">
      <span>{{ quotaInfo.title }}</span>
      <!-- <div class="card-inforecognition" @click="open('xhk-popup')">查看卡片信息&nbsp; <span class="cell-right iconfont icon-arrow arrows"></span></div> -->
    </div>
    <div class="card-main">
      <div class="tj-sction">
        <div class="tj-item">
          <span class="num">{{ xhkInfo.canUseAmt }}</span>
          <span>{{ quotaInfo.leftText }}</span>
        </div>
        <div class="tj-item" @click="handleToPayBack">
          <span class="num">{{ xhkInfo.repayAmt }}</span>
          <span>{{ quotaInfo.rightText }}</span>
        </div>
      </div>
      <div v-if="!xhkInfo.faced && $config.xincheng" class="face-recognition">
        <div class="face-recognition-txt">
          因您尚未完成活体认证，最高累计可使用<span>200</span>额度
        </div>
        <button @click="handleToFace">
          去认证<span class="cell-right iconfont icon-arrow arrows" />
        </button>
      </div>
    </div>
    <div class="card-footer">
      <template v-if="$config.xincheng">
        <div v-if="xhkInfo.overdue" class="xhk-txt" style="color: #EC1500">
          您已逾期，以免造成不良影响请尽快还款！
        </div>
        <div v-else-if="parseInt(xhkInfo.repayAmt) > 0" class="xhk-txt">
          {{ xhkInfo.repayDesc }}
        </div>
        <div v-else class="xhk-txt">使用享花卡支付，享最高40天免息！</div>
        <button
          v-if="parseInt(xhkInfo.repayAmt) !== 0"
          class="card-xhk-btn"
          :class="!xhkInfo.overdue && parseInt(xhkInfo.repayAmt) == 0 ? 'disabled' : ''"
          @click="handleToPayBack"
        >
          立即还款
        </button>
      </template>
    </div>
  </div>
</template>
<script>
import { getFaceUrl, kaGetNextUrl } from '@/api/user.api';
export default {
  components: {},
  props: {
    xhkOpened: {
      type: Boolean,
      default: false
    },
    xhkInfo: {
      type: Object,
      default: () => ({})
    },
    xhkBtnState: {
      type: Boolean,
      default: false
    },
    xhkBtnText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  computed: {
    quotaInfo() {
      return this.$config?.quotaInfo || {};
    }
  },

  mounted() {},
  methods: {
    handleToPayBack() {
      this.$router.push({ name: 'bill' });
    },
    async handleOpen() {
      const url = await this.getKaGetNextUrl('ka');
      if (url) {
        window.location.href = `${url}&returnUrl=${window.location.href}&h=0`;
        return;
      }
      this.$router.push({ name: 'Login' });
    },
    async handleToFace() {
      try {
        const params = {
          return_url: window.location.href,
          channel: localStorage.get('vccChannel'),
          user_id: localStorage.get('uuid')
        };
        const [data] = await getFaceUrl(params);
        window.location.href = `${data}&h=0`;
      } catch (error) {
        console.log(error);
      }
    },
    async getKaGetNextUrl() {
      const [data] = await kaGetNextUrl();
      if (data) {
        return data.nextUrl || '';
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped />
