<template>
    <div>
        <van-form ref='form'>
            <div class='title'>居民信息</div>
            <van-cell-group inset>
                <div class='label-title'>证件类型</div>
                <van-field
                    v-model='form.certificateTypeName'
                    is-link
                    disabled
                    placeholder='证件类型'
                    class='input-back mt-2 form-input'
                    :rules='rules.certificateTypeName'
                />
                <div class='label-title mt-5'>证件号码</div>
                <van-field
                    v-model='form.idCard'
                    disabled
                    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
                    disabled
                    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
                    disabled
                    placeholder='出生日期'
                    class='input-back mt-2 form-input'
                    :rules='rules.dataBirth'
                />
                <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'
                    disabled
                    placeholder='年龄'
                    class='input-back mt-2 form-input'
                    :rules='rules.currentAge'
                />
                <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='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='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'
                />
                <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'
                />
                <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='label-title mt-5'>本次随访情况</div>
                <van-field name='radio' :rules='rules.visitSituation' class='p-12-0' >
                    <template #input>
                        <van-radio-group v-model='form.visitSituation' class='w-full' shape='dot'>
                            <van-cell-group>
                                <van-cell title='在访' clickable @click="form.visitSituation = '1'"
                                          class='input-back  form-input'>
                                    <template #right-icon>
                                        <van-radio name='1' />
                                    </template>
                                </van-cell>
                                <van-cell title='失访' clickable @click="form.visitSituation = '2'"
                                          class='input-back mt-2 form-input'>
                                    <template #right-icon>
                                        <van-radio name='2' />
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </van-radio-group>
                    </template>
                </van-field>

                <div class='label-title mt-5' v-if='form.visitSituation == 2'>失访原因</div>
                <van-field name='radio' :rules='rules.lossReason' class='p-12-0'
                           v-if='form.visitSituation == 2'>
                    <template #input>
                        <van-radio-group v-model='form.lossReason' class='w-full' shape='dot'>
                            <van-cell-group>
                                <van-cell title='无法联系' clickable @click="form.lossReason = '1'"
                                          class='input-back  form-input'>
                                    <template #right-icon>
                                        <van-radio name='1' />
                                    </template>
                                </van-cell>
                                <van-cell title='患者拒绝随访' clickable @click="form.lossReason = '2'"
                                          class='input-back mt-2 form-input'>
                                    <template #right-icon>
                                        <van-radio name='2' />
                                    </template>
                                </van-cell>
                                <van-cell title='死亡' clickable @click="form.lossReason = '3'"
                                          class='input-back mt-2 form-input'>
                                    <template #right-icon>
                                        <van-radio name='3' />
                                    </template>
                                </van-cell>
                                <van-field
                                    v-if='form.lossReason == 3'
                                    v-model='form.deathReason'
                                    clearable
                                    placeholder='死亡原因'
                                    class='input-back mt-2 form-input'
                                />
                                <van-cell title='其他' clickable @click="form.lossReason = '9'"
                                          class='input-back mt-2 form-input'>
                                    <template #right-icon>
                                        <van-radio name='9' />
                                    </template>
                                </van-cell>
                                <van-field
                                    v-if='form.lossReason == 9'
                                    v-model='form.lossReasonOther'
                                    clearable
                                    placeholder='其他原因'
                                    class='input-back mt-2 form-input'
                                />
                            </van-cell-group>
                        </van-radio-group>
                    </template>
                </van-field>

                <div class='label-title mt-5'>随访方式</div>
                <van-field name='radio' :rules='rules.visitWay' class='p-12-0'>
                    <template #input>
                        <van-radio-group v-model='form.visitWay' class='w-full' shape='dot'>
                            <van-cell-group>
                                <van-cell title='门诊' clickable @click="form.visitWay = '5'"
                                          class='input-back  form-input'
                                          :style="{borderRadius: form.visitWay == 5 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='5' />
                                    </template>

                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 5'>
                                    <div class='tel flex items-center justify-between'>
                                        <div>
                                            <span>居民电话： </span><span>{{ form.telephone }}</span>
                                        </div>
                                        <div @click='toTel' class='tel-label'>点击拨打</div>
                                    </div>
                                </div>
                                <van-cell title='住院' clickable @click="form.visitWay = '6'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 6 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='6' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 6'>
                                    <div class='tel flex items-center justify-between'>
                                        <div>
                                            <span>居民电话： </span><span>{{ form.telephone }}</span>
                                        </div>
                                        <div @click='toTel' class='tel-label'>点击拨打</div>
                                    </div>
                                </div>
                                <van-cell title='入户' clickable @click="form.visitWay = '7'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 7 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='7' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 7'>
                                    <div class='tel flex items-center justify-between'>
                                        <div>
                                            <span>居民电话： </span><span>{{ form.telephone }}</span>
                                        </div>
                                        <div @click='toTel' class='tel-label'>点击拨打</div>
                                    </div>
                                </div>
                                <van-cell title='电话' clickable @click="form.visitWay = '8'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 8 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='8' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 8'>
                                    <div class='tel flex items-center justify-between'>
                                        <div>
                                            <span>居民电话： </span><span>{{ form.telephone }}</span>
                                        </div>
                                        <div @click='toTel' class='tel-label'>点击拨打</div>
                                    </div>
                                </div>

                                <van-cell title='短信（指导）' clickable @click="form.visitWay = '9'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 9 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='9' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 9'>
                                    <div class='tel'>
                                        <div>
                                            是否指导？
                                        </div>
                                        <van-radio-group v-model="form.isHealthGuide" direction="horizontal" shape='dot'>
                                            <div class='flex items-center w-full'>
                                                <van-cell title="是" clickable
                                                          @click="form.isHealthGuide = '1'"
                                                          style='flex: 1'
                                                          class='input-back form-input'
                                                >
                                                    <template #right-icon>
                                                        <van-radio name="1" />
                                                    </template>
                                                </van-cell>
                                                <van-cell title="否" clickable
                                                          @click="form.isHealthGuide = '2'"
                                                          style='flex: 1'
                                                          class='input-back  form-input ml-2'
                                                >
                                                    <template #right-icon>
                                                        <van-radio name="2" />
                                                    </template>
                                                </van-cell>
                                            </div>
                                        </van-radio-group>
                                    </div>
                                </div>

                                <van-cell title='微信（指导）' clickable @click="form.visitWay = '11'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 11 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='11' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 11'>
                                    <div class='tel'>
                                        <div>
                                            是否指导？
                                        </div>
                                        <van-radio-group v-model="form.isHealthGuide" direction="horizontal" shape='dot'>
                                            <div class='flex items-center w-full'>
                                                <van-cell title="是" clickable
                                                          @click="form.isHealthGuide = '1'"
                                                          style='flex: 1'
                                                          class='input-back form-input'
                                                >
                                                    <template #right-icon>
                                                        <van-radio name="1" />
                                                    </template>
                                                </van-cell>
                                                <van-cell title="否" clickable
                                                          @click="form.isHealthGuide = '2'"
                                                          style='flex: 1'
                                                          class='input-back  form-input ml-2'
                                                >
                                                    <template #right-icon>
                                                        <van-radio name="2" />
                                                    </template>
                                                </van-cell>
                                            </div>
                                        </van-radio-group>
                                    </div>
                                </div>

                                <van-cell title='短信（催检）' clickable @click="form.visitWay = '10'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 10 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='10' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 10'>
                                    <div class='tel'>
                                        <div>
                                            催检内容：
                                        </div>
                                        <div>
                                            请您于{{form.screenTime}}到{{authInfo.unitName }}棉一社区服务中心进行复查，祝早日 恢复健康！
                                        </div>
                                        <div class='mt-2' style='text-align: center'>
                                            <span style='color: #607FF0' @click='showTime1 = true'>修改日期</span>
                                        </div>
                                    </div>
                                </div>
                                <van-popup v-model:show="showTime1" position="bottom">
                                    <van-date-picker @confirm="timeConfirm1" @cancel="showBirth = false" />
                                </van-popup>

                                <van-cell title='微信（催检）' clickable @click="form.visitWay = '12'"
                                          class='input-back mt-2 form-input'
                                          :style="{borderRadius: form.visitWay == 12 ? '8px 8px 0px 0px ': '8px'}"
                                >
                                    <template #right-icon>
                                        <van-radio name='12' />
                                    </template>
                                </van-cell>
                                <div class='tel-back' v-if='form.visitWay == 12'>
                                    <div class='tel'>
                                        <div>
                                            催检内容：
                                        </div>
                                        <div>
                                            请您于{{form.screenTime}}到{{authInfo.unitName }}棉一社区服务中心进行复查，祝早日 恢复健康！
                                        </div>
                                        <div class='mt-2' style='text-align: center'>
                                            <span style='color: #607FF0' @click='showTime2 = true'>修改日期</span>
                                        </div>
                                    </div>
                                </div>
                                <van-popup v-model:show="showTime2" position="bottom">
                                    <van-date-picker @confirm="timeConfirm2" @cancel="showBirth = false" />
                                </van-popup>
                            </van-cell-group>
                        </van-radio-group>
                    </template>
                </van-field>
            </van-cell-group>
        </van-form>
    </div>
