import api from '@/api/api'
import {
    httpGet,
    httpPost,
    formdata
} from '@/api/fetch-api.js'

import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);

export default {

    props: {
        // 是否显示组件
        options: {
            type: Object,
            default() {
                return {
                    // 名称
                    name: "",
                    // 图标编号
                    icon: "",
                    // 影像名称
                    imageFileName: "",
                    // 主单证类型
                    imageMainTypeID: "",
                    // 副单证类型
                    imageTypeID: "",
                };
            }
        },
        icon: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            uploadFiles: 0,
            images: [],
        }
    },
    components: {
    },
    computed: {
        uploading() {
            let len = this.images.length;
            if (len < 0) {
                return false;
            }
            for (let index = 0; index < len; index++) {
                let d = this.images[index] || null;
                if (!d) {
                    continue;
                }
                if (d.intervial) {
                    return true;
                }
            }
            return false;
        },
        i18n() {
            return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
        },
    },
    methods: {
        initData() {

        },
        selectMutilFile() {
            if (this.uploading) {
                return;
            }

            let _this = this;
            let input = document.createElement("input");
            input.setAttribute("type", "file");
            input.setAttribute("multiple", "multiple");
            input.setAttribute("accept", "image/*");
            input.onchange = function (val) {
                let position = _this.images.length;
                for (let index = 0; index < input.files.length; index++) {
                    setTimeout(function () {
                        _this.initFileUpload(input.files[index], position + index);
                    }, index * 50);
                };
            };
            input.click();
        },
        initFileUpload(file, index) {
            let _this = this;
            var reader = new FileReader();
            reader.onload = function (e) {
                let d = {
                    file: file,
                    data: reader.result,
                    cacheKey: "",
                    showMask: false,
                    key: _this.randomAesKey(),
                    intervial: false,
                    tips: "",
                    err: ""
                };
                _this.$set(_this.images, index, d);
                _this.handleFileUpload(d, index);
            }
            reader.readAsDataURL(file);
        },
        handleFileUpload(item, index) {
            item.intervial = setInterval(function () {
                item.tips = item.tips + ".";
                if (item.tips.length > 3) {
                    item.tips = "";
                }
            }, 1000);
            this.$set(this, "images", this.images);
            let param = {
                file: item.file,
                key: item.key
            }
            formdata({ url: api.uploadClarmsImage, data: param }).then(res => {
                item.cacheKey = res.content.id
                clearInterval(item.intervial);
                item.intervial = false;
                this.$set(this, "images", this.images);
                this.refreshUploadNumber();
            }).catch(err => {
                clearInterval(item.intervial);
                item.intervial = false;
                item.err = "失败";
                this.$set(this, "images", this.images);
            });
        },
        refreshUploadNumber() {
            let d = this.images.length;
            let number = 0;
            for (let index = 0; index < d; index++) {
                let v = this.images[index] || null;
                if (v && v.cacheKey) {
                    number++;
                }
            }
            this.uploadFiles = number;
            this.emitResult();
        },
        onOverHandler(event, item, index) {
            item.showMask = true;
            event.preventDefault();
        },
        onOutHandler(event, item, index) {
            item.showMask = false;
            event.preventDefault();
        },
        removeItem(index) {
            let images = JSON.parse(JSON.stringify(this.images));
            images.splice(index, 1);
            this.$set(this, "images", images);
            this.refreshUploadNumber();
        },
        randomAesKey() {
            let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
            let res = "";
            for (let i = 0; i < 16; i++) {
                let id = Math.ceil(Math.random() * (chars.length - 1));
                res += chars[id];
            }
            return res;
        },
        emitResult() {
            if (this.images.length == 0) {
                this.$emit("success", []);
                return;
            }
            if (this.uploading) {
                return;
            }
            let result = [];
            let len = this.images.length;
            if (len < 0) {
                return false;
            }
            for (let index = 0; index < len; index++) {
                let d = this.images[index] || null;
                if (!d || !d.cacheKey) {
                    continue;
                }
                // 结果
                let res = {
                    seqNumber: index + 1,
                    cloudStorageID: d.cacheKey,
                    imageFileName: this.options.imageFileName,
                    imageMainTypeID: this.options.imageMainTypeID,
                    imageTypeID: this.options.imageTypeID
                }
                result.push(res);
            }
            this.$emit("success", result);
        }
    },
    watch: {

    },
    mounted() {
        this.initData();
    },
    created() { }
}