<template>
  <div>
    <!-- 个人认证 -->
    <BackBar :title="$t('auth.l36')"></BackBar>
    <div class="container">
      <div class="info-box flex">
        <img class="icon" src="/img/auth/icon1.png" alt="极度证券">
        <div>
          <!-- 认证成功 -->
          {{ $t('auth.l29') }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          <!-- 国家/地区 -->
          {{ $t('auth.l3') }}
        </div>
        <div class="value">{{ identityCountry }}</div>
      </div>
      <div class="item">
        <div class="label">
          <!-- 姓名 -->
          {{ $t('auth.l5') }}
        </div>
        <div class="value">{{ userInfo.identity_name }}</div>
      </div>
      <div class="item">
        <div class="label">
          <!-- 证件类型 -->
          {{ $t('auth.l7') }}
        </div>
        <div class="value">{{ identityTypeText[userInfo.identity_type] }}</div>
      </div>
      <div class="item">
        <div class="label">
          <!-- 证件号码 -->
          {{ $t('auth.l8') }}
        </div>
        <div class="value">{{ identityCode }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import BackBar from '@/components/backBar'
import { mapGetters } from 'vuex'
import { getCountryList } from '@/api/app'
export default {
  components: {
    BackBar
  },
  data () {
    return {
      list: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    identityTypeText() {
      return {
        '1': this.$t('auth.l11'),
        '2': this.$t('auth.l12'),
        '3': this.$t('auth.l13'),
      }
    },
    identityCode() {
      return this.userInfo.identity_code ? `${this.userInfo.identity_code.slice(0, 3)}***${this.userInfo.identity_code.slice(this.userInfo.identity_code.length - 3)}` : ''
    },
    identityCountry() {
      var identity_country = ''
      this.list.forEach(item => {
        if (item.code == this.userInfo.identity_country) {
          identity_country = item.name
        }
      })
      return identity_country || this.userInfo.identity_country
    }
  },
  created () {
    this.getCountryList()
  },
  methods: {
    getCountryList() {
      getCountryList().then(res => {
        this.list = res.list || []
      }).catch(() => {})
    },
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 6px 18px;
}
.info-box {
  justify-content: center;
  background-color: #E1FFEA;
  border-radius: 6px;
  font-weight: 500;
  color: #3CD56B;
  font-size: 16px;
  height: 62px;
  margin-bottom: 26px;
  .icon {
    width: 40px;
    margin-right: 7px;
  }
}
.item {
  margin-bottom: 20px;
  .label {
    color: #4F4F4F;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .value {
    color: #C7C7C7;
  }
}
::v-deep .vue-country-intl {
  .country-intl-input-wrap {
    border: none;
  }
  .country-intl-input {
    padding: 0;
    height: 14px;
  }
  .country-intl-label {
    height: 16px;
    padding-left: 0;
    color: #C7C7C7;
    font-size: 14px;
  }
  .dropdown-flag {
    display: none;
  }
}
</style>