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

import DatePicker from '@/components/date-picker/date-picker.vue'

export default {
	data() {
		return {
			isSubmit: false,
			key: 'value',
			isHkCus: true,
			checked: false,
			data: {
				name: "",
				contactType: "",
				contactMethod: "",
				reservationType: "",
				instruction: "",
				hkCustomer: "",
				contactDate: ""
			},
			errorTips: {
				e1: "",
				e2: "",
				e3: "",
				e4: "",
				e5: "",
				e6: "",
				e7: ""
			}
		}
	},
	components: {
		DatePicker
	},
	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.customService.reservation.contactTypes;
		},
		reservationTypes() {
			return this.i18n.customService.reservation.reservationTypes;
		}
	},
	methods: {
		initData() {
			this.data.contactType = this.contactTypes[0];
			this.data.reservationType = this.reservationTypes[0];
		},
		submitHandler() {
			if (!this.checked || this.isSubmit) {
				return;
			}
			let b1 = this.checkName();
			let b2 = this.checkContactMethod();
			let b3 = this.checkInstruction();
			let b4 = this.checkContactDate();
			let b = b1 & b2 & b3 & b4;

			if (b) {
				this.isSubmit = true;
				this.data.hkCustomer = this.isHkCus ? 1 : 0;
				httpPost({
					url: api.saveReservation,
					data: this.data
				}).then(() => {
					this.showSubmitSuccess();
					this.isSubmit = false;
				}).catch(() => {
					this.isSubmit = false;
				})
			}
		},
		showSubmitSuccess() {
			alert("提交成功");
			this.data.name = "";
			this.data.contactMethod = "";
			this.data.instruction = "";
		},
		checkName() {
			if (!this.data.name) {
				let message = this.i18n.customService.reservation.errorTips.e1;
				this.errorTips.e1 = message;
				return false;
			}
			return true;
		},
		checkContactMethod() {
			if (!this.data.contactMethod) {
				let message = this.i18n.customService.reservation.errorTips.e1;
				this.errorTips.e3 = message;
				return false;
			}
			return true;
		},
		checkInstruction() {
			if (!this.data.instruction) {
				let message = this.i18n.customService.reservation.errorTips.e1;
				this.errorTips.e5 = message;
				return false;
			}
			return true;
		},
		checkContactDate() {
			if (!this.data.contactDate) {
				let message = this.i18n.customService.reservation.errorTips.e1;
				this.errorTips.e7 = message;
				return false;
			}
			return true;
		}
	},
	watch: {
		'data.name': function () {
			this.errorTips.e1 = "";
		},
		'data.contactMethod': function () {
			this.errorTips.e3 = "";
		},
		'data.instruction': function () {
			this.errorTips.e5 = "";
		},
		'data.contactDate': function () {
			this.errorTips.e7 = "";
		}
	},
	mounted() {
		this.initData();
	},
	created() { }
}