<template>
    <div class="h-full flex flex-col screening-first">
        <DocNavBar :title="`${id ? '修改' : '新增'}主要慢病高危随访`" class="shrink-0"
            :backFunc="onBack" :hideBack="step == 3"></DocNavBar>
        <div class="p-4 overflow-y-auto grow" ref="all">
            <archiveCommon :info="baseInfo" v-if="step == 1" ref="archiveCommon"></archiveCommon>
            <FormCont :resident-info="baseInfo" :info="screenInfo" v-else-if="step == 2" ref="FormCont"/>
            <Result v-else-if="step == 3" :info="resultInfo"/>
        </div>
        <div class="shrink-0" v-if="step !== 3">
            <div class='bottom-small-line'></div>
            <div class='px-5 py-2 grow flex justify-between'>
                <template v-if='step == 1'>
                    <van-button type='primary' block round
                        @click='toNext(2)'>下一步</van-button>
                </template>
                <template v-else>
                    <van-button type='primary' block round
                        @click='toNext(3)'>提交</van-button>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import archiveCommon from '@/doctor/components/archiveCommon/archiveCommon.vue'
import FormCont from './FormCont.vue'
import Result from './Result.vue'
import { getChronicResidentsId } from '@/api/doctor/generalFU'
import { fetchDataHandle } from '@/utils/common.js'
import { useStore } from '@/doctor/store'
import { getHighMajorVisitId, saveHighMajorVisit, updateHighMajorVisit } from '@/api/doctor/highVisitApi'

export default {
    components: {
        DocNavBar,
        archiveCommon,
        FormCont,
        Result
    },
    data() {
        return {
            store: useStore(),
            step: 1,
            // 患者基础信息
            baseInfo: {},
            // 随访信息
            screenInfo: {},
            // 结果
            resultInfo: {}
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        },
        residentInfoId() {
            return this.$route.query.residentInfoId
        },
        idCard() {
            return this.$route.query.idCard
        },
    },
    // 路由守卫
    beforeRouteLeave(to, from) {
        // showConfirmDialog({
        //     message: '已填写的表单不会保存，确定要离开吗？'})
        //     .then(() => {
        //         next()
        //     })
        //     .catch(() => {
        //         next(false)
        //     })
        if (this.step === 2) {
            this.onBack()
            return false
        }
        return true
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            if (this.id) {
                const res = await getHighMajorVisitId(this.id)
                const result = res.data || {}
                this.screenInfo = fetchDataHandle(result, {
                    medicalHistory: 'strToArrNum',
                    familyHistory: 'strToArrNum',
                    highItem: 'strToArrNum'
                })
                this.baseInfo = this.screenInfo.residentsRecord
                console.log(this.screenInfo)
            } else {
                if (this.residentInfoId) {
                    let res = await getChronicResidentsId(this.residentInfoId)
                    this.baseInfo = res.data || {}
                    this.screenInfo.currentAge = this.baseInfo.currentAge
                    this.screenInfo.residentInfoId = this.residentInfoId
                } else if (this.idCard) {
                    // 新建用户
                    this.baseInfo.idCard = this.idCard
                }
            }
        },
        toNext(val) {
            if (val == 2) {
                // 基础信息
                this.$refs.archiveCommon.onSubmit().then(res => {
                    this.baseInfo = res
                    this.step = val
                    this.$refs.all.scrollTo(0, 0)
                })
            } else if (val == 3) {
                // 随访信息
                this.$refs.FormCont.submit().then(res => {
                    if (!res) return
                    console.log('FormCont.submit', res)
                    const query = fetchDataHandle(res, {
                        familyHistory: 'arrToStr',
                        medicalHistory: 'arrToStr',
                        highItem: 'arrToStr'
                    })
                    query.residentsRecord = this.baseInfo
                    const func = query.id ? updateHighMajorVisit : saveHighMajorVisit
                    func(query).then(res => {
                        this.resultInfo = query
                        this.store.onRefreshMark()
                        this.step = val
                    })
                })
            } else {
                this.step = val
                this.$refs.all.scrollTo(0, 0)
            }
        },
        onBack() {
            if (this.step == 1) {
                this.$router.back()
            } else {
                this.step--
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>