<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<div style="margin-bottom:10px">
				<el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button>
				<el-button type="primary" @click="enterTo">{{enterTitle}}</el-button>
			</div>

			<el-dialog title="通用规则设置" :visible.sync="dialogVisible">
				<p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p>
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="110px"
					class="demo-ruleForm"
				>
					<el-row>
						<el-col :span="12">
							<el-form-item label="倍数" prop="multiple">
								<el-input v-model="ruleForm.multiple" style="width:200px" placeholder="倍/天"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="免费天数" prop="freeDays">
								<el-input v-model="ruleForm.freeDays" style="width:200px" placeholder="倍/天"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</div>
				</el-form>
			</el-dialog>

			<div class="month">
				<ul>
					<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
					<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
					<li class="year-month">
						<span class="choose-year">{{ currentYear }}</span>
						<span class="choose-month">{{ currentMonth }}月</span>
					</li>
					<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
				</ul>
			</div>

			<!-- 星期 -->
			<ul class="weekdays">
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li style="color:red">六</li>
				<li style="color:red">日</li>
			</ul>

			<!-- 日期 -->
			<ul class="days" :class="{'days-border':isSetBorder}">
				<!-- v-for循环 每一次循环用<li>标签创建一天 -->
				<li
					v-for="(dayobject,index) in days"
					:key="index"
					:class="{setHeight:setHeight,setBorder:isSetBorder}"
					@click="setVal(GMTToStrs(dayobject.day),index,dayobject.day.getMonth()+1 != currentMonth)"
				>
					<!-- 选中的状态 -->
					<span ref="activeDay" v-show="dayobject.day.getMonth()+1 == currentMonth"></span>
					<!-- <span :class="{isChosse:isChosses}" ref="activeDay"></span> -->

					<!--本月-->
					<!--如果不是本月  改变类名加灰色-->
					<span
						v-if="dayobject.day.getMonth()+1 != currentMonth"
						class="other-month"
					>{{ dayobject.day.getDate() }}</span>

					<!--如果是本月  还需要判断是不是这一天-->
					<span v-else>
						<span
							v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
							class="active"
						>{{ dayobject.day.getDate() }}</span>
						<span v-else>{{ dayobject.day.getDate() }}</span>
					</span>
					<p style="color:red">{{matching(GMTToStr(dayobject.day))}}</p>
				</li>
			</ul>

			<div
				style="background:#fff;padding:20px 0;border-top:1px solid rgb(251, 138, 78)"
				v-show="isSetBorder == true"
			>
				<el-form
					:model="setForm"
					:rules="setrules"
					ref="ruleForm"
					label-width="100px"
					class="demo-ruleForm"
				>
					<el-form-item label="价格类型" prop="type">
						<el-radio-group v-model="setForm.type">
							<el-radio-button label="1">倍数</el-radio-button>
							<el-radio-button label="2">绝对值</el-radio-button>
							<el-radio-button label="3">会员价</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="应用范围" prop="isGlobal">
						<el-radio-group v-model="setForm.isGlobal" @change="changeIsGlobal">
							<el-radio-button label="1">全局设置</el-radio-button>
							<el-radio-button label="0">不同车型不同倍数</el-radio-button>
						</el-radio-group>
						<el-select
							v-if="setForm.type ==3 && setForm.isGlobal == 1"
							v-model="setForm.level"
							placeholder="请选择会员等级"
						>
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.level"></el-option>
						</el-select>
						<el-input
							v-else-if="setForm.type ==1 && setForm.isGlobal == 1"
							v-model="setForm.multiple"
							placeholder="倍数"
							style="width:100px;"
						></el-input>
						<el-input
							v-else-if="setForm.type ==2 && setForm.isGlobal == 1"
							v-model="setForm.price"
							placeholder="绝对值"
							style="width:100px;"
						></el-input>
						<el-input
							v-show="setForm.isGlobal == 1"
							v-model="setForm.freeDays"
							placeholder="请输入天数"
							style="width:100px;"
						></el-input>
					</el-form-item>
					<el-button style="margin-left:30px" type="primary" @click="setPrice">确定</el-button>
				</el-form>
			</div>

			<el-dialog title="设置倍数" :visible.sync="setMultiplePop" class="setValWidth">
				<ul class="set-val">
					<li v-for="(item,index) in dayListData" :key="index">
						<p>{{item.name}}</p>
						<span class="price-val" style>{{item.basePrice}}</span>
						<el-input v-if="setForm.type == 1" v-model="item.multiple" placeholder="倍数"></el-input>
						<el-input v-else-if="setForm.type == 2" v-model="item.price" placeholder="绝对值"></el-input>
						<el-select v-else v-model="item.level" placeholder="会员等级" class="grade-width">
							<el-option
								v-for="item in options"
								:key="item.id"
								:label="item.name"
								:value="item.level"
								style="width:200px"
							></el-option>
						</el-select>
						<el-input v-model="item.freeDays" placeholder="天数" style="width:50px"></el-input>
					</li>
				</ul>
				<div style="text-align:center">
					<el-button @click="setMultiplePop =false">确定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
