<template>
    <div class="h-full flex flex-col id-check">
        <div class="flex py-2">
            <div class="px-4 title">基本信息</div>
            <div class="text-12">请准确填写您的证件信息，标*内容为必填</div>
        </div>
        <van-form label-width="5em" ref="form">
            <van-field required
                v-model="form.certificateTypeTrans"
                is-link
                readonly
                name="certificateType"
                label="证件类型"
                placeholder="请选择"
                disabled/>
            <van-field v-model="form.idCard"
                required
                center
                clearable
                name="idCard"  
                label="证件号码"
                placeholder="请输入"
                :rules="rules.idCard"
            >
            </van-field>
        </van-form>
        <div class="px-4 pb-4 grow flex flex-col justify-end">
            <van-button type="primary" block 
                @click="submit">下一步</van-button>
        </div>
        
    </div>
</template>

<script>
import { useStore } from '@/chronic/store/index.js'
import { idCardRule } from '@/utils/commonReg.js'

export default {
    data() {
        return {
            form: {
                idCard: '',
                certificateType: 1,
                certificateTypeTrans: ''
            },
            rules: {
                idCard: [{ required: true, message: '请输入' }, idCardRule],
                certificateType: [{ required: true, message: '请选择' }]
            }
        }
    },
    setup() {
        const store = useStore()
        return { store }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            console.log(this.store, this.store.getDictValue('DC00004', this.form.certificateType))
            this.form.certificateTypeTrans = this.store.getDictValue('DC00004', this.form.certificateType)
        },
        submit() {
            this.$refs.form.validate().then(res => {
                console.log(res, this.form)
            }).catch(err => {
                console.warn(err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '../../../utils/common.less';
</style>
