<template>
    <div v-if="diseaseInfo.diseaseType !== 5" class="label-title mt-2">辅助检查</div>
    <div v-for="(item, index) in inspectList" :key="index" :class="['bg-fa', 'mb-2', diseaseInfo.diseaseType === 5 ? '' : 'p-8']">
        <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>
    <van-button type="primary" size="small" plain block @click="onPlus">增加检查</van-button>
</template>
<script>
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload.vue'
export default {
    components: { DocImageUpload },
    props: {
        diseaseInfo: {
            type: Object,
            default: () => {}
        },
        form: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            inspectList: []
        }
    },
    methods: {
        onPlus() {
            this.inspectList.push({})
        },
        onDel(index) {
            this.inspectList.splice(index, 1)
        },
        submit() {
            return new Promise((resolve, reject) => {
                this.inspectList.forEach(item => {
                    item.dataType = 2
                    item.diseaseType = this.diseaseInfo.diseaseType
                    item.itemType = 1
                })
                resolve(this.inspectList)
            })
        }
    },
    watch: {
        'form.inspectList': {
            handler() {
                this.inspectList = this.form.inspectList
            }
        }
    }
}
</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;
        }
    }
}
.bg-fa {
    background-color: #FAFAFA;
    // padding: 8px;
    border-radius: 8px;
}
.p-8 {
    padding: 8px;
}
.form-input {
    background-color: #FAFAFA;
    padding: 8px 12px;
    border-radius: 8px;
}
.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>