<template>
    <cell :title="label" :required="required">
        <uploader class="abc" slot="label" v-model="fileList" :image-fit="imageFit" :disabled="disabled" :max-count="limit" :multiple="false" :preview-size="previewSize" :after-read="handleUpload" @delete="handleDelete">
            <img v-if="id1" style="width:130pt;height:75pt" alt="" src="../../../../assets/images/upId1.png">
            <img v-else  alt=""  style="width:130pt;height:75pt" src="../../../../assets/images/upId2.png">
        </uploader>
    </cell>

</template>

<script>
import mixin from "./mixin";
import { uploadImage } from "@/api/system/common";
import { join } from "lodash";
import { Cell, Uploader } from "vant";
/**
 * 文件上传组件
 */
export default {
    name: "UploadId",
    components: { Cell, Uploader },
    mixins: [mixin],
    model: {
        prop: "value",
        event: "change",
    },
    props: {
        id1: {
            type: Boolean,
            default: true,
        },
        uploadIcon: {
            type: String,
            default: 'plus',
        },
        selfImageWidth:String,
        selfImageHeight:String,
        selfImageUrl:{
             type: String,
            default: "fill",
        },
        limit: {
            type: Number,
            default: 1,
        },
        imageFit: {
            type: String,
            default: "fill",
        },
        previewSize: Number,
    },
    data() {
        return {
            fileList: this.extractFiles(),
        };
    },
    watch: {
        value() {
            this.fileList = this.extractFiles();
        },
    },
    methods: {
        async handleUpload(file) {
            file.status = "uploading";
            const { code, url } = await uploadImage(file.file);
            if (code === 200) {
                this.$emit("change", this.generateUrl(url));
            } else {
                file.status = "failed";
            }
        },
        handleDelete() {
            if (!this.fileList || this.fileList.length === 0) {
                this.$emit("change", null);
                return;
            }
            const urls = this.fileList.map(({ url }) => url);
            this.$emit("change", urls);
        },
        extractFiles() {
            return (
                this.value
                    ?.split(",")
                    .map((url) => ({ url, status: "done" })) || []
            );
        },
        generateUrl(url) {
            const urls = this.value?.split(",") || [];
            if (url && url.length > 0) {
                urls.push(url);
            }
            return join(urls, ",");
        },
    },
};
</script>
<style scoped>
/deep/ .van-uploader__upload,
/deep/ .van-image,
/deep/ .van-uploader__preview-image  {
    width: 130pt;
    height: 75pt;
}
/deep/ .van-uploader__upload-text {
    margin-top: 8px;
    color: #969799;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #1da4f2;
    color: #fff;
    text-align: center;
}
/deep/ .van-uploader__upload,
/deep/ .van-image {
    background: #e8f6fe;
    border-radius: 10px;
    overflow: hidden;
}
/deep/ .van-icon__image {
    width: 4em;
    height: 3em;
    -o-object-fit: contain;
    object-fit: contain;
    margin-bottom: 23px;
}
</style>