<template>
    <div class="h-full flex flex-col diagnose-form">
        <DocNavBar :title="`${id ? '修改' : '新增'}慢病诊断`" class="shrink-0"
            :backFunc="onBack"></DocNavBar>
        <div class="p-4 overflow-y-auto grow" ref="all">
            <DiseaseSelect v-if="step == 1"
                :excludeType="excludeType"
                :value="diseaseType"
                ref="DiseaseSelect"/>
            <archiveCommon :info="baseInfo" v-else-if="step == 2" ref="archiveCommon"></archiveCommon>
            <FormCont :info="diagnoseInfo" v-else-if="step == 3" ref="FormCont"/>
        </div>
        <div class="shrink-0">
            <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'>下一步</van-button>
                </template>
                <template v-else-if="step == 3">
                    <van-button type='primary' block round
                        @click='submit'>提交</van-button>
                </template>
                <template v-else>
                    <van-button type='primary' round plain style='width: 48%'
                        @click='toPrev'>上一步
                    </van-button>
                    <van-button type='primary' round style='width: 48%'
                        @click='toNext'>下一步
                    </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 DiseaseSelect from './DiseaseSelect.vue'
import FormCont from './FormCont.vue'
import { useStore } from '@/doctor/store/index.js'
import { fetchDataHandle } from '@/utils/common.js'
import { getChronicResidentsId } from '@/api/doctor/generalFU'
import { showSuccessToast } from 'vant'
import { getDiagnoseDetail, getDiagnoseFirst, addDiagnose, updateDiagnose } from '@/api/doctor/disease.js'

export default {
    components: {
        DocNavBar,
        archiveCommon,
        DiseaseSelect,
        FormCont
    },
    data() {
        return {
            store: useStore(),
            step: 1,
            // 患者基础信息
            baseInfo: {},
            // 诊断信息
            diagnoseInfo: {}
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        },
        diseaseType() {
            const val = this.$route.query.diseaseType
            return val ? +val : undefined
        },
        residentInfoId() {
            return this.$route.query.residentInfoId
        },
        idCard() {
            return this.$route.query.idCard
        },
        excludeType() {
            const excludeType = this.$route.query.excludeType
            return excludeType && excludeType.split(',').map(e => Number(e))
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            if (this.id) {
                const res = await getDiagnoseDetail(this.id)
                const result = res.data || {}
                this.diagnoseInfo = fetchDataHandle(result, {
                    diagnoseResult: 'strToArrNum'
                })
                this.baseInfo = result.residentsRecord || {}
            } else {
                if (this.residentInfoId) {
                    let res = await getChronicResidentsId(this.residentInfoId)
                    this.baseInfo = res.data || {}
                    this.diagnoseInfo.residentInfoId = this.residentInfoId
                } else if (this.idCard) {
                    // 新建用户
                    this.baseInfo.idCard = this.idCard
                }
                if (this.diseaseType) {
                    this.diagnoseInfo.diseaseType = this.diseaseType
                    const res = await getDiagnoseFirst({
                        residentInfoId: this.residentInfoId,
                        diseaseType: this.diseaseType
                    })
                    const firstInfo = res.data || {}
                    this.diagnoseInfo.manageDate = firstInfo.manageDate
                    this.diagnoseInfo.icdCode = firstInfo.icdCode
                    this.diagnoseInfo.diseaseName = firstInfo.diseaseName
                }
            }
        },
        submit() {
            this.$refs.FormCont.submit().then(res => {
                if (!res) return
                console.log('FormCont.submit', res)
                const query = {
                    ...res,
                    residentsRecord: this.baseInfo
                }
                const func = query.id ? updateDiagnose : addDiagnose
                func(query).then(() => {
                    this.store.onRefreshMark()
                    showSuccessToast('提交成功')
                    setTimeout(() => {
                        this.$router.replace({
                            path: '/doctor/workbench'
                        })
                    }, 600)
                })
            })
        },
        // 上一步
        toPrev() {
            this.onStep(this.step -1)
        },
        async toNext() {
            try {
                if (this.step == 1) {
                    const diseaseType = await this.$refs.DiseaseSelect.submit()
                    console.log(diseaseType)
                    this.diagnoseInfo.diseaseType = diseaseType
                } else if (this.step == 2) {
                    const baseInfo = await this.$refs.archiveCommon.onSubmit()
                    console.log(baseInfo)
                    this.baseInfo = baseInfo
                }
                this.onStep(this.step + 1)
            } catch (e) {
                console.warn(e)
            }
        },
        onStep(val) {
            this.$refs.all.scrollTo(0, 0)
            this.step = val
        },
        onBack() {
            if (this.step == 1) {
                this.$router.back()
            } else {
                this.step--
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>