import { priceList, dayList, add_edit, levels, rule } from 'api/vehicleType'

export default {
	data() {
		return {
			activeTime: '',
			nature: {},
			dayListData: [],
			setMultiplePop: false,
			isChosses: false,
			setForm: {
				type: '1',
				isGlobal: '1',
				multiple: '',
				freeDays: '',
				level: ''
			},
			chooseData: [],
			options: [],
			setrules: {},
			enterTitle: '进入编辑',
			calendarStatus: 0,
			ruleForm: {
				multiple: '',
				freeDays: ''
			},
			rules: {
				multiple: [
					{ required: true, message: '请输入倍/天', trigger: 'blur' }
				],
				freeDays: [
					{ required: true, message: '请输入/天', trigger: 'blur' }
				]
			},
			dialogVisible: false,
			isSetBorder: false,
			setHeight: true,
			isWeekend: false,
			currentDay: 1,
			currentMonth: 1,
			currentYear: 1970,
			currentWeek: 1,
			days: [],
			dataList: [],
			leftobj: [
				//存放剩余数量
				{ count: 1 },
				{ count: 2 },
				{ count: 3 },
				{ count: 4 },
				{ count: 5 }
			]
		}
	},
	created: function() {
		//在vue初始化时调用
		this.initData(null)
		this.getList()
		this.levelsFn()
	},
	methods: {
		//通用规则设置
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					rule({
						multiple: this.ruleForm.multiple,
						freeDays: this.ruleForm.freeDays
					}).then(data => {
						if (data.status == 200) {
							this.$message.success('设置成功')
							this.dialogVisible = false
						} else {
							this.$message.error(data.message)
						}
					})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		//清空设置样式
		changeIsGlobal(val) {
			let activeStatus = this.$refs.activeDay || ''
			if (val == 0) {
				for (let index = 0; index < activeStatus.length; index++) {
					activeStatus[index].className = ''
				}
			}
		},
		setPrice() {
			let params = []
			//全局设置
			if (this.setForm.isGlobal == 1) {
				if (this.chooseData == '') {
					this.$message.error('请选择要设置的日期')
					return false
				} else if (
					this.setForm.type == 1 &&
					this.setForm.multiple == ''
				) {
					this.$message.error('请输入倍数')
					return false
				} else if (this.setForm.type == 2 && !this.setForm.price) {
					this.$message.error('请输入绝对值')
					return false
				} else if (this.setForm.type == 3 && this.setForm.level == '') {
					this.$message.error('请选择会员等级')
					return false
				} else if (this.setForm.freeDays == '') {
					this.$message.error('请设置天数')
					return false
				} else {
					this.chooseData.forEach(element => {
						let defaults = {}
						defaults.date = element
						defaults.isGlobal =
							Number(this.setForm.isGlobal) == 1 ? true : false
						defaults.type = Number(this.setForm.type)
						defaults.multiple =
							Number(this.setForm.multiple) == ''
								? ''
								: Number(this.setForm.multiple)
						defaults.price =
							Number(this.setForm.price) == ''
								? ''
								: Number(this.setForm.price)
						defaults.freeDays = Number(this.setForm.freeDays)
						defaults.level = this.setForm.level
						params.push(defaults)
					})
				}
			} else {
				//特殊设置
				this.dayListData.forEach(element => {
					if (this.setForm.type == 1) {
						if (!!element.multiple || !!element.freeDays) {
							params.push({
								multiple: element.multiple,
								date: this.activeTime,
								isGlobal:
									this.setForm.isGlobal == 1 ? true : false,
								freeDays: element.freeDays,
								vehicleModelId: element.vehicleModelId,
								type: this.setForm.type
							})
						}
					} else if (this.setForm.type == 2) {
						if (!!element.price || !!element.freeDays) {
							params.push({
								price: element.price,
								date: this.activeTime,
								isGlobal:
									this.setForm.isGlobal == 1 ? true : false,
								freeDays: element.freeDays,
								vehicleModelId: element.vehicleModelId,
								type: this.setForm.type
							})
						}
					} else {
						if (!!element.level || !!element.freeDays) {
							params.push({
								level: element.level,
								date: this.activeTime,
								isGlobal:
									this.setForm.isGlobal == 1 ? true : false,
								freeDays: element.freeDays,
								vehicleModelId: element.vehicleModelId,
								type: this.setForm.type
							})
						}
					}
				})
			}
			if (params == '') {
				if (this.activeTime) {
					add_edit('', this.activeTime).then(data => {
						if (data.status == 200) {
							this.$message.success('设置成功')
							this.chooseData = []
							this.getList()
						} else {
							this.$message.error(data.message)
						}
					})
				}else{
					this.$message.error('请选择要设置的日期')
				}
			} else {
				// console.log(params);
				console.log(this.activeTime)

				add_edit(params, this.activeTime).then(data => {
					if (data.status == 200) {
						this.$message.success('设置成功')
						this.chooseData = []
						this.changeIsGlobal(0)
						this.getList()
					} else {
						this.$message.error(data.message)
					}
				})
			}
		},
		setBtn() {
			this.setPrice()
		},
		levelsFn() {
			levels().then(data => {
				this.options = data
			})
		},
		setVal(val, index, isClick) {
			//val:当前日期  index:当前索引  isClick:不置灰
			if (!isClick) {
				this.activeTime = val.length == 1 ? '0' + val : val
				if (this.calendarStatus == 1 && this.setForm.isGlobal == 0) {
					dayList(val).then(data => {
						data.data.forEach(element => {
							element.multiple = element.multiple || ''
							element.price = element.price || ''
							element.level = element.level || ''
							element.freeDays = element.freeDays || ''
						})
						this.dayListData = data.data
						this.setMultiplePop = true
					})
				} else if (
					this.calendarStatus == 1 &&
					this.setForm.isGlobal == 1
				) {
					if (this.$refs.activeDay[index].className == 'isChosse') {
						this.$refs.activeDay[index].className = ''
						var index = this.chooseData.indexOf(val)
						if (index > -1) {
							this.chooseData.splice(index, 1)
						}
					} else {
						this.$refs.activeDay[index].className = 'isChosse'
						this.chooseData.push(val)
					}
				}
			}
		},
		matching(val) {
			let diploid = ''
			this.dataList.forEach(element => {
				if (element.vehicleModelDay == val) {
					if (element.isGlobal == false) {
						diploid = '特殊设置'
					} else {
						if (element.type == 1) {
							if (element.vehicleModelDay == val)
								!!element.multiple
									? (diploid = element.multiple + '倍')
									: ''
						} else if (element.type == 2) {
							!!element.price
								? (diploid = element.price + '元')
								: ''
						} else if (element.type == 3) {
							diploid =
								element.level === 1
									? '普通会员'
									: element.level === 2
									? '黄金会员'
									: '钻石会员'
						}
					}
				}
			})
			return diploid
		},
		GMTToStr(time) {
			let date = new Date(time)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month.toString().length == 1 ? '0' + month : month
			// console.log(month);
			let datas =
				date.getDate().toString().length == 1
					? '0' + date.getDate()
					: date.getDate()
			let Str = year + '-' + month + '-' + datas + ' 00:00:00'
			return Str
		},
		GMTToStrs(time) {
			let date = new Date(time)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month.toString().length == 1 ? '0' + month : month
			let datas =
				date.getDate().toString().length == 1
					? '0' + date.getDate()
					: date.getDate()
			let Str = year + '-' + month + '-' + datas
			return Str
		},
		//列表
		getList() {
			let month =
				this.currentMonth.toString().length == 1
					? '0' + this.currentMonth
					: this.currentMonth
			priceList(this.currentYear + '-' + month + '-01').then(data => {
				if (data.status == 200) {
					this.dataList = data.data
				}
			})
		},
		//进入编辑
		enterTo() {
			if (this.enterTitle == '进入编辑') {
				this.isSetBorder = true
				this.enterTitle = '取消编辑'
				this.calendarStatus = 1
			} else {
				this.isSetBorder = false
				this.calendarStatus = 0
				this.enterTitle = '进入编辑'
			}
		},
		order: function(day) {
			//预定函数
			if (this.leftobj[day.index].count >= 1)
				this.leftobj[day.index].count--
			else alert('已经没有位置了')
		},
		initData: function(cur) {
			var leftcount = 0 //存放剩余数量
			var date
			var index = 0 //控制显示预定的天数 ，比如下面设置只能预定三天的
			//this.initleftcount(); 每次初始化更新数量
			//有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
			// 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
			//还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）

			if (cur) {
				date = new Date(cur)
			} else {
				var now = new Date()
				var d = new Date(
					this.formatDate(now.getFullYear(), now.getMonth(), 1)
				)
				d.setDate(35)
				date = new Date(
					this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
				)
			}
			this.currentDay = date.getDate()
			this.currentYear = date.getFullYear()
			this.currentMonth = date.getMonth() + 1

			this.currentWeek = date.getDay() // 1...6,0
			if (this.currentWeek == 0) {
				this.currentWeek = 7
			}
			var str = this.formatDate(
				this.currentYear,
				this.currentMonth,
				this.currentDay
			)
			this.days.length = 0
			// 今天是周日，放在第一行第7个位置，前面6个
			//初始化本周
			for (var i = this.currentWeek - 1; i >= 0; i--) {
				var d = new Date(str)
				d.setDate(d.getDate() - i)

				var dayobject = {}
				dayobject.day = d
				var now = new Date()
				if (
					d.getDate() === now.getDate() &&
					d.getMonth() === now.getMonth() &&
					d.getFullYear() === now.getFullYear()
				) {
					dayobject.index = index++ //从今天开始显示供预定的数量
				} else if (index != 0 && index < 3) dayobject.index = index++ //从今天开始3天内显示供预定的数量

				this.days.push(dayobject) //将日期放入data 中的days数组 供页面渲染使用
			}
			//其他周
			for (var i = 1; i <= 35 - this.currentWeek + 7; i++) {
				var d = new Date(str)
				d.setDate(d.getDate() + i)
				var dayobject = {}
				dayobject.day = d
				var now = new Date()
				if (
					d.getDate() === now.getDate() &&
					d.getMonth() === now.getMonth() &&
					d.getFullYear() === now.getFullYear()
				) {
					dayobject.index = index++
				} else if (index != 0 && index < 3) dayobject.index = index++
				this.days.push(dayobject)
			}
		},
		pickPre: function(year, month) {
			var activeStatus = this.$refs.activeDay || ''
			// setDate(0); 上月最后一天
			// setDate(-1); 上月倒数第二天
			// setDate(dx) 参数dx为 上月最后一天的前后dx天
			var d = new Date(this.formatDate(year, month, 1))
			d.setDate(0)
			this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			this.getList()

			if (this.calendarStatus == 1) {
				this.changeIsGlobal(0)
				for (let index = 0; index < this.days.length; index++) {
					if (
						this.GMTToStr(
							this.days[index] == this.chooseData[index]
						)
					) {
						if (this.chooseData[index]) {
							const indexs = this.days.findIndex(
								item =>
									this.GMTToStrs(item.day) ==
									this.chooseData[index]
							)
							if (activeStatus[indexs])
								activeStatus[indexs].className = 'isChosse'
						}
					}
				}
			}
		},
		pickNext: function(year, month) {
			var activeStatus = this.$refs.activeDay || ''
			var d = new Date(this.formatDate(year, month, 1))
			d.setDate(35)
			this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			this.getList()

			this.changeIsGlobal(0)
			for (let index = 0; index < this.days.length; index++) {
				if (this.GMTToStr(this.days[index] == this.chooseData[index])) {
					if (this.chooseData[index]) {
						const indexs = this.days.findIndex(
							item =>
								this.GMTToStrs(item.day) ==
								this.chooseData[index]
						)
						if (activeStatus[indexs])
							activeStatus[indexs].className = 'isChosse'
						// activeStatus[indexs].className = 'isChosse'
					}
				}
			}
		},
		// 返回 类似 2016-01-02 格式的字符串
		formatDate: function(year, month, day) {
			var y = year
			var m = month
			if (m < 10) m = '0' + m
			var d = day
			if (d < 10) d = '0' + d
			return y + '-' + m + '-' + d
		}
	}
}
</script>
   <style>
