<template>
    <div>
        <van-nav-bar title='新增通用随访' left-text='' left-arrow @click-left='toBack'></van-nav-bar>
        <div class='p-4 h-overflow'>
            <base-info :info='info' v-show='step == 1' ref='baseInfo'
                       @changeVisitSituation='changeVisitSituation'></base-info>
            <general-f-u-form :info='info' :first-form='firstForm' v-show='step == 2' ref='generalFUForm'></general-f-u-form>
            <common-bottom :info='info' v-show='step == 3' ref='commonBottom'></common-bottom>
        </div>
        <div class='pt-2 pb-2'>
            <div class='px-5  grow flex flex-col justify-end' v-if='step == 1'>
                <van-button type='primary' block round v-if='visitSituation ==1'
                            @click='toNext(2)'>下一步
                </van-button>
                <van-button type='primary' block round v-if='visitSituation ==2'
                            @click='toNext(3)'>下一步
                </van-button>
            </div>

            <div class='px-5  flex align-center justify-around' v-if='step == 2'>
                <van-button type='primary' round plain style='width: 44%'
                            @click='toNext(1)'>上一步
                </van-button>
                <van-button type='primary' round style='width: 44%'
                            @click='toNext(3)'>下一步
                </van-button>
            </div>

            <div class='px-5  grow flex flex-col justify-end' v-if='step == 3'>
                <van-button type='primary' block round
                            @click='onsubmit'>提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import BaseInfo from '@/doctor/followUp/generalFU/form/BaseInfo'
import { fetchCurrencyById, getChronicResidentsId } from '@/api/doctor/generalFU'
import GeneralFUForm from '@/doctor/followUp/generalFU/form/GeneralFUForm'
import CommonBottom from '@/doctor/followUp/generalFU/form/CommonBottom'

export default {
    name: 'Index',
    components: { CommonBottom, GeneralFUForm, BaseInfo },
    data() {
        return {
            info: {},
            resident: {},
            visitSituation: 1,
            step: 1,
            //第一步提交的表单
            firstForm: {},
        }
    },
    created() {
        this.init()
    },
    computed: {
        routerDetail() {
            return this.$route.query
        }
    },
    methods: {
        async init() {
            this.info = {}
            const res = await getChronicResidentsId(this.routerDetail.residentInfoId)
            const { id, ...others } = res.data
            this.info = {
                ...others
            }
            this.info.diseaseType = this.routerDetail.diseaseType
            if (this.routerDetail.id) {
                const res = await fetchCurrencyById({ id: this.routerDetail.id })
                let result = res.data || {}
                this.info = {
                    ...result
                }
            }
        },
       async toNext(val) {
            if (val == 2) {
                this.firstForm = await this.$refs.baseInfo.onSubmit()
            }
           if (val == 3) {
                await this.$refs.generalFUForm.onSubmit()
           }
            this.step = val
        },
        changeVisitSituation(val) {
            this.visitSituation = val
        },
       async onsubmit() {
        let baseInfo = await this.$refs.baseInfo.onSubmit()
        let generalFUForm =  await this.$refs.generalFUForm.onSubmit()
        let commonBottom = await this.$refs.commonBottom.onSubmit()
       },
        toBack() {
            if (this.visitSituation == 1) {
                if (this.step != 1) {
                    this.step--
                }
                return
            }
            if (this.visitSituation == 2) {
                if (this.step != 1) {
                    this.step = 1
                }
                return
            }
            this.$router.back()
        }
    }
}
</script>

<style scoped lang='less'>
:deep(.van-nav-bar .van-icon) {
    color: #000000;
}

.h-overflow {
    height: calc(100vh - 110px);
    overflow-y: auto;
}
</style>