<template>
    <div>
        <van-form ref='form'>
                <div class='no-req-label'>随访单位</div>
                <van-field
                    v-model='form.visitUnitName'
                    is-link
                    readonly
                    placeholder='随访单位'
                    class='input-back mt-2 form-input'
                    @click="show1 = true"
                />
                 <DocUnit v-model:show="show1" v-model:value="form.visitUnitId" @change="changeUnit"/>

                <div class='no-req-label mt-5'>随访科室</div>
                <van-field
                    v-model='form.visitOfficeName'
                    is-link
                    readonly
                    placeholder='随访科室'
                    class='input-back mt-2 form-input'
                    @click='show2 = true'
                />
                 <DocOffice v-model:show="show2" v-model:value="form.visitOfficeId" @change="changeOffice" :unitId="form.visitUnitId"/>

                <div class='no-req-label mt-5'>随访医生</div>
                <van-field
                    v-model='form.visitDoctorName'
                    is-link
                    readonly
                    placeholder='随访医生'
                    class='input-back mt-2 form-input'
                    @click='show3 = true'
                />

                <DocOfficeDoctor v-model:show="show3" v-model:value="form.visitDoctorId" @change="changeDoctor" :unitId="form.visitUnitId" :officeId="form.visitOfficeId"/>
        </van-form>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { useStore } from '@/doctor/store'
import DocUnit from '@/doctor/components/docUnit/DocUnit'
import DocOffice from '@/doctor/components/docOffice/DocOffice'
import DocOfficeDoctor from '@/doctor/components/docOfficeDoctor/DocOfficeDoctor'

export default {
    name: 'CommonBottom',
    components: { DocOfficeDoctor, DocOffice, DocUnit },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            show1: false,
            show2: false,
            show3: false,
            form: {},
            rules: {}
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
            },
            immediate: true
        }
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        }
    },
    methods: {
        setForm(info) {
            const form = {
                visitDate: new dayjs(),
                createDate: new dayjs(),
                // 随访单位
                visitUnitId: this.authInfo.unitId,
                visitUnitName: this.authInfo.unitName,
                // 随访科室
                visitOfficeId: this.authInfo.officeId,
                visitOfficeName: this.authInfo.officeName,
                // 随访医生
                visitDoctorId: this.authInfo.relationId,
                visitDoctorName: this.authInfo.nickName,
                // 录入单位
                createUnitId: this.authInfo.unitId,
                createUnitName: this.authInfo.unitName,
                // 录入科室
                createOfficeId: this.authInfo.officeId,
                createOfficeName: this.authInfo.officeName,
                // 录入医生
                createDoctorId: this.authInfo.relationId,
                createDoctorName: this.authInfo.nickName
            }
            Reflect.ownKeys(form).forEach(key => {
                if (info[key] != undefined) {
                    form[key] = info[key]
                }
            })
            return form
        },
        changeUnit(val) {
            this.form.visitUnitName = val.unitName
            this.form.visitUnitId = val.id
            this.form.visitOfficeId = undefined
            this.form.visitOfficeName = undefined
            this.form.visitDoctorId = undefined
            this.form.visitDoctorName = undefined
            this.show1 = false
        },
        changeOffice(val) {
            this.form.visitOfficeId = val.id
            this.form.visitOfficeName = val.officeName
            this.form.visitDoctorId = undefined
            this.form.visitDoctorName = undefined
            this.show2 = false
        },
        changeDoctor(val) {
            this.form.visitDoctorId = val.id
            this.form.visitDoctorName = val.staffName
            this.show3 = false
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    let par = {
                        ...this.form,
                    }
                    resolve(par)
                }).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>