<template>
  <div v-loading="loading">
    <div class="account-item" style="background-color:#00BA88;" @click="onClickItem(data.WECHAT)">
      <div class="name">
        <svg-icon icon-class="wechat"/> 微信支付
      </div>
      <div class="account-no">
        <template v-if="data.WECHAT && data.WECHAT[0] && data.WECHAT[0].accountNo">
          已绑定
        </template>
        <template v-else>
          去绑定
        </template>
      </div>
    </div>
    <div class="account-item" style="background-color:#8EA9E4;" @click="onClickItem(data.BANK_CARD)">
      <div class="name" >
        <template v-if="data.BANK_CARD && data.BANK_CARD[0] && data.BANK_CARD[0].accountNo">
          <div class="bank-logo" :style="{backgroundImage: `url(https://bkaear.market.alicloudapi.com/banklogo/${data.BANK_CARD[0].cardInfo.Icon})` }"/>
          {{data.BANK_CARD[0].cardInfo.bankName}}
        </template>
        <template v-else>
          <svg-icon icon-class="bank"/>
          银行卡
        </template>
      </div>
      <div class="account-no">
        <template v-if="data.BANK_CARD && data.BANK_CARD[0] && data.BANK_CARD[0].accountNo">
          {{data.BANK_CARD[0].accountNo}}
        </template>
        <template v-else>
          去绑定
        </template>
      </div>
    </div>
    <div class="account-item" style="background-color:#8883F0;" @click="onClickItem(data.OFFLINE_IMAGE)">
      <div class="name">
        <svg-icon icon-class="qrcode"/> 线下收款码
      </div>
      <div class="account-no">
        <template v-if="data.OFFLINE_IMAGE && data.OFFLINE_IMAGE[0] && data.OFFLINE_IMAGE[0].accountNo">
          已绑定
        </template>
        <template v-else>
          去绑定
        </template>
      </div>
    </div>

    <el-dialog :visible.sync="showBind" title="请使用微信扫码" width="250px" :show-close="false" center>
      <qr-code text="https://kg.chuangtewl.com/a" height="200px" width="200px" style="display: block;margin:auto;"/>
    </el-dialog>

  </div>
</template>

<script>
import { appGroupAccount } from '@/api/app/account'
import { AccountType } from '@/utils/constants'
import QrCode from '@/components/QrCode/index.vue'

export default {
  name: "MchAccount",
  components: { QrCode },
  data() {
    return {
      loading: false,
      data: {},
      showBind: false,  // 展示绑定二维码
      showQrCode: false,   // 展示线下收款二维码
    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 点击事件
    onClickItem(item) {
      if (item == null || item.length === 0 || item[0] == null) {
        this.showBind = true;
        return;
      }
      let account = item[0];
      if (account.accountType === AccountType.OFFLINE_IMAGE) {
        this.showQrCode = true;
      }
    },
    getData() {
      this.loading = true;
      appGroupAccount().then(res => {
        this.data = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style>
.account-item {
  position: relative;
  width: 100%;
  height: fit-content;
  color: #fff;
  padding: 1em 1.5em;
  border-radius: 10px;
  cursor: pointer;
  transition: .25s;
  .name {
    font-size: 18px;
    display: flex;
    line-height: 24px;
    svg {
      height: 24px;
      font-size: 24px;
    }
    svg,
    .bank-logo {
      margin-right: 8px;
    }
    .bank-logo {
      width: 24px;
      height: 24px;
      border-radius: 12px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
  .account-no {
    text-align: right;
  }
}
.account-item:nth-child(n + 2) {
  margin-top: 0.5em;
}
.account-item:hover {
  transform: scale(1.05);
}
</style>
