<template>
    <div class="pt-2 base-form">
        <div class="px-4 py-2 title">基本信息</div>
        <van-form label-width="5em" ref="form">
            <van-field v-model="form.idCard"
                required
                center
                clearable
                name="idCard"  
                label="身份证号"
                placeholder="请输入身份证号"
                :rules="rules.idCard"
            >
                <template #button>
                    <van-button size="small" plain type="primary"
                        @click="getInfo">搜索</van-button>
                </template>
            </van-field>
            <van-field v-model="form.residentName"
                name="residentName" required 
                label="姓名"
                placeholder="请输入姓名"
                maxlength="50"
                :rules="rules.residentName"
            />
            <van-field required
                v-model="form.genderTrans"
                is-link
                readonly
                name="gender"
                label="性别"
                placeholder="请选择"
                :rules="rules.gender"
                @click="showGender = true"/>
            <van-popup v-model:show="showGender" position="bottom">
                <van-picker
                    :columns-field-names="{ text: 'name', value: 'value' }"
                    :columns="store.getDict('DC00005')"
                    @confirm="genderConfirm"
                    @cancel="showGender = false"
                />
            </van-popup>

            <van-field v-model="form.age"
                name="age" required 
                label="年龄"
                type="digit"
                placeholder="请输入年龄"
                maxlength="10"
                :rules="rules.age"
            />

            <van-field required
                v-model="form.dataBirth"
                is-link
                readonly
                name="dataBirth"
                label="出生日期"
                placeholder="请选择"
                :rules="rules.dataBirth"
                @click="showPicker = true"
            />
            <van-popup v-model:show="showPicker" position="bottom">
                <van-date-picker @confirm="dataBirthConfirm" @cancel="showPicker = false" />
            </van-popup>

            <van-field required
                v-model="form.nationalTrans"
                is-link
                readonly
                name="national"
                label="民族"
                placeholder="请选择"
                :rules="rules.national"
                @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>

            <van-field v-model="form.educationTrans"
                is-link
                readonly
                name="education"
                label="学历"
                placeholder="请选择"
                @click="showEducation = true"/>
            <van-popup v-model:show="showEducation" position="bottom">
                <van-picker
                    :columns-field-names="{ text: 'name', value: 'value' }"
                    :columns="store.getDict('DC00007')"
                    @confirm="educationConfirm"
                    @cancel="showEducation = false"
                />
            </van-popup>

            <van-field required
                v-model="form.maritalStatusTrans"
                is-link
                readonly
                name="marital"
                label="婚姻状况"
                placeholder="请选择"
                :rules="rules.marital"
                @click="showEarital = true"/>
            <van-popup v-model:show="showEarital" position="bottom">
                <van-picker
                    :columns-field-names="{ text: 'name', value: 'value' }"
                    :columns="store.getDict('DC00008')"
                    @confirm="maritalConfirm"
                    @cancel="showEarital = false"
                />
            </van-popup>

            <van-field v-model="form.telephone"
                name="telephone" required
                type="tel"
                label="联系电话"
                placeholder="请输入"
                maxlength="11"
                :rules="rules.telephone"
            />

            <van-field required
                v-model="form.registeredCodeTrans"
                name="registeredCode"
                is-link
                readonly
                label="户口地址"
                placeholder="请选择所在地区"
                :rules="rules.registeredCode"
                @click="showRegistered = true"
            />
            <van-popup v-model:show="showRegistered" :close-on-click-overlay="false" round position="bottom">
                <DocAddress v-model:value="form.registeredCode" @close="showRegistered = false"
                    @change="registeredChange"/>
            </van-popup>

            <van-field v-model="form.permanentAddress"
                name="permanentAddress" 
                label="详细地址"
                placeholder="请输入"
                @blur="permanentBlur"
                maxlength="50"
            />

            <van-field required
                v-model="form.presentCodeTrans"
                name="presentCode"
                is-link
                readonly
                label="常住地址"
                placeholder="请选择所在地区"
                @click="showPresent = true"
            />
            <van-popup v-model:show="showPresent" :close-on-click-overlay="false" round position="bottom">
                <DocAddress v-model:value="form.presentCode" @close="showPresent = false"
                    @change="presentChange"/>
            </van-popup>

            <van-field v-model="form.nowAddress"
                name="nowAddress" 
                label="详细地址"
                placeholder="请输入"
                maxlength="50"
            />
        <div class="px-4 py-2 title">筛查癌种</div>
        <van-field name="species" label="请选择要筛查的癌种"
            required
            readonly
            label-width="100%"
            :rules="rules.species">
            <template #input>
                <van-checkbox-group v-model="form.species" class="pt-2 pl-2">
                    <van-checkbox v-for="(item, index) in cancerArray" :key="index"
                        :name="item.value" shape="square"
                        class="mb-3">{{ item.name }}</van-checkbox>
                </van-checkbox-group>
            </template>
        </van-field>
        </van-form>
        <!-- {{ form }} -->
    </div>
</template>

<script>
import { fetchDataHandle, getInfoByIdCard } from '@/utils/common.js'
import { idCardRule, mobileValidator } from '@/utils/commonReg.js'
import { useStore } from '@/tumour/store/index.js'
import { getResidentInfo } from '@/tumour/api/base.js'
import { getDictValue } from '@/tumour/utils/dictionaries.js'
import { showToast } from 'vant'
import DocAddress from '@/tumour/utils/docAddress/DocAddress.vue'

