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

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

import Auth from '@components/auth/auth.vue';
import modalComp from '@/components/modal-comp/modal-comp.vue';
import PolicyHeadList from "./policy-head-list.vue";
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);

export default {
	data() {
		return {
			loading: false,
			showForm: false,
			key: 'value',
			checked1: false,
			checked2: false,
			checked3: false,
			dataInit: false,
			selectedPolicies: [],
			data: {
				mobileAreaCode: "",
				mobile: "",
				email: "",
				address: "",
			},
			errorTips: {
				e1: "",
				e2: "",
				e3: ""
			},

			modalSimpleVisiable: false,
			modalVisiable: false,
			targetPath: "",
			modalIcon: "succ",
			modalContent: "",
		}
	},
	components: {
		Auth,
		PolicyHeadList,
		modalComp
	},
	computed: {
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		},
		submitBtnDisabled() {
			let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
			let b2 = !this.data.address && !this.data.email && !this.data.mobile;
			return b1 || b2;
		}
	},
	methods: {
		showModal(content, icon) {
			icon = !icon || typeof icon === "undefined" ? "succ" : icon;
			this.modalIcon = icon;
			this.modalContent = content;
			this.modalVisiable = true;
		},
		modalCallback() {
			this.modalVisiable = false;
		},
		showSuccess() {
			this.showModal(this.i18n.policyChangeContact.success);
		},
		updateContactsHandler() {
			if (this.submitBtnDisabled) {
				return;
			}

			let b1 = this.checkMobile();
			let b2 = this.checkEmail();
			let b3 = this.checkAddress();
			let b = b1 & b2 & b3;
			if (b) {
				if (this.loading) {
					return;
				}
				let policies = [];
				this.selectedPolicies.forEach(element => {
					policies.push({ policyId: element.id, policyCode: element.code });
				});
				let data = {
					mobileNo: this.data.mobile,
					address: this.data.address,
					email: this.data.email,
					mobileNoAcceptMsg: this.checked1 ? 1 : 0,
					addressAcceptMsg: this.checked2 ? 1 : 0,
					emailAcceptMsg: this.checked3 ? 1 : 0,
					policies: policies
				}
				this.loading = true;
				httpPost({
					url: api.updatePolicyContanct,
					data: data,
					sid: true
				}).then(() => {
					this.loading = false;
					this.showSuccess();
				}).catch(err => {
					this.loading = false;
					if (err.code == 404) {
						this.$refs.auth.noAuth();
					}
				})
			}
		},
		checkMobile() {
			if (this.data.mobile) {
				let hkMobile = contactMethodCheck('hkmobile', this.data.mobile);
				let zhMobile = contactMethodCheck('mobile', this.data.mobile);
				if (!hkMobile && !zhMobile) {
					this.errorTips.e1 = this.i18n.policyChangeContact.errorTips.e1;
					return false;
				}
			}
			return true;
		},
		checkAddress() {
			return true;
		},
		checkEmail() {
			if (this.data.email && !contactMethodCheck('email', this.data.email)) {
				this.errorTips.e3 = this.i18n.policyChangeContact.errorTips.e3;
				return false;
			}
			return true;
		},
		initData() {
			if (this.dataInit) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.data = null;
			this.loading = true;
			let param = {
				policyId: this.selectedPolicies[0].id,
				policyCode: this.selectedPolicies[0].code
			};
			httpPost({
				url: api.policyDetail,
				data: param,
				sid: true
			}).then(response => {
				this.data = {};
				if (response) {
					this.loading = false;
					this.dataInit = true;
					this.data.mobile = response.clientMobileNo;
					this.checked1 = "1" == response.clientMobileAcceptMessage;
					this.data.address = response.clientContactAddress;
					this.checked2 = "1" == response.clientAddressAcceptMessage;
					this.data.email = response.clientEmail;
					this.checked3 = "1" == response.clientEmailAcceptMessage;
				}
			}).catch(res => {
				if (res.code == "404") {
					this.$refs.auth.noAuth();
				}
			});
		},
		handlePolicySelect(data) {
			this.selectedPolicies = data;
			this.initData();
		},
		userLogout() {
			this.showForm = false;
		},
		userLogin(data) {
			this.showForm = true;
		},
		initTitle() {
			try {
				let title = this.i18n.customService.menu42;
				setTitle(title);
			} catch (e) {
				console.error(e);
			}
		}
	},
	watch: {
		'data.mobile': function () {
			this.errorTips.e1 = "";
		},
		'data.address': function () {
			this.errorTips.e2 = "";
		},
		'data.email': function () {
			this.errorTips.e3 = "";
		}
	},
	mounted() {
		this.initTitle();
	}
}