/**
 * 页面描述:官网首页
 */

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

import DatePicker from "@/components/date-picker/date-picker.vue";
import Slider from "@/components/slider-comp/slider-comp.vue";
import ModalComp from "@/components/modal-comp/modal-comp.vue";
import Modal2Comp from "@/components/modal2-comp/modal2-comp.vue";

import {
	ddMMyyyy2yyyyMMdd
} from "@utils/utils.js";
import {
	contactMethodCheck
} from "@utils/utils.js";

// import calc from 'calculatorjs';

export default {
	data() {
		return {
			key: "value",
			img:require("@/assets/images/index/index-tab-2.png"),
			PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时
			PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
			// swiper
			swiperOption: {
				// navigation: {
				// 	nextEl: ".swiper-button-next",
				// 	prevEl: ".swiper-button-prev"
				// },
				// pagination: {
				// 	el: ".swiper-pagination",
				// 	clickable: true
				// },
			},

			loading: false,
			modalVisiable: false,
			errorVisible: false,
			modalIcon: "succ",
			modalContent: "",

			dataList: [], // 首页请求数据
			bannerList: [],
			bannerCandidateList: [],

			// 导航菜单
			curTab: {},

			// 投保
			quoteData: {
				gender: "",
				birthday: ""
			},
			// 投保背景图
			// quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",

			// 表单
			formData: {
				title: "",
				name: "",
				mobile: "",
				email: "",
				contactTime: "",
				inquiry: ""
			},
			// 性别列表
			// 错误提示
			errorTips: {
				e1: "", // 称呼
				e2: "", // 姓名
				e3: "", // 联系电话
				e4: "", // 電郵
				e5: "", // 理想聯絡時間
				e6: "", // 查詢事項
			},

			sliderMin: 1, // 投保滑动最小值
			sliderMax: 300, // 投保滑动最大值
			sliderPer: 1, // 保费数值  

			// 繳費期列表
			paymentPeriodList: [{
				v: 3,
				n: "",
				p: 333.330000
			},
			{
				v: 5,
				n: "",
				p: 200.000000
			},
			{
				v: 8,
				n: "",
				p: 125.000000
			},
			{
				v: 10,
				n: "",
				p: 100.000000
			}
			],
			// 缴费选项列表
			paymentOptionList: [{
				v: 1,
				m: 12,
				n: "",
				p: 1
			},
			{
				v: 2,
				m: 6,
				n: "",
				p: 0.5064
			},
			{
				v: 4,
				m: 6,
				n: "",
				p: 0.2548
			},
			{
				v: 12,
				m: 1,
				n: "",
				p: 0.0853
			}
			],

			// 当前选择保费期
			curPaymentPeriod: {},
			// 当前缴费选项
			curPaymentOption: {}
		};
	},
	components: {
		DatePicker,
		Slider,
		ModalComp,
		Modal2Comp
	},
	computed: {
		locale() {
			return this.$i18n.locale || "tc";
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ?
				this.$i18n.messages[this.$i18n.locale] : {};
		},
		titleList() {
			let result = [{
				n: this.i18n.common.MaleTitle,
				v: "M"
			},
			{
				n: this.i18n.common.FemaleTitle,
				v: "F"
			}
			]
			// console.log("result:", result);
			return result;
		},
		submitBtnDisabled() {
			// let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
			// let b2 = !this.data.address && !this.data.email && !this.data.mobile;

			let formData = this.formData;
			let boo = !formData.title || !formData.name || !formData.mobile || !formData.email || !formData.contactTime;
			return boo;
		},
		// 表格tab缩进计算
		tableTapIndentation() {
			let result = {};
			let mar = 0; // 两边缩进
			let ind = 0; // 缩进简介
			let wid = 240;
			let dataList = this.dataList;
			let len = dataList.length;
			switch (len) {
				case 1:
					mar = 100;
					ind = 0;
					wid = 1200;
					break;

				case 2:
					mar = 60;
					ind = 120;
					wid = 600;
					break;

				case 3:
					mar = 30;
					ind = 60;
					wid = 400;
					break;

				case 4:
					mar = 20;
					ind = 40;
					wid = 300;
					break;

				case 5:
					mar = 15;
					ind = 30;
					wid = 240;
					break;

				default:
					break;
			}
			result = {
				mar,
				ind,
				wid
			};
			return result;
		},

		/**
		 * 
		 * 保费=保额/1000 * 费率因子 * 缴别系数
		 * 以50万港币为例，缴费期10年，季缴，计算如下：
		 * 500,000 / 1000 * 100 * 0.2548 = 12740
		 */
		sumAssured() {
			let {
				curPaymentPeriod,
				curPaymentOption,
				sliderPer
			} = this;
			let bet = 10000; //单位 万元
			let result = bet * sliderPer / 1000 * curPaymentPeriod.p * curPaymentOption.p;
			result = result.toFixed(2);
			return result;
		}
	},
	methods: {
		btnNavigateTo(type, link, d) {
			switch (type) {
				case "none":
					break;
				case "news":
					this.$router.push({
						path: "/news/detail",
						query: {
							c: link
						}
					});
					break;
				case "product":
					break;
				case "vhis":
					this.$router.push({
						path: "/vhis",
						query: {
							p: link,
							d: JSON.stringify(d)
						}
					});
					break;
				default:
					location.href = link;
					this.initView();
					break;
			}
		},
		// 选择繳費期
		onSelectPaymentPeriodHandler(item) {
			this.curPaymentPeriod = item;
		},
		// 选择缴费选项
		onSelectPaymentOptionHandler(item) {
			this.curPaymentOption = item;
		},
		// 投保组件性别选择
		onQuoteSexHandler(gender) {
			this.quoteData.gender = gender;
		},
		// 选择标签
		onTabHandler(item) {
			this.curTab = item;
			this.swiperSiderTo(this.curTab.index);
		},
		// 上一个tab
		onPrevTabHandler() {
			if (this.dataList.length <= 0) return;
			let index = this.curTab.index;
			index--;
			if (index < 0) {
				index = this.dataList.length - 1;
			}
			this.curTab = this.dataList[index];
			this.swiperSiderTo(this.curTab.index);
		},
		// 下一个tab
		onNextTabHandler() {
			if (this.dataList.length <= 0) return;
			let index = this.curTab.index;
			index++;
			if (index >= this.dataList.length) {
				index = 0;
			}
			this.curTab = this.dataList[index];
			this.swiperSiderTo(this.curTab.index);
		},
		swiperSiderTo(index) {
			this.$nextTick(function () {
				let durTime = 600;
				this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true);
				this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true);
				// this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true);
			})
		},

		// 联系我们
		toContactUs() {
			this.$router.push({
				path: "/custom/service?q=m1"
			});

		},
		/**
		 * 点击我要报价
		 * 根据当前tab跳转到不同页面
		 * “好e时”tab的情况下，点击立即报价，跳到VHIS网销平台；传家福tab情况下调到传家福产品页
		 */
		onQuoteHandler() {

			if (this.curTab.relation == this.PRODUCT_PRO_EASY) {
				let d = {
					gender: this.quoteData.gender,
					birthday: this.quoteData.birthday,
				}
				// console.log("d:", d);
				this.btnNavigateTo("vhis", this.curTab.lastBtnDescribe.l, d);
			}
			if (this.curTab.relation == this.PRODUCT_REN_RICH) {
				this.$router.push({
					path: "/gen/rich",
					query: {}
				});
			}
		},
		/**
		 * 验证表单
		 */
		checkSubmit() {
			if (this.submitBtnDisabled) return;
			return new Promise((resolve, reject) => {

				this.errorTips = {
					e1: "",
					e2: "",
					e3: "",
					e4: "",
					e5: "",
					e6: "",
					e7: ""
				};

				let formData = this.formData;

				// 校验称呼
				if (!formData.title) {
					this.errorTips.e1 = this.i18n.index.contact.errorTips.e1;
				}
				// 校验姓名
				if (!formData.name) {
					this.errorTips.e2 = this.i18n.index.contact.errorTips.e2;
				}

				// 联系电话
				if (formData.mobile) {
					let hkMobile = contactMethodCheck("hkmobile", formData.mobile);
					let zhMobile = contactMethodCheck("mobile", formData.mobile);
					if (!hkMobile && !zhMobile) {
						this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
					}
				} else {
					this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
				}

				// 校验電郵
				if (formData.email) {
					if (formData.email && !contactMethodCheck("email", formData.email)) {
						this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
					}
				} else {
					this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
				}

				// 校验理想聯絡時間
				if (!formData.contactTime) {
					this.errorTips.e5 = this.i18n.index.contact.errorTips.e5;
				}

				//  查詢事項 不用校验
				// if (!formData.inquiry) {
				// 	this.errorTips.e6 = this.i18n.index.contact.errorTips.e6;
				// }

				let errorTips = this.errorTips;
				if (errorTips.e1 || errorTips.e2 || errorTips.e3 || errorTips.e4 || errorTips.e5) {

				} else {
					resolve();
				}
				// if (!(errorTips.e1 && errorTips.e2 && errorTips.e3 && errorTips.e4 && errorTips.e5)) {
				// 	console.log("11111");
				// 	// resolve();
				// }else{
				// 	console.log("2222");
				// }
			});
		},
		/**
		 * 提交表单
		 */
		onSubmitContact() {
			if (this.loading) {
				return;
			}
			// console.log("this.formData:", this.formData);
			this.checkSubmit().then((result) => {
				let formData = this.formData;
				let data = {
					sex: formData.title,
					name: formData.name,
					mobile: formData.mobile,
					email: formData.email,
					contactTime: formData.contactTime,
					inquiry: formData.inquiry
				}
				// console.log("data:", data);

				this.loading = true;
				httpPost({
					url: api.indexContact,
					data: data,
				}).then((result) => {
					this.formData = {
						title: "",
						name: "",
						mobile: "",
						email: "",
						contactTime: "",
						inquiry: ""
					}
					this.errorTips = {
						e1: "",
						e2: "",
						e3: "",
						e4: "",
						e5: "",
						e6: "",
						e7: ""
					};
					this.loading = false;
					this.showSuccess();
				}).catch((err) => {
					this.loading = false;
					this.errorVisible = true;
				});
			})
		},
		showSuccess() {
			this.showModal(this.i18n.common.SubmitSuccess);
		},
		showModal(content, icon) {
			icon = !icon || typeof icon === "undefined" ? "succ" : icon;
			this.modalIcon = icon;
			this.modalContent = content;
			this.modalVisiable = true;
		},
		initView() {
			let pos = this.$route.query.pos;
			let idx = this.$route.query.idx;
			if (pos && this.$refs[pos]) {
				this.$refs[pos].scrollIntoView();
			}
			if (idx >= 0) {
				idx = idx > this.dataList.length - 1 ? this.dataList.length - 1 : idx;
				this.curTab = this.dataList[idx];
				this.swiperSiderTo(idx);
			}
		},
		initData() {

			this.curPaymentPeriod = this.paymentPeriodList[0];
			this.curPaymentOption = this.paymentOptionList[0];

			let yearStr = this.i18n.index.quote.genRich.years;
			if (this.locale == "en") yearStr = " " + yearStr;
			this.paymentPeriodList.forEach(element => {
				element.n = element.v + "" + yearStr;
			});

			this.paymentOptionList[0].n = this.i18n.index.quote.genRich.Yearly;
			this.paymentOptionList[1].n = this.i18n.index.quote.genRich.SemiYearly;
			this.paymentOptionList[2].n = this.i18n.index.quote.genRich.Quarterly;
			this.paymentOptionList[3].n = this.i18n.index.quote.genRich.Monthly;


			// 读取缓存 其实也没啥用 图大的话还是慢
			let tempDataList = JSON.parse(sessionStorage.getItem("_pingan_index_datalist"));
			let tempBannerList = JSON.parse(sessionStorage.getItem("_pingan_index_bannerlist"));

			if (tempDataList) {
				this.dataList = tempDataList;
			}
			if (tempBannerList) {
				this.bannerList = tempBannerList;
			}

			// 可以埋数据在 localStorage
			httpPost({
				url: api.indexManageListApi,
				data: {},
				sid: true
			}).then((result) => {
				this.dataList = [];
				result.forEach(element => {
					let content = JSON.parse(element.content);
					let item = {}
					switch (this.locale) {
						case "en":
							item = content.confEn;
							break;
						case "zh":
							item = content.confCn;
							break;
						default:
							item = content.confTc;
							break;
					}
					this.dataList.push(item);
				});

				// 增加一个tap

				this.dataList.forEach((element, idx) => {
					element.index = idx;
					element.describeList = element.describe.split("\n");
				});
				this.curTab = this.dataList[0] || {};
				this.bannerList = this.dataList;
				this.bannerList.forEach(element => {
					element.btns = element.btnDescribe;
				});


				// 设置缓存
				sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList));
				sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList));

				this.initView();
			})

		},
	},
	beforeDestroy() { },
	mounted() {
		this.initData();
	},
	created() {
		this.$root.eventBus.$on("langChange", () => {
			try {
				// this.refreshBanner();
				this.initData();
			} catch (e) { }
		});
	},
	watch: {
		"formData.title": function () {
			this.errorTips.e1 = "";
		},
		"formData.name": function () {
			this.errorTips.e2 = "";
		},
		"formData.mobile": function () {
			this.errorTips.e3 = "";
		},
		"formData.email": function () {
			this.errorTips.e4 = "";
		},
		"formData.contactTime": function () {
			this.errorTips.e5 = "";
		},
	},
};