<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-date-picker v-model="year" align="right" type="year" placeholder="选择年" @change="changeYear"></el-date-picker>

			<el-date-picker v-model="date" type="month" placeholder="选择月" @change="changeDate"></el-date-picker>
			<el-button type="primary" @click="addBtn">添加</el-button>

			<el-dialog :title="popTitle" :visible.sync="dialogVisible" @close="closePop">
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="100px"
					class="demo-ruleForm"
				>
					<el-form-item label="节假日名称" prop="festival" style="width:500px">
						<el-input v-model="ruleForm.festival"></el-input>
					</el-form-item>
					<el-form-item label="节假日日期" prop="date" style="width:500px">
						<el-date-picker
							v-model="ruleForm.date"
							type="daterange"
							placeholder="选择日期范围"
							style="width:100%"
							@change="changeData"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="倍数" prop="multiple" style="width:500px">
						<el-input v-model="ruleForm.multiple"></el-input>
					</el-form-item>
					<el-form-item label="免费天数" prop="freeDays" style="width:500px">
						<el-input v-model="ruleForm.freeDays"></el-input>
					</el-form-item>
					<el-row>
						<el-button type="primary" @click="comfirm('ruleForm')">确定</el-button>
						<el-button type="primary" @click="dialogVisible = false">取消</el-button>
					</el-row>
				</el-form>
			</el-dialog>

			<el-table
				:data="list"
				border
				fit
				highlight-current-row
				style="width: 100%;margin-top:20px"
				v-loading="loading"
			>
				<el-table-column align="center" label="节日名称">
					<template scope="scope">
						<span>{{scope.row.festival}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="开始时间">
					<template scope="scope">
						<span>{{scope.row.startDate}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="结束时间">
					<template scope="scope">
						<span>{{scope.row.endDate}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="倍数">
					<template scope="scope">
						<span>{{scope.row.multiple}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="免费天数">
					<template scope="scope">
						<span>{{scope.row.freeDays}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" width="200" label="操作" fixed="right">
					<template scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="edidor(scope.row)"
						>编辑</el-button>
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="deleteData(scope.row)"
						>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
import { add_edit_set, pageList, deleteList } from 'api/vehicleType'

export default {
	created() {
		this.getList()
	},
	data() {
		return {
			popTitle: '添加节假日',
			loading: false,
			year: '',
			date: '',
			activeId: '',
			dialogVisible: false,
			ruleForm: {
				festival: null,
				multiple: null,
				freeDays: null,
				date: []
			},
			list: [],
			paramsList: {
				page: '1',
				limit: '10'
			},
			rules: {
				festival: [
					{
						required: true,
						message: '请输入节假日名称',
						trigger: 'blur'
					}
				],
				date: [
					{
						type: 'array',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}
				],
				multiple: [
					{
						required: true,
						message: '请输入倍数',
						trigger: 'blur'
					}
				],
				freeDays: [
					{
						required: true,
						message: '请输入免费天数',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		deleteData(row) {
			deleteList(row.id).then(data => {
				if (data.status == 200) {
					this.$message.success('删除成功')
					this.getList()
				} else {
					this.$message.error(data.message)
				}
			})
		},
		addBtn() {
			this.dialogVisible = true
			this.popTitle = '添加节假日'
		},
		changeData(val) {
			console.log(!val);
			if (!val) {
				this.ruleForm.date = []
			}
		},
		format(d) {
			let year = d.getFullYear()
			let month =
				(d.getMonth() + 1).toString().length == 1
					? '0' + (d.getMonth() + 1)
					: d.getMonth() + 1
			let date =
				d.getDate().toString().length == 1
					? '0' + d.getDate()
					: d.getDate()
			return year + '-' + month + '-' + date + ' 00:00:00'
		},
		closePop() {
			// this.$refs.ruleForm.resetFields()
			// this.ruleForm.date = []
			this.ruleForm = {
				festival: null,
				multiple: null,
				freeDays: null,
				date: []
			}
		},
		getList() {
			this.loading = true
			pageList(this.paramsList).then(data => {
				if (data.status == 200) {
					this.list = data.data
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		},
		changeYear(val) {
			this.paramsList.year = val
			this.getList()
		},
		changeDate(val) {
			this.paramsList.date = val + '-01'
			this.getList()
		},
		edidor(row) {
			this.popTitle = '编辑节假日'
			this.dialogVisible = true
			this.ruleForm.festival = row.festival
			this.ruleForm.multiple = row.multiple.toString()
			this.ruleForm.freeDays = row.freeDays.toString()
			this.ruleForm.date = [row.startDate, row.endDate]
			this.activeId = row.id
			console.log(this.ruleForm)
		},
		comfirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.ruleForm)
					if (this.ruleForm.date == '') {
						this.$message.error('请选择节假日')
						return false
					} else {
						if (this.popTitle == '添加节假日') {
							this.ruleForm.startDate = this.format(
								this.ruleForm.date[0]
							)
							this.ruleForm.endDate = this.format(
								this.ruleForm.date[1]
							)
							delete this.ruleForm.id
							this.successApi()
						} else {
							this.ruleForm.startDate = this.ruleForm.date[0]
							this.ruleForm.endDate = this.ruleForm.date[1]
							!this.activeId
								? ''
								: (this.ruleForm.id = this.activeId)
							this.successApi()
						}
					}
				}
			})
		},
		successApi() {
			if (this.ruleForm.date == '') {
				this.$message.error('请选择节假日')
				return false
			} else {
				delete this.ruleForm.date
				add_edit_set(this.ruleForm).then(data => {
					console.log(data)
					if (data.status == 200) {
						this.$message.success('成功')
						this.dialogVisible = false
						this.getList()
					} else {
						this.$message.error(data.message)
					}
				})
			}
		},
		pickerOptions0: {
			disabledDate(time) {
				return time.getTime() < Date.now() - 8.64e7
			}
		}
	}
}
</script>
<style>
.el-tag {
	margin: 0 0 20px 15px !important;
}
</style>