<template>
    <div>
        <!-- <van-nav-bar title='修改居民信息' left-text='' left-arrow
                     @click-left='toBack'></van-nav-bar> -->
        <DocNavBar title="修改居民信息" class="shrink-0"></DocNavBar>
        <div class='p-4 h-overflow'>
            <van-form ref='form'>
                <div class='title'>居民信息</div>
<!--                    <div class='label-title'>证件类型</div>
                    <van-field
                        v-model='form.certificateTypeName'
                        is-link
                        readonly
                        placeholder='证件类型'
                        class='input-back mt-2 form-input'
                        :rules='rules.certificateTypeName'
                    />-->
                    <div class='label-title mt-5'>证件号码</div>
                    <van-field
                        v-model='form.idCard'
                        readonly
                        placeholder='证件号码'
                        class='input-back mt-2 form-input'
                        :rules='rules.idCard'
                    />
                    <div class='label-title mt-5'>姓名</div>
                    <van-field
                        v-model='form.residentName'
                        clearable
                        placeholder='姓名'
                        class='input-back mt-2 form-input'
                        :rules='rules.residentName'
                    />
                    <div class='label-title mt-5'>性别</div>
                    <van-field
                        v-model='form.genderName'
                        is-link
                        readonly
                        placeholder='性别'
                        class='input-back mt-2 form-input'
                        :rules='rules.genderName'
                    />
                    <div class='label-title mt-5'>出生日期</div>
                    <van-field
                        v-model='form.dataBirth'
                        is-link
                        readonly
                        placeholder='出生日期'
                        class='input-back mt-2 form-input'
                        :rules='rules.dataBirth'
                    />
                <div class='label-title mt-5'>本人电话</div>
                <van-field
                    v-model='form.telephone'
                    clearable
                    placeholder='本人电话'
                    class='input-back mt-2 form-input'
                    :rules='rules.telephone'
                />
                    <div class='label-title mt-5'>民族</div>
                    <van-field
                        v-model='form.nationalName'
                        is-link
                        readonly
                        name='national'
                        placeholder='请选择'
                        class='input-back mt-2 form-input'
                        :rules='rules.nationalName'
                        @click='showNational = true' />
                    <van-popup v-model:show='showNational' position='bottom'>
                        <van-picker
                            :columns-field-names="{ text: 'name', value: 'value' }"
                            :columns="store.getDict('DC00006')"
                            @confirm='nationalConfirm'
                            @cancel='showNational = false'
                        />
                    </van-popup>
                    <div class='label-title mt-5'>年龄</div>
                    <van-field
                        v-model='form.currentAge'
                        readonly
                        placeholder='年龄'
                        class='input-back mt-2 form-input'
                        :rules='rules.currentAge'
                    />

                    <div class='label-title mt-5'>现住址</div>
                    <van-field
                        v-model='form.presentCodeName'
                        is-link
                        readonly
                        placeholder='请选择所在地区'
                        class='input-back mt-2 form-input'
                        :rules='rules.presentCodeName'
                        @click='showPresent = true'
                    >
                        <template #input>
                            <span class='text-end'>{{ form.presentCodeName }}</span>
                        </template>
                    </van-field>
                    <van-popup v-model:show='showPresent' :close-on-click-overlay='false' position='bottom'>
                        <DocAddress v-model:value='form.presentCode' @close='showPresent = false'
                                    :viewData='addressRecord.presentCode'
                                    @change='presentChange' />
                    </van-popup>
                    <div class='no-req-label mt-5'>详细地址</div>
                    <van-field
                        v-model='form.nowAddress'
                        clearable
                        class='input-back mt-2 form-input'
                        placeholder='请填写详细地址'
                        maxlength='50'
                    />
                    <div class='flex items-center justify-between mt-5'>
                        <div class='label-title '>户口地址</div>
                        <van-button size='mini' plain type='primary'
                                    @click='setRegisteredAddress'>同步现住址
                        </van-button>
                    </div>

                    <van-field
                        v-model='form.registeredCodeName'
                        is-link
                        readonly
                        placeholder='请选择所在地区'
                        class='input-back mt-2 form-input'
                        :rules='rules.registeredCode'
                        @click='showRegistered = true'
                    >
                        <template #input>
                            <span class='text-end'>{{ form.registeredCodeName }}</span>
                        </template>
                    </van-field>
                    <van-popup v-model:show='showRegistered' :close-on-click-overlay='false' position='bottom'>
                        <DocAddress v-model:value='form.registeredCode' @close='showRegistered = false'
                                    :viewData='addressRecord.registeredCode'
                                    @change='registeredChange' />
                    </van-popup>
                    <div class='no-req-label mt-5'>详细地址</div>
                    <van-field
                        v-model='form.permanentAddress'
                        clearable
                        class='input-back mt-2 form-input'
                        placeholder='请填写详细地址'
                        maxlength='50'
                    />
                <div class='title mt-5'>联系人信息</div>
                <div class='no-req-label mt-5'>联系人姓名</div>
                <van-field
                    v-model='form.contactName'
                    clearable
                    placeholder='联系人姓名'
                    class='input-back mt-2 form-input'
                    :rules='rules.contactName'
                />
                <div class='no-req-label mt-5'>与居民关系</div>
                <van-field
                    v-model='form.relationName'
                    readonly
                    is-link
                    placeholder='与居民关系'
                    class='input-back mt-2 form-input'
                    @click='showRelation= true'
                />
                <van-popup v-model:show='showRelation' position='bottom'>
                    <van-picker
                        :columns-field-names="{ text: 'name', value: 'value' }"
                        :columns="store.getDict('DC00023')"
                        @confirm='relationlConfirm'
                        @cancel='showRelation = false'
                    />
                </van-popup>
                <van-field
                    v-if='form.relation == 99'
                    v-model='form.relationOther'
                    clearable
                    placeholder='其他关系'
                    class='input-back mt-2 form-input'
                />
                <div class='no-req-label mt-5'>联系电话</div>
                <van-field
                    v-model='form.contactPhone'
                    clearable
                    placeholder='联系电话'
                    class='input-back mt-2 form-input'
                    :rules='rules.contactPhone'
                />
            </van-form>
        </div>
        <div class='px-5  grow flex flex-col justify-end pt-2 pb-2'>
            <van-button type='primary' block round
                @click='onSubmit'>提交
            </van-button>
        </div>
    </div>
