<template>
    <div class="doc-image-upload">
        <div class="text-12 description">{{ description }}</div>
        <div class="mt-2 py-3 text-center upload-btn" @click="fileSelect">
            <doc-icon type="doc-upload" class="mr-2 text-16"/>
            <span>{{ btText }}</span>
        </div>
        <div class="flex flex-wrap justify-between mt-4 image-box">
            <div v-for="item in innerImage" :key="item.id">
                <div v-if="item.fileType === 'pdf'" class="">
                    <doc-icon type="doc-PDF" />
                </div>
                <div v-else>
                    <img src="@/assets/image/doctor/empty.png" style="width: 100%"/>
                </div>
                <span class="close-btn" @click="removeImage(item)">
                    <doc-icon type="close-circle" />
                </span>
            </div>
        </div>
        <input type="file"
            accept=".jpg,.jpeg,.png,.pdf"
            ref="fileElem"
            style="display: none;"
            @change="handleFiles"
            :key="inputKey">
    </div>
</template>

<script>
import { showToast } from 'vant'

export default {
    name: 'DocImageUpload',
    props: {
        // 上传描述
        description: { default: '温馨提示：请上传JPG、PNG格式图片，文件大小不超过5M' },
        // 传入的img数据 { id, trueDownloadUrl }
        imageData: { default: () => [] },
        // 上传按键的文字
        btText: { default: '上传图片' },
        // 图片框大小
        size: String,
        // 上传最大数量
        maxLength: { default: 1 },
        lengthMessage: { default: '已达到图片上限，请移除后再上传' }
    },
    data() {
        return {
            // 内部图片对象
            innerImage: [],
            file: null,
            spinning: false,
            inputKey: '1',
            // viewer显示
            visible: false
        }
    },
    computed: {
        fileElem() {
            return this.$refs['fileElem']
        },
        ids() {
            return this.innerImage.map(e => e.id).join(',')
        }
    },
    methods:{
        init() {
            if (this.imageData?.length) {
                this.innerImage = [...this.imageData]
            } else {
                this.innerImage = [
                    { fileType: 'pdf', id: 1 },
                    { fileType: 'png', id: 2 },
                    { fileType: 'png', id: 3 }
                ]
            }
        },
        fileSelect() {
            console.log(this.innerImage, this.maxLength)
            if (this.innerImage?.length >= this.maxLength) {
                showToast(this.lengthMessage)
                return
            }
            const dom = this.$refs['fileElem']
            if (dom) {
                dom.click()
            }
        },
        upload() {
            let formData = new FormData()
            formData.append('file', this.file)
            this.spinning = true
            fileUpload(formData).then(res => {
                // this.$message.success('上传成功')
                let result = res.data || {}
                this.$emit('upload', result)
                this.addImage(result)
                this.inputKey = Math.random().toString(16).substring(2, 6)
                this.$emit('change', this.ids, this.innerImage)
                this.formItemContext.onFieldChange()
            }).finally(() => {
                this.spinning = false
            })
        },
        handleFiles() {
            let files = this.$refs['fileElem'].files
            if (files.length <= 0) {
                showToast('未选中文件，请尝试重新选择')
                return
            }
            if (files[0].size / 1024 / 1024 > 5) {
                showToast('图片大小不能超过5M')
                return
            }
            this.file = files[0]
            this.upload()
        },
        addImage(data = {}) {
            if (!data.id) {
                console.warn('addImage 文件为空')
                return
            }
            if (!this.innerImage.find(e => e.id === data.id)) {
                this.innerImage.push(data)
            }
        },
        removeImage(item) {
            if (!item) return
            this.innerImage = this.innerImage.filter(e => e.id != item.id)
            this.$emit('change', this.ids, this.innerImage)
        }
    },
    watch: {
        imageData: {
            handler(value) {
                this.init()
            },
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>
.description {
    color: #A5AEBE;
}
.upload-btn {
    color: var(--van-primary-color);
    border: 1px solid #eee;
    background-color: #FAFAFA;
    border-radius: 8px;
}
.image-box {
    >div {
        width: calc(33.3vw - 8px);
        position: relative;
        border: 1px solid #999;
        border-radius: 2px;
        img {
            object-fit: contain;
        }
    }
    .close-btn {
        position: absolute;
        font-size: 16px;
        top: -8px;
        right: -8px;
    }
}
</style>