<template>
    <view class="content">
        <u-upload :fileList="ImgUrl" @afterRead="afterRead" :deletable="true" @delete="deletePic" name="6" :maxCount="1"
            :width="width" :height="height">
            <image :src="backImg" mode="widthFix" :style="`width: ${width}px;height: ${height}px;`"></image>
        </u-upload>
    </view>
</template>

<script>
    import {
        uploadFile
    } from '@/api/upload.js'
    export default {
        name: 'UploadIdNumber',
        props: {
            backImg: {
                type: String,
                require: true,
            },
            value: {
                type: String,
                default: null
            },
            width: {
                type: Number,
                default: 250
            },
            height: {
                type: Number,
                default: 150
            },
        },
        computed: {
            ImgUrl(val) {
                return this.value ? [this.value] : []
            }
        },
        methods: {
            afterRead({
                file,
                index,
                name
            }) {
                // this.$emit("input", file);
                uploadFile(file).then((url) => {
                    this.$emit("input", url);
                })
            },
            deletePic() {
                this.$emit("input", null);
            },
        }
    }
</script>

<style scoped>
    .content {
        margin: 20rpx 0 0 0;
    }
</style>