</template>

<script>
import { addToArr } from '@/utils/common'
import { useStore } from '@/doctor/store'
import DocAddress from '@/components/docAddress/DocAddress'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import { getChronicResidentsId } from '@/api/doctor/generalFU'
import { updateResident } from '@/api/doctor/resident'

const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
        residentInfoId: undefined,
        // 年龄
        currentAge: undefined,
        // 出生地详细地址
        birthAddress: undefined,
        // 出生地编码
        birthCode: undefined,
        // 证件类型,[DC00004]
        certificateType: 1,
        certificateTypeName: '身份证',
        // 联系人姓名
        contactName: undefined,
        contactName2: undefined,
        // 联系人电话
        contactPhone: undefined,
        // 与居民关系,[DC00023]
        contactRelation: undefined,
        contactRelationName: undefined,
        // 出生日期
        dataBirth: undefined,
        // 职业,[DC00010]
        duty: undefined,
        dutyName: undefined,
        // 文化程度(学历),[DC00007]
        education: undefined,
        educationName: undefined,
        // 性别,[DC00005]
        gender: undefined,
        genderName: undefined,
        // 身份证号
        idCard: undefined,
        // innerMarital: undefined,
        // 民族,[DC00006]
        national: undefined,
        nationalName: undefined,
        // 现住址
        nowAddress: undefined,
        // 户籍地址
        permanentAddress: undefined,
        // 现住址编码
        presentCode: undefined,
        presentCodeName: undefined,
        // 户籍地编码
        registeredCode: undefined,
        registeredCodeName: undefined,
        // 居民档案id
        residentId: undefined,
        // 姓名
        residentName: undefined,
        // 本人电话
        telephone: undefined,
        // 工作单位
        workUnit: undefined,
        // 与居民关系
        relation: undefined,
        relationName: undefined,
        relationOther: undefined,
        // 人群
        chronicCrowd: undefined,
        chronicTagsArray: undefined,
        firstScreenDate: undefined,
        firstScreenResult: undefined,
        highTagsArray: undefined,
        highTags: undefined,
        latelyDiagnoseDate: undefined,
        latelyScreenDate:undefined,
        // 建档单位、科室、医生
        createDoctorId: undefined,
        createDoctorName: undefined,
        createOfficeId: undefined,
        createOfficeName: undefined,
        createUnitId: undefined,
        createUnitName: undefined,
        // 当前人群-显示type=CP00181
        groupsArrays: undefined,
        // 当前人群-查询
        groups: undefined,
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return form
}
export default {
    name: 'BaseInfo',
    components: { DocAddress, DocNavBar },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            // 民族
            showNational: false,
            showRelation: false,
            // 现住址
            showPresent: false,
            // 户籍地址
            showRegistered: false,
            // 地址回显使用
            addressRecord: {},
            form: {},
            rules: {
                certificateTypeName: [{ required: true, message: '请选择证件类型' }],
                idCard: [{ required: true, message: '请填写证件号码' }],
                residentName: [{ required: true, message: '请填写姓名' }],
                genderName: [{ required: true, message: '请选择性别' }],
                dataBirth: [{ required: true, message: '请选择出生日期' }],
                nationalName: [{ required: true, message: '请选择名族' }],
                currentAge: [{ required: true, message: '请填写年龄' }],
                telephone: [{ required: true, message: '请填写本人电话' }],
                contactName: [{ required: false, message: '请填写联系人姓名' }],
                contactPhone: [{ required: false, message: '请填写联系电话' }],
                presentCodeName: [{ required: true, message: '请选择所在地区' }],
                registeredCode: [{ required: true, message: '请选择所在地区' }]
            }
        }
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        },
        residentInfoId() {
            return this.$route.query.residentInfoId
        }
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            const res = await getChronicResidentsId(this.residentInfoId)
            this.form = defaultForm(res.data)
            if (this.form.presentCode) {
                this.addressRecord.presentCode = addToArr(this.form.presentCode)
            }
            if (this.form.registeredCode) {
                this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
            }
        },
        // 民族
        nationalConfirm({ selectedValues, selectedOptions }) {
            this.form.national = selectedValues[0]
            this.form.nationalName = selectedOptions[0].name
            this.showNational = false
        },
        //与居民关系
        relationlConfirm({ selectedValues, selectedOptions }) {
            this.form.relation = selectedValues[0]
            this.form.relationName = selectedOptions[0].name
            this.showRelation = false
        },
        // 现住址
        presentChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.presentCodeName = selectedOptions.map(e => e.text).join('/')
        },
        // 户口地址
        registeredChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.registeredCodeName = selectedOptions.map(e => e.text).join('/')
            if (!this.form.presentCode && selectedOptions.length >= 5) {
                this.form.presentCode = val.value
                this.form.presentCodeName = this.form.registeredCodeName
            }
        },
        // 同步现住址
        setRegisteredAddress() {
            this.$refs.form.validate(['presentCode']).then(res => {
                this.form.registeredCode = this.form.presentCode
                this.form.registeredCodeName = this.form.presentCodeName
                this.form.permanentAddress = this.form.nowAddress
                this.addressRecord.registeredCode = addToArr(this.form.presentCode)
            }).catch(err => console.warn(err))
        },
        onSubmit() {
            this.$refs.form.validate().then(() => {
                let par = {
                    ...this.form
                }
                updateResident(par).then(() => {
                  this.toBack()
                })
            }).catch((e) => {
                console.warn('ArchiveCommon error', e)
            })
        },
        toBack() {
            this.$router.back()
        }
    }
}
</script>

<style scoped lang='less'>
.h-overflow {
    height: calc(100vh - 110px);
    overflow-y: auto;
}

.title {
    font-weight: bold;
    margin-bottom: 20px;
}

.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;

    &::after {
        content: "*";
        color: red;
        font-weight: bold;
        margin-left: 4px;
    }
}

.no-req-label {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
}

.form-input {
    padding: 8px 12px;
    border-radius: 8px;
}

.input-back {
    background: #FAFAFA;
}

.tel-back {
    background: #F5F5F5;
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
}

.tel {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 8px;
}

.tel-label {
    color: #607FF0;
    font-weight: bold;
}

.p-12-0 {
    padding: 12px 0px;
}

:deep(.van-nav-bar .van-icon) {
    color: #000000;
}

:deep(.van-cell-group--inset) {
    overflow: visible;
}

:deep(.van-cell) {
    overflow: visible;
}

// :deep(.van-field__error-message) {
//     position: absolute;
//     margin-top: 3px;
// }

:deep(.van-cell:after) {
    border-bottom: 0px;
}
</style>