<template>
    <div>
        <div class="label-title mt-2">{{ diseaseType === 1 ? '辅助检查' : '其他检查' }}</div>
        <van-field
            v-model="form.auxiliaryExaminationName"
            isLink
            readonly
            placeholder="请选择"
            @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="dictList"
                        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" v-if="x.insType !== 99">
                <van-field
                    :label="getItemName(y)"
                    v-model="y.itemValue"
                    :rules="getRule(y)"
                    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="getItemName(y)"
                    is-link
                    :modelValue="y.itemValue"
                    :rules="getRule(y)"
                    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>
            <template v-for="y in x.items" :key="y.itemCode" v-if="x.insType === 99">
                <div style="background-color: #fff; padding: 8px; border-radius: 8px">
                    <div class="label-title">检查结果</div>
                    <van-field style="padding: 0">
                        <template #input>
                            <van-radio-group
                                v-model="y.itemValue"
                                shape="dot"
                                direction="horizontal"
                                class="w-full doc-radio-group"
                            >
                                <van-radio
                                    v-for="item in store.getDict('CP00157')"
                                    :key="item.value"
                                    :name="item.value"
                                    label-position="left"
                                >
                                    {{ item.name }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field
                        v-if="y.itemValue === 2"
                        v-model="y.abnormalSituation"
                        placeholder="异常情况"
                        class="form-input mt-2"
                    />
                </div>
                <div style="background-color: #fff; padding: 8px; border-radius: 8px" class="mt-2">
                    <div class="label-title">影像报告</div>
                    <DocImageUpload
                        description="温馨提示：请上传JPG、PNG格式图片，文件大小不超过10M"
                        lengthMessage="抱歉，最多可上传8个文件。"
                        :imageData="y.picturesList" 
                        @change="(ids, option) => y.img = ids"
                        :maxLength="8">
                    </DocImageUpload>
                </div>
            </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'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload.vue'
export default {
    components: { CheckBtn, InputSelect, DocImageUpload },
    props: {
        form: {
            type: Object,
            default: () => {}
        },
        diseaseInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            store: useStore(),
            showAuxiliaryExamination: false,
            inspectList: [],
            viewData: [],
            selectOption: {
                show4: false,
                item: {},
                dict: []
            }
        }
    },
    computed: {
        diseaseType() {
            return this.diseaseInfo.diseaseType
        },
        dictList() {
            if (this.diseaseInfo.diseaseType === 1) return this.store.getDict('CP00073')
            if (this.diseaseInfo.diseaseType === 2) return this.store.getDict('CP00074')
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        auxiliaryConfirm() {
            let list = []
            this.dictList.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 => {
                // this.inspectList = res.data
                let list = res.data.filter(item => !(item.insType === 4 && item.itemCode === 'BUN'))
                this.inspectList = [
                    ...list,
                    {
                        configType: 2,
                        insType: 99,
                        insName: '心电图',
                        itemCode: '99-1',
                        itemName: null,
                        itemType: 2
                    },
                    {
                        configType: 2,
                        insType: 34,
                        insName: '并发症检查',
                        itemCode: '34-1',
                        itemName: null,
                        itemType: 1
                    }
                ]
                console.log(666, this.inspectList)
            })
        },
        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)
            })
        },
        getRule(item) {
            if (!item.pattern) {
                return [{ required: true, message: '请录入' }]
            }
            return [
                { required: true, message: '请录入' },
                { pattern: new RegExp(item.pattern), message: item.message }
            ]
        },
        getItemName(item) {
            if (!item.itemName) {
                return ''
            }
            return `${item.itemName}(${item.itemCode}) : `
        }
    }
}
</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>