<template>
    <!-- 图片 -->
    <div>
        <ul>
            <li v-for="(item, index) in formItem.value" :key="item">
                <img :src="getFileUrl(item)">
                <el-link
                    class="del"
                    type="danger"
                    icon="el-icon-error"
                    :underline="false"
                    @click="del(item, index)"
                ></el-link>
            </li>
            <template v-if="list.length < listItem.verify.limit[1]">
                <li v-if="!listItem.verify.onlyCamera">
                    <el-upload
                        accept="image/*"
                        drag
                        action
                        multiple
                        :http-request="upload"
                        :show-file-list="false"
                    >
                        <i class="add el-icon-plus"></i>
                    </el-upload>
                </li>
                <div class="camera" v-else>请在手机端进行拍照</div>
            </template>
            <li v-for="n in 9" :key="n"></li>
        </ul>
    </div>
</template>

<script>
import { getFileUrl, getObjectKey } from '@/assets/utils/host.js'
import { ossUpload, ossDelete } from '@/assets/utils/ossTool.js'
import ossPaths from '@/assets/ossPaths.js'
const path = ossPaths.form
export default {
    name: 'FormImg',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            getFileUrl,
            list: [], // 判断数量的文件列表
            timer: null // 批量上传时超出最大数量只提示一次
        }
    },
    methods: {
        // 上传图片
        upload ({ file }) {
            if (this.list.length < this.listItem.verify.limit[1]) {
                this.list.push(file)
                const type = file.type.replace(/\/.+/, '')
                if (type === 'image') {
                    ossUpload({ path, file }).then(res => {
                        this.formItem.value.push(JSON.stringify(res))
                    })
                } else {
                    this.$message.warning('请上传图片')
                }
            } else {
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.$message.warning(`最多上传 ${this.listItem.verify.limit[1]} 张图片`)
                }, 500)
            }
        },
        // 删除图片
        del (item, index) {
            ossDelete({ path, key: getObjectKey(item) }).then(res => {
                this.list.splice(index, 1)
                this.formItem.value.splice(index, 1)
            })
        },
        // 校验
        verify () {
            return new Promise((resolve, reject) => {
                if (this.formItem.value.length === this.list.length) {
                    resolve()
                } else {
                    this.$message('请等待上传完成')
                    reject(new Error('请等待上传完成'))
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -5px -10px;
    li {
        padding: 10px;
        position: relative;
        &:empty {
            padding: 0;
            width: 120px;
        }
        img {
            width: 100px;
            height: 100px;
        }
        .add {
            width: 98px;
            line-height: 98px;
        }
        img {
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #DCDFE6;
        }
        .del {
            font-size: 24px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        /deep/ .el-upload {
            vertical-align: top;
            .el-upload-dragger {
                width: 100%;
                height: 100%;
            }
        }
        .add {
            display: block;
            font-size: 24px;
        }
    }
}
.camera {
    padding: 5px 10px;
}
</style>