.grade-width {
	/* border: 1px solid red; */
	width: 140px;
}
.setValWidth .el-dialog--small {
	width: 1100px;
}
.price-val {
	display: inline-block;
	text-align: center;
	width: 80px;
	border: 1px solid #ccc;
	padding: 9px 0;
	position: relative;
	top: -14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.set-val {
	overflow: hidden;
	padding: 0;
}
.set-val li {
	float: left;
	margin-left: 30px;
	margin-bottom: -25px;
}
.set-val li p {
	display: inline-block;
	width: 200px;
	border: 1px solid #ccc;
	padding: 8px 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.set-val li .el-input {
	top: -27px;
}
.set-val li .el-input:nth-child(3) {
	width: 100px;
}
.setBorder {
	border-left: 1px solid rgb(251, 138, 78);
	border-top: 1px solid rgb(251, 138, 78);
}

.setHeight {
	height: 120px;
	position: relative;
}
.isChosse {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgb(251, 138, 78);
	position: absolute;
	left: -7px;
	top: -1px;
	transform: rotate(130deg);
}
/* .weekend {
	color: red !important;
} */
* {
	box-sizing: border-box;
}

ul {
	list-style-type: none;
}

body {
	font-family: Verdana, sans-serif;
	/* background: #e8f0f3; */
}

#calendar {
	width: 80%;
	margin: 0 auto;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
		0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.month {
	width: 100%;
	background: #20a0ff;
}

.month ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.year-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.year-month:hover {
	background: rgba(150, 2, 12, 0.1);
}

.choose-year {
	padding-left: 20px;
	padding-right: 20px;
}

.choose-month {
	text-align: center;
	font-size: 1.5rem;
}

.arrow {
	padding: 30px;
}

.arrow:hover {
	background: rgba(100, 2, 12, 0.1);
}

.month ul li {
	color: white;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.weekdays {
	margin: 0;
	padding: 10px 0;
	background-color: #20a0ff;
	display: flex;
	flex-wrap: wrap;
	color: #ffffff;
	justify-content: space-around;
}

.weekdays li {
	display: inline-block;
	width: 13.6%;
	text-align: center;
}

.days {
	padding: 0;
	background: #ffffff;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.days-border {
	border-right: 1px solid rgb(251, 138, 78);
}
.days li {
	list-style-type: none;
	display: inline-block;
	width: 14.2%;
	text-align: center;
	padding-bottom: 15px;
	padding-top: 15px;
	font-size: 1rem;
	color: #000;
}

.days li .active {
	padding: 6px 10px;
	border-radius: 10px;
	background: #20a0ff;
	color: #fff;
}

.days li .other-month {
	padding: 5px;
	color: gainsboro;
}

.days li:hover {
	background: #c0c4cc;
}
</style>