import api from '@/api/api'
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js'
import { read } from 'fs';


export default {
	props: {
		// 是否显示组件
		visible: {
			type: Boolean,
			default: true,
		},
		// 标题名称 需要再 assets/images/common/ 目录下添加图标
		icon: {
			type: String,
			default: "succ",
		},
		// 标题，不建议使用
		title: {
			type: String,
			default: "",
		},
		// 文案
		content: {
			type: String,
			default: "",
		},
		// 确认文案
		confirmText: {
			type: String,
			default: "確認",
		},
		// 取消文案
		cancelText: {
			type: String,
			default: "取消",
		},
		// 是否显示确认按钮
		showConfirm: {
			type: Boolean,
			default: true,
		},
		// 是否显示取消按钮
		showCancel: {
			type: Boolean,
			default: false,
		},
		// 是否显示遮罩层
		overlayShow: {
			type: Boolean,
			default: true,
		},

		// 确定按钮回调方法
		confirm: {
			type: Function,
			default: null
		},
		// 取消按钮回调方法
		cancel: {
			type: Function,
			default: null
		},
		// 点击关闭回调方法
		close: {
			type: Function,
			default: null
		},
		// 点击蒙层回调方法
		overlay: {
			type: Function,
			default: null
		},
		showType: {
			type: String,
			default: "owner"
		}
	},
	data() {
		return {
			key: 'value',
			ownerFrontPicSrc: null,
			ownerBackPicSrc: null,
			ownerFrontPicFile: null,
			ownerBackPicFile: null,

			insuredFrontPicSrc: null,
			insuredBackPicSrc: null,
			insuredFrontPicFile: null,
			insuredBackPicFile: null
		}
	},
	components: {},
	computed: {
		submitBtnDisabled() {
			let b = false;
			if (this.showType == "owner" || this.showType == "both") {
				let b1 = this.ownerFrontPicSrc ? false : true;
				let b2 = this.ownerBackPicSrc ? false : true;
				b = b1 || b2;
			}

			if (this.showType == "insured" || this.showType == "both") {
				let b3 = this.insuredFrontPicSrc ? false : true;
				let b4 = this.insuredBackPicSrc ? false : true;

				b = b || b3 || b4;
			}
			return b;
		}
	},
	methods: {
		// 点击确认
		onConfirmHandler() {
			if (this.submitBtnDisabled) {
				return;
			}

			this.$emit("onSubmit", {
				ownerFrontPicFile: this.ownerFrontPicFile,
				ownerBackPicFile: this.ownerBackPicFile,
				insuredFrontPicFile: this.insuredFrontPicFile,
				insuredBackPicFile: this.insuredBackPicFile
			});
		},
		handlePicSelect(type) {
			let _this = this;
			let input = document.createElement("input");
			input.setAttribute("type", "file");
			input.setAttribute("accept", "image/*");
			input.onchange = function (val) {
				var reader = new FileReader();
				reader.onload = function (e) {
					switch (type) {
						case "ownerFront":
							_this.$set(_this, 'ownerFrontPicSrc', reader.result);
							break;
						case "ownerBack":
							_this.$set(_this, 'ownerBackPicSrc', reader.result);
							break;
						case "insuredFront":
							_this.$set(_this, 'insuredFrontPicSrc', reader.result);
							break;
						case "insuredBack":
							_this.$set(_this, 'insuredBackPicSrc', reader.result);
							break;
					}
				}
				let file = input.files[0];
				switch (type) {
					case "ownerFront":
						_this.$set(_this, 'ownerFrontPicFile', file);
						break;
					case "ownerBack":
						_this.$set(_this, 'ownerBackPicFile', file);
						break;
					case "insuredFront":
						_this.$set(_this, 'insuredFrontPicFile', file);
						break;
					case "insuredBack":
						_this.$set(_this, 'insuredBackPicFile', file);
						break;
				}
				reader.readAsDataURL(file);
			};
			input.click();
		},
		// 点击取消
		onCancelHandler() {
			this.$emit("close");
		},
		// 点击关闭
		onCloseHandler() {
			this.$emit("close");
		},
		// 点击蒙层
		onOverLayHandler() {
			this.$emit("close");
		},
		init() {
			this.frontPicFile = null;
			this.backPicFile = null;
			this.frontPicSrc = null;
			this.backPicSrc = null;
		}
	},
	mounted() { },
	created() {
	 }
}