</template>

<script>
import { addToArr, fetchDataHandle } from '@/utils/common'
import { useStore } from '@/resident/store'
import DocAddress from '@/components/docAddress/DocAddress'
import dayjs from 'dayjs'

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,
        // 创建单位id
        // createdUnitId: undefined,
        // createdUnitName: undefined,
        // 创建医生
        // createdUserName: 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,
        // 户籍地编码
        registeredCode: undefined,
        // 居民档案id
        residentId: undefined,
        // 姓名
        residentName: undefined,
        // 本人电话
        telephone: undefined,
        // 工作单位
        workUnit: undefined,
        // diseaseId: undefined,
        // 与居民关系
        relation: undefined,
        // relationOther: undefined,
        // 人群
        // chronicTagsArray: undefined,
        // 建档单位、科室、医生
        // createDoctorId: undefined,
        // createDoctorName: undefined,
        // createOfficeId: undefined,
        // createOfficeName: undefined,
        // createUnitId: undefined,
        // createUnitName: undefined
        //本次随访情况
        visitSituation: undefined,
        lossReason: undefined,
        deathReason: undefined,
        lossReasonOther: undefined,
        visitWay: '5',
        isHealthGuide: undefined,
        screenTime: new dayjs().add(1, 'day').format('YYYY-MM-DD'),
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return fetchDataHandle(form, {
        registeredCode: 'addToArr',
        presentCode: 'addToArr'
        // birthCode: 'addToArr'
    })
}
export default {
    name: 'BaseInfo',
    components: { DocAddress },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            authInfo: {},
            // 民族
            showNational: false,
            // 现住址
            showPresent: false,
            // 户籍地址
            showRegistered: false,
            // 地址回显使用
            addressRecord: {},
            showTime1: false,
            showTime2: false,
            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: '请填写联系人姓名' }],
                presentCodeName: [{ required: true, message: '请选择所在地区' }],
                registeredCode: [{ required: true, message: '请选择所在地区' }],
                visitSituation: [{ required: true, message: '请选择' }],
                lossReason: [{ required: true, message: '请选择' }],
                visitWay: [{ required: true, message: '请选择' }]
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = defaultForm(this.info)
                // this.addressRecord.presentCode = addToArr(this.form.presentCode)
                // this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
            },
            immediate: true
        }
    },
    methods: {
        // 民族
        nationalConfirm({ selectedValues, selectedOptions }) {
            this.form.national = selectedValues[0]
            this.form.nationalName = selectedOptions[0].name
            this.showNational = 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))
        },
        toTel() {
            // 创建一个电话号码的URL
            let phoneNumber = '18487350810'; // 替换为需要拨打的号码
            let url = 'tel:' + encodeURIComponent(phoneNumber);
            // 创建一个a标签
            let a = document.createElement('a');
            a.href = url;
            // 触发a标签的点击事件
            a.click();
        },
        timeConfirm1({ selectedValues }) {
            this.form.screenTime = selectedValues.join('-')
            this.showTime1 = false
        },
        timeConfirm2({ selectedValues }) {
            this.form.screenTime = selectedValues.join('-')
            this.showTime2 = false
        },
        toNext() {
            // this.$refs.form.validate().then(() => {
             this.$emit('changeStep', 2)
            // }).catch(err => console.warn(err))
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    resolve(
                        fetchDataHandle(this.form, {
                            // birthCode: 'arrToAdd',
                            presentCode: 'arrToAdd',
                            registeredCode: 'arrToAdd'
                        })
                    )
                }).catch((e) => {
                    console.warn('ArchiveCommon error', e)
                    reject(e)
                })
            })
        }
    }
}
</script>

<style scoped lang='less'>
.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-cell-group--inset) {
    overflow: visible;
}

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

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