<template>
    <LayoutApp class="yohoufo-area-choose-page" title="选择国家或地区">
      <div class="area-list">
        <div class="area-item" v-for="(item, index) in list" :key="index" @click="chooseArea(item.value)">
          <span class="code">{{item.value}}</span>
          {{item.name}}
        </div>
      </div>
    </LayoutApp>
</template>

<script>
const areaList = [{
    value: '+61',
    name: '澳大利亚'
}, {
    value: '+82',
    name: '韩国'
}, {
    value: '+1',
    name: '加拿大'
}, {
    value: '+60',
    name: '马来西亚'
}, {
    value: '+1',
    name: '美国'
}, {
    value: '+81',
    name: '日本'
}, {
    value: '+65',
    name: '新加坡'
}, {
    value: '+44',
    name: '英国'
}, {
    value: '+86',
    name: '中国'
}, {
    value: '+853',
    name: '中国澳门'
}, {
    value: '+886',
    name: '中国台湾'
}, {
    value: '+852',
    name: '中国香港'
}];

export default {
  name: 'areaChoose',
  data() {
    return {
      list: areaList
    };
  },
  mounted() {
    // this.$yoho.authRealName();
  },
  methods: {
    chooseArea(code) {
      this.$root.$createThirdBind().changeArea(code);
      this.$router.go(-1);
    }
  }
};
</script>


<style lang="scss" scoped>
.area-list {
  padding: 0 40px;
  max-height: 100%;
  overflow-y: scroll;
}

.area-item {
  height: 100px;
  line-height: 100px;
  font-size: 32px;
  color: #222;
  border-bottom: 1px solid #e8e8e8;

  &:last-child {
    border-bottom: 0;
  }

  .code {
    float: right;
  }
}

</style>