const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
        // 年龄
        age: undefined,
        // 证件类型,[DC00004]
        certificateType: 1,
        // 创建单位id
        createdUnitId: undefined,
        createdUnitName: undefined,
        // 创建医生
        createdUserName: undefined,
        // 出生日期
        dataBirth: undefined,
        // 职业,[DC00010]
        duty: undefined,
        // 文化程度(学历),[DC00007]
        education: undefined,
        educationTrans: undefined,
        // 性别,[DC00005]
        gender: undefined,
        genderTrans: undefined,
        // 身份证号
        idCard: '',
        // 婚姻状况,[DC00008]
        maritalStatus: undefined,
        maritalStatusTrans: undefined,
        // 民族,[DC00006]
        national: undefined,
        nationalTrans: undefined,
        // 现住址
        nowAddress: undefined,
        // 户籍地址
        permanentAddress: undefined,
        // 现住址编码
        presentCode: undefined,
        presentCodeTrans: undefined,
        // 户籍地编码
        registeredCode: undefined,
        registeredCodeTrans: undefined,
        // 居民档案id
        residentId: undefined,
        // 姓名
        residentName: undefined,
        // 本人电话
        telephone: undefined,
        // 工作单位
        workUnit: undefined,
        // 筛查癌种
        species: undefined
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return form
}

export default {
    components: {
        DocAddress
    },
    data() {
        return {
            form: defaultForm(),
            // 性别选择
            showGender: false,
            // 日期选择
            showPicker: false,
            // 民族
            showNational: false,
            // 学历
            showEducation: false,
            // 婚姻情况
            showEarital: false,
            // 户口地址
            showRegistered: false,
            // 常住
            showPresent: false,
            rules: {
                idCard: [{ required: true, message: '请输入' }, idCardRule],
                residentName: [{ required: true, message: '请输入' }],
                age: [{ required: true, message: '请输入' }],
                gender: [{ required: true, message: '请选择' }],
                national: [{ required: true, message: '请选择' }],
                maritalStatus: [{ required: true, message: '请选择' }],
                telephone: [{ required: true, message: '请输入' }, mobileValidator],
                registeredCode: [{ required: true, message: '请输入' }],
                presentCode: [{ required: true, message: '请输入' }],
                species: [{ required: true, message: '请选择' }]
            }
        }
    },
    setup() {
        const store = useStore()
        return { store }
    },
    computed: {
        cancerArray() {
            const exclude = [11, 99]
            return this.store.getDict('DC00032').filter(e => !exclude.includes(e.value))
        },
    },
    mounted() {},
    methods: {
        getInfo() {
            const idCard = this.form.idCard
            if (!idCard) return
            getResidentInfo(idCard).then(res => {
                const result = res.data || {}
                if (result.id) {
                    this.form = defaultForm({
                        ...result,
                        id: null,
                        species: []
                    })
                    return
                }
                const info = getInfoByIdCard(idCard)
                this.form = defaultForm({
                    gender: info.gender,
                    genderTrans: getDictValue('DC00005', info.gender),
                    dataBirth: info.dataBirth,
                    age: info.age,
                    species: []
                })
                console.log(info)
            })
        },
        submit() {
            return new Promise((resolve) => {
                this.$refs.form.validate().then(res => {
                    console.log(res, this.form)
                    resolve(this.form)
                }).catch(err => {
                    console.warn(err)
                    showToast('还有表单未填写')
                    if (Array.isArray(err)) {
                        this.$refs.form.scrollToField(err[0].name)
                    }
                })
            })
        },
        genderConfirm({ selectedValues, selectedOptions  }) {
            this.form.gender = selectedValues[0]
            this.form.genderTrans = selectedOptions[0].name
            this.showGender = false
        },
        // 民族
        nationalConfirm({ selectedValues, selectedOptions  }) {
            this.form.national = selectedValues[0]
            this.form.nationalTrans = selectedOptions[0].name
            this.showNational = false
        },
        // 学历
        educationConfirm({ selectedValues, selectedOptions  }) {
            this.form.education = selectedValues[0]
            this.form.educationTrans = selectedOptions[0].name
            this.showEducation = false
        },
        // 婚姻
        maritalConfirm({ selectedValues, selectedOptions  }) {
            this.form.maritalStatus = selectedValues[0]
            this.form.maritalStatusTrans = selectedOptions[0].name
            this.showEarital = false
        },
        dataBirthConfirm({ selectedValues }) {
            this.form.dataBirth = selectedValues.join('-')
            this.showPicker = false
        },
        // 户口地址
        registeredChange(val) {
            console.log(val)
            const selectedOptions = val.selectedOptions
            this.form.registeredCodeTrans = selectedOptions.map(e => e.text).join('/')
            if (!this.form.presentCode && selectedOptions.length >= 5) {
                this.form.presentCode = val.value
                this.form.presentCodeTrans = this.form.registeredCodeTrans
            }
        },
        // 常住地址
        presentChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.presentCodeTrans = selectedOptions.map(e => e.text).join('/')
        },
        permanentBlur(val) {
            if (!this.form.nowAddress) {
                this.form.nowAddress = this.form.permanentAddress
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/tumour/utils/common.less';
.van-cell {
    // padding-left: 0;
    // padding-right: 0;
    :deep(.van-cell__title) {
        &>label {
            display: inline-block;
            min-width: 56px;
            text-align: justify;
            text-align-last: justify;
        }
        &:not(.van-field__label--required) {
            &>label {
                margin-left: 7px;
            }
        }
    }
}
// .form-label { 
//     color: #595959;
//     >span {
//         display: inline-block;
//         min-width: .56rem;
//         text-align: justify;
//         text-align-last: justify;
//     }
//     &[required] {
//         &::before {
//             content: '*';
//             color: #F5222D;
//             margin-right: 0.04rem;
//         }
//     }
// }

</style>