<template>
    <view class="content_upload" :style="contentStyle">
        <u-upload
            :fileList="ImgUrl"
            @afterRead="afterRead"
            :deletable="true"
            @delete="deletePic"
            name="6"
            :maxCount="1"
            :width="width"
            :height="height"
        >
            <image :src="backImg" :style="{ width: width + 'px', height: height + 'px' }"></image>
            <image
                class="iconimg"
                src="/static/img/Takingpictures.png"
                :style="{ width: width / 4 + 'px', height: height / 4 + '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: 280,
        },
        height: {
            type: Number,
            default: 150,
        },
        contentStyle: {
            type: String,
            default: '',
        },
    },
    computed: {
        ImgUrl(val) {
            return this.value
                ? [
                      {
                          name: 'img.jpg',
                          url: 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_upload {
    position: relative;
}

.iconimg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
