<template>
    <van-form ref="form">
        <div class="label-title" required>专病名称</div>
        <van-field
            v-model="form.diseaseTypeName"
            isLink
            readonly
            :disabled="$route.query.id ? true : false"
            placeholder="请选择"
            :rules="rules.diseaseTypeName"
            @click="showDiseaseTypeChange"
            class="form-input mb-5"
        />
        <van-popup v-model:show="showDiseaseType" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showDiseaseType = false">取消</div>
                    <div>专病名称（单选）</div>
                    <div></div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        clearable
                        column-1
                        :options="store.getDict('CP00117')"
                        v-model:value="form.diseaseType"
                        :fieldNames="{ text: 'name', value: 'value' }"
                        @change="diseaseTypeChange"
                    />
                </div>
            </div>
        </van-popup>

        <template v-if="form.diseaseType === 1 || form.diseaseType === 2">
            <div class="label-title" required>请选择</div>
            <van-field :rules="rules.serveType" style="padding: 0" class="mb-5">
                <template #input>
                    <van-radio-group
                        :disabled="$route.query.id ? true : false"
                        v-model="form.serveType"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group"
                    >
                        <van-radio :name="3" label-position="left">新增专病随访（常规）</van-radio>
                        <van-radio :name="4" label-position="left">新增专病随访（增加）</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </template>

        <ArchiveCommon ref="archive" :info="info"></ArchiveCommon>
    </van-form>
</template>
<script>
import { useStore } from '@/doctor/store'
import ArchiveCommon from '@/doctor/components/archiveCommon/archiveCommon.vue'
import { getChronicResidentsId } from '@/api/doctor/generalFU'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
export default {
    components: { ArchiveCommon, CheckBtn },
    data() {
        return {
            store: useStore(),
            form: {},
            rules: {
                diseaseTypeName: [
                    { required: true, message: '请选择' }
                ],
                serveType: [
                    { required: true, message: '请选择' }
                ]
            },
            showDiseaseType: false,
            showCertificateType: false,
            info: {}
        }     
    },
    computed: {
        residentInfoId() {
            return this.$route.query.residentInfoId
        },
        diseaseType() {
            return this.$route.query.diseaseType
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            // 获取居民信息
            const res = await getChronicResidentsId(this.residentInfoId)
            this.info = res.data || {}
            // 未被诊断的病种置灰不可选
            const diseaseList = [
                { name: '高血压', value: 1, code: '512' },
                { name: '糖尿病', value: 2, code: '1024' },
                { name: '冠心病', value: 3, code: '2048' },
                { name: '脑卒中', value: 4, code: '4096' },
                { name: '慢性阻塞性疾病', value: 5, code: '8192' },
                { name: '慢性肾脏病', value: 6, code: '16384' },
                { name: '血脂异常', value: 7, code: '32768' }
            ].filter(e => this.info.groupsArrays.includes(e.code))
            this.store.getDict('CP00117').forEach(x => {
                x.disabled = true
                diseaseList.forEach(y => {
                    if (x.value === y.value) {
                        x.disabled = false
                    }
                })
            })
            // 默认选中病种
            let { diseaseType, id, serveType } = this.$route.query
            this.form.diseaseType = parseInt(diseaseType)
            this.form.diseaseTypeName = this.store.getDict('CP00117').find(
                e => e.value === this.form.diseaseType
            )?.name
            this.form.serveType = parseInt(serveType)
        },
        diseaseTypeChange() {
            this.store.getDict('CP00117').forEach(item => {
                if (item.value === this.form.diseaseType) {
                    this.form.diseaseTypeName = item.name
                }
            })
            this.showDiseaseType = false
        },
        async onSubmit() {
            const baseInfo = await this.$refs.archive.onSubmit()
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    resolve({
                        baseInfo,
                        diseaseInfo: this.form
                    })
                }).catch(e => {

                })
            })
            
            // let baseInfo = {}
            // try {
            //     baseInfo = await this.$refs.archive.onSubmit()
            // } catch(e) {

            // }
            
        },
        showDiseaseTypeChange() {
            if (this.$route.query.id) return
            this.showDiseaseType = true
        }
    }
}
</script>
<style lang="less" scoped>
.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
    margin-bottom: 8px;
    &[required] {
        &::after {
            content: '*';
            color: #FF4D4F;
            font-weight: bold;
            margin-left: 4px;
        }
    }
}
.form-input {
    background-color: #FAFAFA;
    padding: 8px 12px;
    border-radius: 8px;
}
:deep(.van-cell:after) {
    border-bottom: 0px;
}
:deep(.van-popup) {
    height: 50% !important;
}
.greyColor {
    color: var(--van-text-color-2);
    font-weight: 400;
}
</style>