<template>
    <div>
        <div class="label-title mt-2">辅助检查</div>
        <van-field
            v-model="form.auxiliaryExaminationName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.auxiliaryExaminationName"
            @click="showAuxiliaryExamination = true"
            class="form-input"
        />
        <van-popup v-model:show="showAuxiliaryExamination" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showAuxiliaryExamination = false">取消</div>
                    <div>辅助检查（可多选）</div>
                    <div class="blueColor" @click="auxiliaryConfirm">确定</div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        multiple
                        column-2
                        :options="store.getDict('CP00073')"
                        v-model:value="form.auxiliaryExamination"
                        :fieldNames="{ text: 'name', value: 'value' }"
                    />
                </div>
            </div>
        </van-popup>
        <div v-for="x in viewData" :key="x.insType" class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">{{ x.insName }}</div>
            <template v-for="y in x.items" :key="y.itemCode">
                <van-field
                    :label="`${y.itemName}(${y.itemCode}) : `"
                    v-model="y.itemValue"
                    placeholder="请输入"
                    class="card-input mt-2"
                    v-if="y.itemType === 1"
                >
                    <template #extra v-if="y.unit">
                        <span class="ml-1">{{ y.unit }}</span>
                    </template>
                </van-field>
                <van-field
                    :label="`${y.itemName}(${y.itemCode}) : `"
                    is-link
                    :modelValue="y.itemValue"
                    readonly
                    placeholder="请选择或录入"
                    @click="setSelectOption(y, y.itemType)"
                    class="card-input mt-2"
                    v-if="y.itemType === 4"
                >
                    <template #extra v-if="y.unit">
                        <span class="ml-1">{{ y.unit }}</span>
                    </template>
                </van-field>
            </template>
        </div>
        <InputSelect
            v-model:show="selectOption.show4"
            :dict="selectOption.dict"
            @change="onSelectInputConfirm">
        </InputSelect>
    </div>
</template>
<script>
import { useStore } from '@/doctor/store'
import { getInspectCode } from '@/api/doctor/separateFU'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import InputSelect from '@/doctor/diagnose/common/InputSelect.vue'
export default {
    components: { CheckBtn, InputSelect },
    props: {
        form: {
            type: Object,
            default: () => {}
        },
        diseaseInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            store: useStore(),
            showAuxiliaryExamination: false,
            inspectList: [],
            viewData: [],
            selectOption: {
                show4: false,
                item: {},
                dict: []
            },
            rules: {}
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        auxiliaryConfirm() {
            let list = []
            this.store.getDict('CP00073').forEach(item => {
                let selected = this.form.auxiliaryExamination.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.auxiliaryExaminationName = list.join()
            this.showAuxiliaryExamination = false

            let inspectList = []
            this.form.auxiliaryExamination.forEach(item => {
                const items = this.inspectList.filter(e => e.insType === item)
                inspectList.push({
                    insType: items[0].insType,
                    insName: items[0].insName,
                    items: [...items]
                })
            })
            this.viewData = inspectList
        },

        getCode() {
            getInspectCode(1).then(res => {
                console.log(666, res)
                this.inspectList = res.data
            })
        },
        setSelectOption(item, itemType) {
            this.selectOption['show' + itemType] = true
            this.selectOption.item = item
            this.selectOption.dict = item.dictItemList
        },
        onSelectInputConfirm(option) {
            this.selectOption.item.itemValue = option.value
            this.selectOption.show4 = false
        },
        submit() {
            return new Promise((resolve, reject) => {
                let list = []
                this.viewData.forEach(x => {
                    x.items.forEach(y => {
                        list.push({
                            diseaseType: this.diseaseInfo.diseaseType,
                            dataType: y.configType,
                            insType: y.insType,
                            insName: y.insName,
                            itemCode: y.itemCode,
                            itemName: y.itemName,
                            itemType: y.itemType,
                            itemValue: y.itemValue,
                            abnormalSituation: y.abnormalSituation,
                            img: y.img,
                            unit: y.unit
                        })
                    })
                })
                resolve(list)
            })
        }
    }
}
</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;
}
.pop-title {
    color: #262626;
    font-size: 16px;
    font-weight: 600;
}
.greyColor {
    color: var(--van-text-color-2);
    font-weight: 400;
}
.blueColor {
    color: #607FF0;
    font-weight: 500;
}
.bg-fa {
    background-color: #FAFAFA;
    padding: 8px;
    border-radius: 8px;
}
.card-input {
    padding: 8px 12px;
    border-radius: 8px;
}
</style>