<template>
    <div class="h-full flex flex-col id-check">
        <div class="flex items-end py-4 border-bottom">
            <div class="px-4 font-semibold doc-title">居民证件信息</div>
            <div class="text-12">请准确填写您的证件信息，标*内容为必填</div>
        </div>
        <van-form label-width="5em" ref="form"
            error-message-align="right"
            input-align="right"
            class="screen-form">
            <van-field required
                v-model="form.certificateTypeTrans"
                readonly
                name="certificateType"
                label="证件类型"
                placeholder="请选择" />
            <van-field v-model.trim="form.idCard"
                required
                clearable
                name="idCard"  
                label="证件号码"
                placeholder="请输入证件号码"
                :rules="rules.idCard"
            >
            <template #right-icon>
                <div class="flex items-center">
<!--                    <van-uploader :max-size="5 * 1024 * 1024" :after-read="afterRead" max-count="1">
                        <doc-icon type="doc-scan" style="font-size: .2rem;"/>
                    </van-uploader>-->
                </div>
            </template>
            </van-field>
        </van-form>

        <div class="px-4 py-5">
            <div class="text-12 tip">提示：所填写的信息只用于慢病初筛，不会用于其他用途。</div>
        </div>

        <div class="px-5 pb-4 ">
            <van-button type="primary" block round
                @click="submit">下一步</van-button>
        </div>
        
    </div>
</template>

<script>
import { useStore } from '@/resident/store/index.js'
import { idCardRule } from '@/utils/commonReg.js'
import { queryResidentInfo } from '@/api/resident/screening.js'
import { showNotify } from 'vant'

export default {
    data() {
        return {
            form: {
                idCard: '',
                certificateType: 1,
                certificateTypeTrans: ''
            },
            rules: {
                idCard: [{ required: true, message: '请输入' }, idCardRule],
                certificateType: [{ required: true, message: '请选择' }]
            },
            store: useStore()
        }
    },
    inject: ['checkInfo'],
    created() {
        this.init()
    },
    methods: {
        init() {
            this.form.certificateTypeTrans = this.store.getDictValue('DC00004', this.form.certificateType)
        },
        submit() {
            this.$refs.form.validate().then(res => {
                console.log(res, this.form, this.checkInfo)
                queryResidentInfo(this.form).then(res => {
                    console.log('queryResidentInfo', res, this.$parent)
                    const result = res.data || {}

                    if (result.deathStatus === 9) {
                        // 死亡
                        showNotify({ type: 'warning', message: '该居民的状态为死亡' })
                        return
                    }
                    this.checkInfo.residentsRecord = result.residentsRecord
                    this.checkInfo.manageDate = result.manageDate
                    this.checkInfo.manageUnitName = result.manageUnitName
                    this.checkInfo.tips = result.tips
                    this.checkInfo.idCard = this.form.idCard

                    if (result.checkCode === 3) {
                        // 已经纳入慢病管理
                        this.$parent.onNext(2)
                        return
                    }
                    this.$parent.onNext(3)
                })
            }).catch(err => {
                console.warn(err)
            })
        },
        // 证件上传后
        afterRead(file) {
            console.log(file)
            showNotify({ type: 'primary', message: '文件上传' })
        }
    }
}
</script>

<style lang="less" scoped>
@import '../../../utils/common.less';
.tip {
    color: #768092;
    background-color: #F8FAFC;
    padding: 10px 8px;
}
</style>