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

import Date from '@/utils/date.js';

export default {
	inheritAttrs: false,
	props: {
		// 周末是否可选
		value: {
			type: String,
			default: ""
		},
		// 周末是否可选
		weekend: {
			type: Boolean,
			default: false
		},
		// 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
		filterDates: {
			type: Array,
			default () {
				return [] // ["2019-11-26", "2019-11-28"]
			}
		},
		/**
		 * 占位符
		 * 1.默认空格字符串 " " 即视觉上无内容
		 * 2.空字符串 ""  使用默认国际化
		 * 3.自定义传值
		 */
		placeholder: {
			type: String,
			default: " "
		}

	},
	data() {
		return {
			dateValue: "", // 日期value yyyy-MM-dd
			dateType: 1, // 选择显示类型 1.日 2.月 3.年
			year: 1970,
			month: 1, // (1~12)
			date: 1, // (1~31)
			day: 0, // (0~6)
			yearPage: 1,
			yearList: [],
			yearRange: "", // 年份范围
			// 用户渲染的数据
			fortmatMonthData: [],
			visible: false,
		}
	},
	components: {},
	computed: {
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		},
		getDayList() {
			if (this.locale == 'en') {
				return ["Sun", "Mon", "Tue", "Wen", "Thu", "Fri", "Sat"]
			} else {
				return ["日", "一", "二", "三", "四", "五", "六"]
			}
		},
		getMonthList() {
			if (this.locale == 'en') {
				return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
			} else {
				return ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
			}
		},
		// 年月
		getDateType1() {
			if (this.locale == 'en') {
				let date = Date.parse(`${this.month}/${this.date}/${this.year}`);
				return date.toString('MMM , yyyy');
			} else {
				return `${this.year}年${this.month}月`
			}
		},
		// 年
		getDateType2() {
			if (this.locale == 'en') {
				return `${this.year}`
			} else {
				return `${this.year}年`
			}
		}
	},
	methods: {
		/**
		 * 画月历图
		 * 所需数据
		 * 		year  	年
		 * 		month 	月 (1~12)
		 * 		date		日  (1~31)
		 * 		day		星期几  (0-6)
		 *
		 * 输出数据
		 * 		fortmatMonthData 用于渲染日历的数据
		 */
		formatDate() {
			let result = [];
			let year = this.year;
			let month = this.month;

			// 获取当月天数
			let dayNum = Date.getDaysInMonth(year, month - 1);

			/**
			 * 排布出当月号码
			 * 组装数据
			 */
			for (let index = 0; index < dayNum; index++) {
				let curData = {}
				curData.standards = 0;
				let date = index + 1;
				let day = Date.parse(`${year}.${month}.${date}`).getDay();
				let isWeekend = day == 0 || day == 6;
				let disable = false; // 判断是否不可选
				disable = isWeekend && !this.weekend; // 判断周末不可选
				let filterDates = this.filterDates;
				filterDates.forEach(element => {
					let curDate = `${year}-${month}-${date}`;
					if (element == curDate) {
						disable = true;
					}
				});
				curData = Object.assign({
					year: year,
					month: month,
					date: date, // (1~31)
					day: day,
					isWeekend: isWeekend,
					disable: disable,
				}, curData);
				result.push(curData);
			}

			// 当月1号星期几 0-6 往前塞值
			let dateStr = month + '.' + '1' + '.' + year;
			let firstDay = Date.parse(dateStr).getDay();

			// 根据星期几在前面补空格 星期日0格子，星期一1格子，星期六6格子
			for (let index = 0; index < firstDay; index++) {
				result.unshift(null);
			}
			this.fortmatMonthData = result;
		},
		// 加/减 月份
		addMonths(value) {
			let dateStr = this.month + '.' + this.date + '.' + this.year;
			let targetDate = Date.parse(dateStr).addMonths(value);
			this.year = targetDate.getFullYear();
			this.month = targetDate.getMonth() + 1;
			this.date = targetDate.getDate();
			this.formatDate();
		},
		// 上一个月
		prevMonth() {
			this.addMonths(-1);
		},
		// 下一个月
		nextMonth() {
			this.addMonths(1);
		},
		// 加/减 年份
		addYear(value) {
			let dateStr = this.month + '.' + this.date + '.' + this.year;
			let targetDate = Date.parse(dateStr).addYears(value);
			this.year = targetDate.getFullYear();
			this.month = targetDate.getMonth() + 1;
			this.formatDate();
		},
		// 上一年
		prevYear() {
			this.addYear(-1);
		},
		// 下一年
		nextYear() {
			this.addYear(1);
		},
		// 选择日期
		selectDay(item) {
			if (!item) return;
			let curData = item;
			let curDate = curData.date;
			this.date = curDate;
			let {
				year,
				month,
				date
			} = this;
			// this.dateValue = `${year}-${month}-${date}`;
			this.formatDateValue(year, month, date);
			this.showCalendar();
		},
		// 选择月份
		selectMonth(item) {
			if (!item) return;
			this.dateType = 1;
			this.month = item;
			this.formatDate();
			let {
				year,
				month,
				date
			} = this;
			// this.dateValue = `${year}-${month}-${date}`;
			this.formatDateValue(year, month, date);
		},
		// 选择年份
		selectYear(item) {
			if (!item) return;
			this.dateType = 2;
			let curData = item;
			let curYear = curData.year;
			this.year = curYear;
			let {
				year,
				month,
				date,
			} = this;
			// this.dateValue = `${year}-${month}-${date}`;
			this.formatDateValue(year, month, date);
		},

		// 计算year渲染列表
		refreshYearList() {
			let yearPage = this.yearPage;
			if (yearPage <= 0) return;
			let yearList = [];
			for (let index = 0; index < 12; index++) {
				yearList.push({
					year: yearPage * 10 + index - 1,
					disable: index == 0 || index == 11
				});
			}
			this.yearRange = `${yearPage * 10 + 0 }-${yearPage * 10 + 9 }`
			this.yearList = yearList;
		},
		// 显示日历
		showCalendar(boo) {
			this.visible = boo;
			this.dateType = 1;
			let year = this.year;
			let yearPage = Math.floor(year / 10);
			this.yearPage = yearPage;
			this.refreshYearList();
		},
		getMonthByIndex(index) {
			let monthList = this.getMonthList;
			return monthList[index - 1];
		},
		// 选择类型 年/月/日
		onTypeHandler() {
			let dateType = this.dateType;
			if (dateType == 1) {
				this.dateType = 2;
				return;
			}
			if (dateType == 2) {
				this.dateType = 3;
				this.refreshYearList();
				return;
			}
		},
		// 上下按钮
		onPrevHandler() {
			if (this.dateType == 1) {
				this.prevMonth();
				return;
			}
			if (this.dateType == 2) {
				this.prevYear();
				return;
			}
			if (this.dateType == 3) {
				this.yearPage--;
				this.refreshYearList();
				return;
			}
		},
		onNextHandler() {
			console.log("this.dateType:", this.dateType);
			if (this.dateType == 1) {
				this.nextMonth();
				return;
			}
			if (this.dateType == 2) {
				this.nextYear();
				return;
			}
			if (this.dateType == 3) {
				this.yearPage++;
				this.refreshYearList();
				return;
			}
		},
		formatDateValue(year, month, date) {
			if (month < 10) {
				month = "0" + month
			}
			if (date < 10) {
				date = "0" + date
			}
			this.dateValue = `${year}-${month}-${date}`;
		},
		initData() {}
	},
	mounted() {},
	created() {
		// 设置今天日期
		let today = Date.today();
		this.year = today.getFullYear();
		this.month = today.getMonth() + 1;
		this.date = today.getDate();
		this.formatDate();
	},
	watch: {
		value(val) {
			this.dateValue = val;
		},
		dateValue(val) {
			this.$emit('input', val)
		}
	}
}