<template>
    <div class="auth-type">
       <div style="color:#353535;font-size:20px;font-weight:500;">选择认证方式</div>
       <div style="color:#B6B5BA;font-size:14px;margin-top:20px;">一位用户仅能认证一次，所填信息绝对保密，数据用于审核真实性。</div>
       <van-radio-group v-model="type" style="display:flex; flex-direction:row;justify-content: center;margin-top:20px;">
        <van-radio
          v-for="({name, icon}, index) in authTypes"
          :key="index"
          :name="name">
          <van-image :src="icon" fit="contain" width="88px"></van-image>
        </van-radio>
      </van-radio-group>
      <van-button block color="#3F79FE"  type="primary" :to="{name: type}" style="margin-top: 60px;">下一步</van-button>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
})
export default class AuthType extends Vue {
  private type: string = 'Personal';
  private readonly authTypes: any[] = [
    {
      name: 'Personal',
      icon: require('@/assets/personal.png'),
    },
    {
      name: 'Enterprise',
      icon: require('@/assets/company.png'),
    },
  ];
}
</script>
<style scoped lang="scss">
  .auth-type{
    padding: 17px;
    ::v-deep .van-radio{
      display: flex;
      flex-direction: row-reverse;
    }
  }
</style>