<template>
    <div class="label-title mt-2">{{ diseaseType === 2 || diseaseType === 5 ? '其他检查' : '辅助检查' }}</div>
    <van-field
        v-if="diseaseType !== 7"
        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, xIndex) in viewData" :key="xIndex" class="bg-fa mt-2">
        <div class="label-title" required style="color: #262626; font-size: 14px">{{ x.insName }}</div>
        <!-- 高血压心电图特殊处理 -->
        <template v-if="x.diseaseType === 1 && x.insType === 99" v-for="(y, yIndex) in x.items" :key="`HBP-${yIndex}`">
            <div style="background-color: #fff; padding: 8px; border-radius: 8px">
                <div class="label-title">{{ y.itemName }}</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 y.dictItemList"
                                :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 v-if="y.itemValue === '2'" style="background-color: #fff; padding: 8px; border-radius: 8px" class="mt-2">
                <div class="label-title">影像报告</div>
                <DocImageUpload
                    description="最多支持上传4个文件，支持上传图片或PDF文件，图片支持上传jpg、png、jpeg格式，文件大小请勿超过10M。"
                    :imageData="y.picturesList" 
                    @change="(ids, option) => y.img = ids"
                    :maxLength="4">
                </DocImageUpload>
            </div>
        </template>
        <template v-else v-for="(y, yIndex) in x.items" :key="`else-${yIndex}`">
            <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-else-if="y.itemType === 4"
            >
                <template #extra v-if="y.unit">
                    <span class="ml-1">{{ y.unit }}</span>
                </template>
            </van-field>
            <div v-else-if="y.itemType === 5" style="background-color: #fff; padding: 8px; border-radius: 8px" class="mt-2">
                <div class="label-title">{{ y.itemName }}</div>
                <DocImageUpload
                    description="温馨提示：请上传JPG、PNG格式图片，文件大小不超过10M"
                    :imageData="y.picturesList" 
                    @change="(ids, option) => y.img = ids"
                    :maxLength="4">
                </DocImageUpload>
            </div>
        </template>
    </div>
    <div v-if="otherShow" v-for="(item, index) in otherInspectList" :key="index" class="bg-fa mt-2">
        <div style="background-color: #fff; padding: 8px">
            <div style="color: #262626; font-size: 14px">检查名称</div>
            <van-field
                v-model="item.itemName"
                placeholder="请输入"
                :rules="[{ required: true, message: '请输入' }]"
                class="form-input mt-2"
            />
            <div style="color: #262626; font-size: 14px; margin-top: 8px">检查结果</div>
            <van-field
                v-model="item.itemValue"
                placeholder="请输入"
                class="form-input mt-2"
            />
            <div style="color: #262626; font-size: 14px; margin-top: 8px">上传报告</div>
            <DocImageUpload
                description="最多支持上传4个文件，支持上传图片或PDF文件，图片支持上传jpg、png、jpeg格式，文件大小请勿超过10M。"
                :imageData="item.picturesList"
                @change="(ids, option) => item.img = ids"
                :maxLength="4"
                class="mt-2">
            </DocImageUpload>
            <div class="del-btn" @click="onDel(index)">删除</div>
        </div>
    </div>
    <div v-if="otherShow" class="mt-2">
        <van-button type="primary" size="small" plain block @click="onPlus">增加检查</van-button>
    </div>
    <InputSelect
        v-model:show="selectOption.show4"
        :dict="selectOption.dict"
        @change="onSelectInputConfirm">
    </InputSelect>
</template>
<script>
import { useStore } from '@/doctor/store'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import { getInspectCode } from '@/api/doctor/separateFU'
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: []
            },
            otherInspectList: []
        }
    },
    computed: {
        diseaseType() {
            return this.diseaseInfo.diseaseType
        },
        dictList() {
            if (this.diseaseType === 1) return this.store.getDict('CP00073')
            if (this.diseaseType === 2) return this.store.getDict('CP00074')
            if (this.diseaseType === 3) return this.store.getDict('CP00075')
            if (this.diseaseType === 4) return this.store.getDict('CP00078')
            if (this.diseaseType === 5) return this.store.getDict('CP00076')
            if (this.diseaseType === 6) return this.store.getDict('CP00077')
        },
        otherShow() {
            if (this.diseaseType === 1 || this.diseaseType === 2) {
                return false
            } else {
                return true
            }
        }
    },
    methods: {
        getCode() {
            return new Promise((resolve, reject) => {
                getInspectCode(this.diseaseType).then(res => {
                    resolve(res.data)
                })
            })
        },

        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({
                    // 病种
                    diseaseType: items[0].diseaseType,
                    // 1-检验 2-检查
                    configType: items[0].configType,
                    insType: items[0].insType,
                    insName: items[0].insName,
                    items: [...items]
                })
            })
            this.viewData = inspectList
        },
        getItemName(item) {
            if (!item.itemName) {
                return ''
            }
            if (item.itemCode) {
                return `${item.itemName}(${item.itemCode}) : `
            } else {
                return item.itemName + ' : '
            }
        },
        getRule(item) {
            if (!item.pattern) {
                return [{ required: true, message: '请录入' }]
            }
            return [
                { required: true, message: '请录入' },
                { pattern: new RegExp(item.pattern), message: item.message }
            ]
        },
        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
                        })
                    })
                })
                this.otherInspectList.forEach(item => {
                    item.dataType = 2
                    item.diseaseType = this.diseaseType
                    item.itemType = 1
                    item.itemCode = 'otherInspect'
                })
                resolve([
                    ...list,
                    ...this.otherInspectList
                ])
            })
        },
        dataProcess() {
            let { inspectList = [], auxiliaryExamination = [] } = this.form
            let list = []
            inspectList.forEach(x => {
                this.inspectList.forEach(y => {
                    if (x.insType === y.insType && x.itemCode === y.itemCode) {
                        // if (y.insType === 99) {
                        //     y.itemValue = parseInt(x.itemValue)
                        // } else {
                        //     y.itemValue = x.itemValue
                        // }
                        y.itemValue = x.itemValue
                        y.abnormalSituation = x.abnormalSituation
                        y.img = x.img
                        y.picturesList = x.picturesList
                        list.push(y)
                    }
                })
            })
            this.otherInspectList = inspectList.filter(item => item.itemCode === 'otherInspect')

            let array = []
            auxiliaryExamination?.forEach(x => {
                const items = list.filter(e => e.insType === x)
                if (items.length > 0) {
                    array.push({
                        // 病种
                        diseaseType: items[0].diseaseType,
                        // 1-检验 2-检查
                        configType: items[0].configType,
                        insType: items[0].insType,
                        insName: items[0].insName,
                        items: [...items]
                    })
                }
            })
            this.viewData = array
        },

        onPlus() {
            this.otherInspectList.push({})
        },
        onDel(index) {
            this.otherInspectList.splice(index, 1)
        },
    },
    watch: {
        'form.inspectList': {
            async handler() {
                this.inspectList = await this.getCode()
                this.dataProcess()
            },
            immediate: 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;
}
.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;
}
:deep(.van-field) {
    border-radius: .08rem;
    .van-field__label {
        width: auto;
    }
}
.del-btn {
    text-align: center;
    margin: 8px auto;
    padding: 4px 8px;
    border-radius: 38px;
    border: 1px solid #BFBFBF;
    width: 112px;
    color: #8C8C8C;
    font-size: 13px;
}
</style>