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

import { contactMethodCheck, policyNumberCheck } from '@utils/utils.js';

import Auth from '@components/auth/auth.vue';
import modalComp from '@/components/modal-comp/modal-comp.vue';
import DatePicker from '@/components/date-picker/date-picker.vue';

import { checkName } from '@/utils/utils.js';
import { Select, Option } from 'element-ui';

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

export default {
	data() {
		return {
			key: 'value',
			isHkCus: true,
			checked: false,
			isSubmit: false,
			contactIconShow: "",
			contactTypeShow: "",
			contactPlaceHolderShow: "",
			contactDateError: false,
			data: {
				name: "",
				contactType: "",
				contactMethod: "",
				complain: "",
				policyNumber: "",
				contactDate: ""
			},
			errorTips: {
				nameErr: "",
				contactTypeErr: "",
				contactMethodErr: "",
				complainErr: "",
				policyNumberErr: "",
				contactDateErr: ""
			},
			// 联系方式
			modalSimpleVisiable: false,
			modalVisiable: false,
			targetPath: "",
			modalIcon: "succ",
			modalContent: "",
		}
	},
	components: {
		DatePicker,
		Auth,
		modalComp
	},
	computed: {
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		},
		contactTypes() {
			return this.i18n.complaintAcceptance.contactTypes;
		},
		submitBtnDisabled() {
			let b1 = !this.checked;
			let b2 = this.data.contactDate ? false : true;
			let b3 = checkName(this.data.name) ? false : true;
			let b4 = this.checkContactMethod() ? true : false;
			let b5 = this.data.complain ? false : true;
			let b6 = this.contactDateError;
			let b7 = this.data.policyNumber && !policyNumberCheck(this.data.policyNumber);
			return b1 || b2 || b3 || b4 || b5 || b6 || b7;
		}
	},
	methods: {
		checkDate(data) {
			this.contactDateError = data.disable;
			if (this.contactDateError) {
				this.errorTips.contactDateErr = this.i18n.reservation.errorTips.e4;
			}
		},
		showModal(content, icon) {
			icon = !icon || typeof icon === "undefined" ? "succ" : icon;
			this.modalIcon = icon;
			this.modalContent = content;
			this.modalVisiable = true;
		},
		modalCallback() {
			this.modalVisiable = false;
		},
		initData() {
			this.data.contactType = this.contactTypes[0].value;
			this.contactTypeShow = this.contactTypes[0].show;
			this.contactIconShow = this.contactTypes[0].icon;
		},
		submitHandler() {
			if (!this.checked || this.isSubmit) {
				return;
			}
			let b3 = this.checkContactMethod();
			if (b3) {
				this.errorTips.contactMethodErr = b3;
			}
			this.checkName();
			this.checkContactType();
			this.checkComplain();
			this.checkPolicyNumber();
			this.checkContactDate();

			if (!this.submitBtnDisabled) {
				this.isSubmit = true;
				httpPost({
					url: api.saveComplain,
					data: this.data
				}).then(() => {
					this.showSubmitSuccess();
					this.isSubmit = false;
				}).catch(() => {
					this.isSubmit = false;
				})
			}
		},
		showSubmitSuccess() {
			this.showModal(this.i18n.complaintAcceptance.success);
			// this.data.name = "";
			// this.data.contactMethod = "";
			this.data.complain = "";
			this.data.policyNumber = "";
			this.data.contactDate = "";
			this.checked = false;
		},
		checkName() {
			if (!this.data.name) {
				this.errorTips.nameErr = this.i18n.complaintAcceptance.errorTips.e1;
				return false;
			}
			return true;
		},
		checkContactType() {
			if (!this.data.contactType) {
				this.errorTips.contactTypeErr = this.i18n.complaintAcceptance.errorTips.e1;
				return false;
			}
			return true;
		},
		checkContactMethod() {
			if (!this.data.contactMethod) {
				return this.i18n.complaintAcceptance.errorTips.e1;
			}
			if (this.data.contactType == 1) {
				let hkMobile = contactMethodCheck('hkmobile', this.data.contactMethod);
				let zhMobile = contactMethodCheck('mobile', this.data.contactMethod);
				if (!hkMobile && !zhMobile) {
					return this.i18n.complaintAcceptance.errorTips.e4;
				}
			} else {
				let emailCheck = contactMethodCheck('email', this.data.contactMethod);
				if (!emailCheck) {
					return this.i18n.complaintAcceptance.errorTips.e5;
				}
			}
			return "";
		},
		checkComplain() {
			if (!this.data.complain) {
				this.errorTips.complainErr = this.i18n.complaintAcceptance.errorTips.e1;
				return false;
			}
			return true;
		},
		checkPolicyNumber() {
			this.data.policyNumber = this.data.policyNumber ? this.data.policyNumber.replace(/\s*/g, "") : "";
			if (this.data.policyNumber && !policyNumberCheck(this.data.policyNumber)) {
				this.errorTips.policyNumberErr = this.i18n.complaintAcceptance.errorTips.e3;
				return false;
			}
			return true;
		},
		checkContactDate() {
			if (!this.data.contactDate) {
				this.errorTips.contactDateErr = this.i18n.complaintAcceptance.errorTips.e1;
				return false;
			}
			if (this.contactDateError) {
				return false;
			}
			return true;
		},
		userLogin(uinfo) {
			if (uinfo && uinfo.hadFullInfo == "1") {
				httpPost({ url: api.profile, sid: true }).then(res => {
					if (res && res.fullName) {
						this.data.name = res.fullName;
						this.data.contactMethod = res.mobileNo;
					}
				}).catch(err => {

				});
			}
		}
	},
	watch: {
		'data.name': function () {
			// this.errorTips.nameErr = "";

			if (checkName(this.data.name)) {
				this.errorTips.nameErr = "";
			} else {
				this.errorTips.nameErr = this.i18n.error.nameTip;
			}
		},
		'data.contactType': function (val) {
			this.errorTips.contactTypeErr = "";
			this.contactTypeShow = this.contactTypes[val - 1].show;
			this.contactIconShow = this.contactTypes[val - 1].icon;
			this.contactPlaceHolderShow = this.contactTypes[val - 1].placeholder;
		},
		'data.contactMethod': function () {
			let b3 = this.checkContactMethod();
			if (b3) {
				this.errorTips.contactMethodErr = b3;
			} else {
				this.errorTips.contactMethodErr = "";
			}
		},
		'data.complain': function (v, ov) {
			if (v && v.length > 500) {
				this.data.complain = v.substring(0, 500);
			}
			this.errorTips.complainErr = "";
		},
		'data.policyNumber': function () {
			this.errorTips.policyNumberErr = "";
		},
		'data.contactDate': function () {
			this.errorTips.contactDateErr = "";
		}
	},
	mounted() {
		this.initData();
	},
	created() {
		this.$root.eventBus.$on("langChange", () => {
			try {
				this.initData();
			} catch (e) { }
		});
	 }
}