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: "",
					// 主单证类型
					imageMainTypeID: "",
					// 副单证类型
					imageTypeID: "",
					// toast消息
					toast: "",
				};
			}
		},
		icon: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			uploadFiles: 0,
			images: [],
			tipsVisible: false,
		}
	},
	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;
			}
			this.$emit("beforeUpload", {
				type: this.options.imageTypeID
			});
			console.log("options:", this.options);
			let _this = this;
			let input = document.createElement("input");
			input.setAttribute("type", "file");
			input.setAttribute("multiple", "multiple");
			// input.setAttribute("accept", "image/*");
			input.setAttribute("accept", "image/jpeg");
			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 = {
					fileName: "",
					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 => {
				if (res && res.content && res.content.id) {
					item.fileName = res.content.fileName;
					item.cacheKey = res.content.id;
					clearInterval(item.intervial);
					item.intervial = false;
					this.$set(this, "images", this.images);
					this.refreshUploadNumber();
				} else {
					clearInterval(item.intervial);
					item.intervial = false;
					item.err = "失败";
					this.$set(this, "images", this.images);
					this.refreshUploadNumber();
				}
			}).catch(err => {
				clearInterval(item.intervial);
				item.intervial = false;
				item.err = "失败";
				this.$set(this, "images", this.images);
				this.refreshUploadNumber();
			});
		},
		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 list = [];
			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 = {
					cloudStorageID: d.cacheKey,
					imageFileName: d.fileName,
					imageMainTypeID: this.options.imageMainTypeID,
					imageTypeID: this.options.imageTypeID
				}
				list.push(res);
			}
			let result = {
				type: this.options.imageTypeID,
				list: list
			};
			this.$emit("success", result);
		},
		onShowTipsOverHandler(event) {
			this.tipsVisible = true;
		},
		onShowTipsOutHandler(event) {
			this.tipsVisible = false;
		}
	},
	watch: {

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