<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">优惠券管理</div>
						</div>
					</div>
					<div class="cell-body">
						<div class="controls">
							<el-form :inline="true" :model="formInline" class="demo-form-inline">
								<el-form-item label="名称">
									<el-input v-model="formInline.name" style="width: 200px;" prefix-icon="el-icon-search" clearable
										placeholder="请输入优惠券名称"></el-input>
								</el-form-item>
								<el-form-item label="类型">
									<el-select v-model="formInline.type" clearable placeholder="全部">
										<el-option v-for="item in formInline.typeOptions" :key="item.type" :label="item.label" :value="item.type">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="状态">
									<el-select v-model="formInline.status" clearable placeholder="全部">
										<el-option v-for="item in formInline.statusOptions" :key="item.status" :label="item.label" :value="item.status">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="发放时间">
									<el-date-picker v-model="formInline.search_datatime" type="daterange" align="right" start-placeholder="开始日期"
										end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
									</el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
								</el-form-item>
							</el-form>
							<div>
								<el-button type="primary" class="export" @click="invalidate_batch">批量失效</el-button>
								<el-button type="primary" class="export" @click="add_discount_coupons">增加</el-button>
							</div>
						</div>
						<el-table ref="multipleTable" :data="tableData" height="558" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="50">
							</el-table-column>
							<el-table-column label="名称" align="center" fixed>
								<template slot-scope="scope">
									<span>{{ scope.row.name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="类型" align="center" fixed>
								<template slot-scope="scope">
									<span v-if="scope.row.type == 1">代金券</span>
									<span v-else-if="scope.row.type == 2">折扣券</span>
								</template>
							</el-table-column>
							<el-table-column label="额度" align="center" width="100">
								<template slot-scope="scope">
									<span v-if="scope.row.type == 1">{{ scope.row.deductionPrice }}</span>
									<span v-else-if="scope.row.type == 2">{{ scope.row.maxDeduction }}</span>
								</template>
							</el-table-column>
							<el-table-column label="有效期 / 有效时间" align="center" width="308">
								<template slot-scope="scope">
									<span v-if="scope.row.effectiveType == 1">{{ scope.row.effectiveStartDate }} ～ {{ scope.row.effectiveEndDate }}</span>
									<span
										v-else-if="scope.row.effectiveType == 2">领取后{{ scope.row.effectiveDay }}天开始，{{ scope.row.effectiveLoseDay }}天内有效</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" align="center" width="90">
								<template slot-scope="scope">
									<span v-if="scope.row.status == 0">已删除</span>
									<span v-else-if="scope.row.status == 1">正常</span>
									<span v-else-if="scope.row.status == 2">失效</span>
									<span v-else-if="scope.row.status == 3">过期</span>
									<span v-else>未知</span>
								</template>
							</el-table-column>
							<el-table-column label="发放时间" align="center" width="308">
								<template slot-scope="scope">
									<span>{{ scope.row.grantStartDate }} ～ {{ scope.row.grantEndDate }}</span>
								</template>
							</el-table-column>
							<el-table-column label="发放数量" align="center" width="90">
								<template slot-scope="scope">
									<span>{{ scope.row.grantNumber }}</span>
								</template>
							</el-table-column>
							<el-table-column label="剩余" align="center" width="90">
								<template slot-scope="scope">
									<span>{{ scope.row.remainderNumber }}</span>
								</template>
							</el-table-column>
							<el-table-column label="已核销" align="center" width="90">
								<template slot-scope="scope">
									<span>{{ scope.row.reversedNumber }}</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="100">
								<template slot-scope="scope">
									<!-- <el-button @click="handleModifyClick(scope.row)" type="text" size="small">修改</el-button> -->
									<el-button @click="handleDetailClick(scope.row)" type="text" size="small">查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 代金劵详情 -->
		<el-dialog title="优惠券详情" custom-class="shou-info-voucher-class" :visible.sync="dialogVoucherVisible" :close-on-click-modal="true"
			:close-on-press-escape="true" @close="dialogVoucherVisible = false">
			<div style="height: 444px; padding: 0; margin: 0; overflow:auto;">
				<p><label class="lbl-cls">代金券名称:</label>{{ coupon.name }}</p>
				<p><label class="lbl-cls">减免金额:</label> {{ coupon.deductionPrice }}</p>
				<p><label class="lbl-cls">发放数量:</label> {{ coupon.grantNumber }}张</p>
				<p><label class="lbl-cls">每人限领:</label> {{ coupon.limitNumber }}张</p>
				<p><label class="lbl-cls">发放时间:</label> {{ coupon.grantStartDate }} ～ {{ coupon.grantEndDate}}</p>
				<div>
					<h3 style="padding-top: 20px;">限制条件</h3>
					<p><label class="lbl-cls">使用条件:</label> 订单满{{ coupon.meetPrice }}元可使用</p>
					<p v-if="coupon.effectiveType == 1"><label class="lbl-cls">有效期:</label> {{ coupon.effectiveStartDate }} ～ {{ coupon.effectiveEndDate}}</p>
					<p v-else-if="coupon.effectiveType == 2"><label class="lbl-cls">有效期:</label>
						领取后{{ coupon.effectiveDay }}天开始，{{ coupon.effectiveLoseDay }}天内有效
					</p>
					<p v-if="coupon.hotelIds == -1"><label class="lbl-cls">选用民宿:</label><el-tag effect="plain" style="margin: 2px 3px;">全部民宿</el-tag></p>
					<p v-else-if="coupon.hotelNames != ''"><label class="lbl-cls">选用民宿:</label>
						<el-tag v-for="item in coupon.hotelNames" :key="item" type="" effect="plain" style="margin: 2px 3px;">
							{{ item }}
						</el-tag>
					</p>
					<p v-else><label class="lbl-cls">选用民宿:</label></p>
				</div>
			</div>
		</el-dialog>
		<!-- 折扣劵详情 -->
		<el-dialog title="优惠券详情" custom-class="shou-info-coupon-class" :visible.sync="dialogCouponVisible" :close-on-click-modal="true" :close-on-press-escape="true"
			@close="dialogCouponVisible = false">
			<div style="height: 500px; padding: 0; margin: 0; overflow:auto;">
				<p><label class="lbl-cls">折扣券名称:</label>{{ coupon.name }}</p>
				<p><label class="lbl-cls">折扣:</label> {{ coupon.rebatePrice }}折</p>
				<p><label class="lbl-cls">最大折扣金额:</label> {{ coupon.maxDeduction }}元</p>
				<p><label class="lbl-cls">发放数量:</label> {{ coupon.grantNumber }}张</p>
				<p><label class="lbl-cls">每人限领:</label> {{ coupon.limitNumber }}张</p>
				<p><label class="lbl-cls">发放时间:</label> {{ coupon.grantStartDate }} ～ {{ coupon.grantEndDate}}</p>
				<div>
					<h3 style="padding-top: 20px;">限制条件</h3>
					<p><label class="lbl-cls">使用条件:</label> 订单满{{ coupon.meetPrice }}元可使用</p>
					<p v-if="coupon.effectiveType == 1"><label class="lbl-cls">有效期:</label> {{ coupon.effectiveStartDate }} ～ {{ coupon.effectiveEndDate}}</p>
					<p v-else-if="coupon.effectiveType == 2"><label class="lbl-cls">有效期:</label>
						领取后{{ coupon.effectiveDay }}天开始，{{ coupon.effectiveLoseDay }}天内有效
					</p>
					<p v-if="coupon.hotelIds == -1"><label class="lbl-cls">选用民宿:</label><el-tag effect="plain" style="margin: 2px 3px;">全部民宿</el-tag></p>
					<p v-else-if="coupon.hotelNames != ''"><label class="lbl-cls">选用民宿:</label>
						<el-tag v-for="item in coupon.hotelNames" :key="item" type="" effect="plain" style="margin: 2px 3px;">
							{{ item }}
						</el-tag>
					</p>
					<p v-else><label class="lbl-cls">选用民宿:</label></p>
				</div>
			</div>
		</el-dialog>
		<!-- 新增优惠券界面 -->
		<el-dialog title="新增优惠券" custom-class="add-class" :visible.sync="dialogAddVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogAddVisible = false">
			<div style="display: flex; justify-content: space-around; height: 350px;">
				<div style="display: flex; flex-direction: column; align-items: center; height: 350px;">
					<img src="@/icons/images/quan/voucher.png" alt="" width="300">
					<p style="width: 310px; height: 40px; font-size: 16px; margin: 30px 0;">代金券可为用户提供抵扣现金服务，可设置抵扣金额，抵扣条件，及适用民宿范围。</p>
					<el-button class="export" @click="add_voucher">去新增</el-button>
				</div>
				<div style="display: flex; flex-direction: column; align-items: center; height: 350px;">
					<img src="@/icons/images/quan/coupon.png" alt="" width="300">
					<p style="width: 310px; height: 40px; font-size: 16px; margin: 30px 0;">折扣券可为用户提供消费折扣，可设置折扣，折扣条件，及适用民宿范围。</p>
					<el-button class="export" @click="add_coupon">去新增</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 新增代金券对话框 -->
		<el-dialog title="新增代金券" custom-class="add-voucher-class" :visible.sync="dialogAddVoucherFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogAddVoucherFormVisible = false">
			<el-form :model="formAddVoucher" ref="addHostelForm" :rules="addVoucherFormRules">
				<div style="height: 700px; padding: 0; margin: 0; overflow:auto;">
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">代金券<span
									style="color: red; font-size: 14px;">（同一代金券，每笔订单最多仅可使用一张）</span></div>
							<el-form-item label="优惠券名称：" :label-width="formLabelWidth">
								<el-input v-model="formAddVoucher.name" autocomplete="off" placeholder="请输入优惠券名称" maxlength="20">
								</el-input>
							</el-form-item>
							<el-form-item label="减免金额：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddVoucher.deductionPrice" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元</div>
								</div>
							</el-form-item>
							<el-form-item label="发放数量：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddVoucher.grantNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
								</div>
							</el-form-item>
							<el-form-item label="每人限领：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddVoucher.limitNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
									<div style="color: #ccc;">（每个用户可领卷上限）</div>
								</div>
							</el-form-item>
							<el-form-item label="发放时间：" :label-width="formLabelWidth">
								<el-date-picker v-model="formAddVoucher.grantTimes" style="width: 390px;" type="datetimerange" range-separator="～"
									start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">限制条件</div>
							<el-form-item label="使用条件：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<div style="margin-right: 10px;">订单满</div>
									<el-input v-model="formAddVoucher.meetPrice" autocomplete="off" placeholder="请输入金额" maxlength="6">
									</el-input>
									<div style="margin-left: 10px;">元，可使用</div>
								</div>
							</el-form-item>
							<el-form-item label="有效期：" :label-width="formLabelWidth">
								<div style="display: flex; align-items: center; margin-bottom: 15px;">
									<el-radio v-model="formAddVoucher.radio" label="1">时间段</el-radio>
									<el-date-picker v-model="formAddVoucher.effectiveDateTime" :disabled="formAddVoucher.radio != 1" style="width: 390px;"
										type="datetimerange" range-separator="～" start-placeholder="有效开始日期" end-placeholder="有效结束日期"
										value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</div>
								<div style="display: flex; align-items: center;">
									<el-radio v-model="formAddVoucher.radio" label="2">领取后</el-radio>
									<el-input v-model="formAddVoucher.effectiveDay" :disabled="formAddVoucher.radio != 2" autocomplete="off" placeholder="请输入天数"
										class="custom-input" maxlength="3">
									</el-input>
									<div style="margin: 0 10px;">天开始</div>
									<el-input v-model="formAddVoucher.effectiveLoseDay" :disabled="formAddVoucher.radio != 2" autocomplete="off"
										placeholder="请输入天数" class="custom-input" maxlength="3">
									</el-input>
									<div style="margin-left: 10px;">天内有效</div>
								</div>
							</el-form-item>
							<el-form-item label="适用民宿：" :label-width="formLabelWidth">
								<el-checkbox :indeterminate="isAddVoucherIndeterminate" v-model="voucherCheckAll"
									@change="handleVoucherCheckAllChange">全选</el-checkbox>
								<div style="margin: 0;"></div>
								<el-checkbox-group v-model="voucherCheckedTowns" @change="handleVoucherCheckedTownsChange">
									<el-checkbox v-for="town in towns" :label="town" :key="town">{{town}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddVoucherFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_voucher_dialog_handler">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 新增折扣券对话框 -->
		<el-dialog title="新增折扣券" custom-class="add-voucher-class" :visible.sync="dialogAddCouponFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogAddCouponFormVisible = false">
			<el-form :model="formAddCoupon" ref="addHostelForm" :rules="addCouponFormRules">
				<div style="height: 700px; padding: 0; margin: 0; overflow:auto;">
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">折扣券<span
									style="color: red; font-size: 14px;">（同一优惠券，每笔订单最多仅可使用一张）</span></div>
							<el-form-item label="优惠券名称：" :label-width="formLabelWidth">
								<el-input v-model="formAddCoupon.name" autocomplete="off" placeholder="请输入优惠券名称" maxlength="20">
								</el-input>
							</el-form-item>
							<el-form-item label="折扣：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddCoupon.rebatePrice" autocomplete="off" placeholder="请输入折扣" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">折</div>
									<div style="color: #ccc;">（填写1.0-9.9，仅可带有一位小数）</div>
								</div>
							</el-form-item>
							<el-form-item label="最大抵扣金额：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddCoupon.maxDeduction" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元</div>
								</div>
							</el-form-item>
							<el-form-item label="发放数量：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddCoupon.grantNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
								</div>
							</el-form-item>
							<el-form-item label="每人限领：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formAddCoupon.limitNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
									<div style="color: #ccc;">（每个用户可领卷上限）</div>
								</div>
							</el-form-item>
							<el-form-item label="发放时间：" :label-width="formLabelWidth">
								<el-date-picker v-model="formAddCoupon.grantTimes" style="width: 390px;" type="datetimerange" range-separator="～"
									start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">限制条件</div>
							<el-form-item label="使用条件：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<div style="margin-right: 10px;">订单满</div>
									<el-input v-model="formAddCoupon.meetPrice" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元，可使用</div>
								</div>
							</el-form-item>
							<el-form-item label="有效期：" :label-width="formLabelWidth">
								<div style="display: flex; align-items: center; margin-bottom: 15px;">
									<el-radio v-model="formAddCoupon.radio" label="1">时间段</el-radio>
									<el-date-picker v-model="formAddCoupon.effectiveDateTime" :disabled="formAddCoupon.radio != 1" style="width: 390px;"
										type="datetimerange" range-separator="～" start-placeholder="有效开始日期" end-placeholder="有效结束日期"
										value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</div>
								<div style="display: flex; align-items: center;">
									<el-radio v-model="formAddCoupon.radio" label="2">领取后</el-radio>
									<el-input v-model="formAddCoupon.effectiveDay" :disabled="formAddCoupon.radio != 2" autocomplete="off" placeholder="请输入金额"
										class="custom-input" maxlength="8">
									</el-input>
									<div style="margin: 0 10px;">天开始</div>
									<el-input v-model="formAddCoupon.effectiveLoseDay" :disabled="formAddCoupon.radio != 2" autocomplete="off"
										placeholder="请输入金额" class="custom-input" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">天内有效</div>
								</div>
							</el-form-item>
							<el-form-item label="适用民宿：" :label-width="formLabelWidth" style="margin-bottom: 0;">
								<el-checkbox :indeterminate="isAddCouponIndeterminate" v-model="couponCheckAll"
									@change="handleCouponCheckAllChange">全选</el-checkbox>
								<div style="margin: 0;"></div>
								<el-checkbox-group v-model="couponCheckedTowns" @change="handleCouponCheckedTownsChange">
									<el-checkbox v-for="town in towns" :label="town" :key="town">{{town}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddCouponFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_coupon_dialog_handler">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改代金券对话框 -->
		<!-- <el-dialog title="修改优惠券" custom-class="add-voucher-class" :visible.sync="dialogModifyVoucherFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogModifyVoucherFormVisible = false">
			<el-form :model="formModifyVoucher" ref="addHostelForm">
				<div style="height: 700px; padding: 0; margin: 0; overflow:auto;">
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">代金券<span
									style="color: red; font-size: 14px;">（同一代金券，每笔订单最多仅可使用一张）</span></div>
							<el-form-item label="优惠券名称：" :label-width="formLabelWidth">
								<el-input v-model="formModifyVoucher.name" autocomplete="off" placeholder="请输入优惠券名称" maxlength="20">
								</el-input>
							</el-form-item>
							<el-form-item label="减免金额：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyVoucher.deductionPrice" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元</div>
								</div>
							</el-form-item>
							<el-form-item label="发放数量：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyVoucher.grantNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
								</div>
							</el-form-item>
							<el-form-item label="每人限领：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyVoucher.limitNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
									<div style="color: #ccc;">（每个用户可领卷上限）</div>
								</div>
							</el-form-item>
							<el-form-item label="发放时间：" :label-width="formLabelWidth">
								<el-date-picker v-model="formModifyVoucher.grantTimes" style="width: 390px;" type="datetimerange" range-separator="～"
									start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">限制条件</div>
							<el-form-item label="使用条件：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<div style="margin-right: 10px;">订单满</div>
									<el-input v-model="formModifyVoucher.meetPrice" autocomplete="off" placeholder="请输入金额" maxlength="6">
									</el-input>
									<div style="margin-left: 10px;">元，可使用</div>
								</div>
							</el-form-item>
							<el-form-item label="有效期：" :label-width="formLabelWidth">
								<div style="display: flex; align-items: center; margin-bottom: 15px;">
									<el-radio v-model="formModifyVoucher.radio" label="1">时间段</el-radio>
									<el-date-picker v-model="formModifyVoucher.effectiveDateTime" :disabled="formModifyVoucher.radio != 1" style="width: 390px;"
										type="datetimerange" range-separator="～" start-placeholder="有效开始日期" end-placeholder="有效结束日期"
										value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</div>
								<div style="display: flex; align-items: center;">
									<el-radio v-model="formModifyVoucher.radio" label="2">领取后</el-radio>
									<el-input v-model="formModifyVoucher.effectiveDay" :disabled="formModifyVoucher.radio != 2" autocomplete="off"
										placeholder="请输入天数" class="custom-input" maxlength="3">
									</el-input>
									<div style="margin: 0 10px;">天开始</div>
									<el-input v-model="formModifyVoucher.effectiveLoseDay" :disabled="formModifyVoucher.radio != 2" autocomplete="off"
										placeholder="请输入天数" class="custom-input" maxlength="3">
									</el-input>
									<div style="margin-left: 10px;">天内有效</div>
								</div>
							</el-form-item>
							<el-form-item label="适用民宿：" :label-width="formLabelWidth">
								<el-checkbox :indeterminate="isModifyVoucherIndeterminate" v-model="voucherModifyCheckAll"
									@change="handleModifyVoucherCheckAllChange">全选</el-checkbox>
								<div style="margin: 0;"></div>
								<el-checkbox-group v-model="voucherModifyCheckedTowns" @change="handleModifyVoucherCheckedTownsChange">
									<el-checkbox v-for="town in towns" :label="town" :key="town">{{town}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyVoucherFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_voucher_dialog_handler">确 认</el-button>
			</div>
		</el-dialog> -->
		<!-- 修改折扣券对话框 -->
		<!-- <el-dialog title="修改优惠券" custom-class="add-voucher-class" :visible.sync="dialogModifyCouponFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogModifyCouponFormVisible = false">
			<el-form :model="formModifyCoupon" ref="addHostelForm" :rules="addCouponFormRules">
				<div style="height: 700px; padding: 0; margin: 0; overflow:auto;">
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">折扣券<span
									style="color: red; font-size: 14px;">（同一优惠券，每笔订单最多仅可使用一张）</span></div>
							<el-form-item label="优惠券名称：" :label-width="formLabelWidth">
								<el-input v-model="formModifyCoupon.name" autocomplete="off" placeholder="请输入优惠券名称" maxlength="20">
								</el-input>
							</el-form-item>
							<el-form-item label="折扣：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyCoupon.rebatePrice" autocomplete="off" placeholder="请输入折扣" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">折</div>
									<div style="color: #ccc;">（填写1.0-9.9，仅可带有一位小数）</div>
								</div>
							</el-form-item>
							<el-form-item label="最大抵扣金额：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyCoupon.maxDeduction" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元</div>
								</div>
							</el-form-item>
							<el-form-item label="发放数量：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyCoupon.grantNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
								</div>
							</el-form-item>
							<el-form-item label="每人限领：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<el-input v-model="formModifyCoupon.limitNumber" autocomplete="off" placeholder="请输入数量" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">张</div>
									<div style="color: #ccc;">（每个用户可领卷上限）</div>
								</div>
							</el-form-item>
							<el-form-item label="发放时间：" :label-width="formLabelWidth">
								<el-date-picker v-model="formModifyCoupon.grantTimes" style="width: 390px;" type="datetimerange" range-separator="～"
									start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div style="font-size: 18px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">限制条件</div>
							<el-form-item label="使用条件：" :label-width="formLabelWidth">
								<div style="display: flex; justify-content: flex-start; align-items: center;">
									<div style="margin-right: 10px;">订单满</div>
									<el-input v-model="formModifyCoupon.meetPrice" autocomplete="off" placeholder="请输入金额" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">元，可使用</div>
								</div>
							</el-form-item>
							<el-form-item label="有效期：" :label-width="formLabelWidth">
								<div style="display: flex; align-items: center; margin-bottom: 15px;">
									<el-radio v-model="formModifyCoupon.radio" label="1">时间段</el-radio>
									<el-date-picker v-model="formModifyCoupon.effectiveDateTime" :disabled="formModifyCoupon.radio != 1" style="width: 390px;"
										type="datetimerange" range-separator="～" start-placeholder="有效开始日期" end-placeholder="有效结束日期"
										value-format="yyyy-MM-dd HH:mm:ss">
									</el-date-picker>
								</div>
								<div style="display: flex; align-items: center;">
									<el-radio v-model="formModifyCoupon.radio" label="2">领取后</el-radio>
									<el-input v-model="formModifyCoupon.effectiveDay" :disabled="formModifyCoupon.radio != 2" autocomplete="off"
										placeholder="请输入金额" class="custom-input" maxlength="8">
									</el-input>
									<div style="margin: 0 10px;">天开始</div>
									<el-input v-model="formModifyCoupon.effectiveLoseDay" :disabled="formModifyCoupon.radio != 2" autocomplete="off"
										placeholder="请输入金额" class="custom-input" maxlength="8">
									</el-input>
									<div style="margin-left: 10px;">天内有效</div>
								</div>
							</el-form-item>
							<el-form-item label="适用民宿：" :label-width="formLabelWidth" style="margin-bottom: 0;">
								<el-checkbox :indeterminate="isModifyCouponIndeterminate" v-model="couponModifyCheckAll"
									@change="handleModifyCouponCheckAllChange">全选</el-checkbox>
								<div style="margin: 0;"></div>
								<el-checkbox-group v-model="couponModifyCheckedTowns" @change="handleModifyCouponCheckedTownsChange">
									<el-checkbox v-for="town in towns" :label="town" :key="town">{{town}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyCouponFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_coupon_dialog_handler">确 认</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
	import {
		getTableData,
		coupomsaveBatchLapse,
		coupominsterVoucher,
		// coupominsterModifyVoucher,
		// coupominsterModifyCoupon,
		coupominsterCoupon,
		hotelqueryAllHotel
	} from '@/api/discountCouponMgr'

	import {
		isEmpty
	} from '@/js/common'

	var townOptions = [] // 民宿列表
	var townOptions_obj = [] // 民宿列表
	export default {
		data() {
			return {
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				currentUserId: this.$store.state.user.user_id, // 当前用户的权限
				formLabelWidth: '140px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '14px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 查询数据
				formInline: {
					typeOptions: [{
						type: 1,
						label: '代金券'
					}, {
						type: 2,
						label: '折扣券'
					}],
					type: '',
					statusOptions: [{ // 1正常 2失效 3过期
						status: 1,
						label: '正常'
					}, {
						status: 2,
						label: '失效'
					}, {
						status: 3,
						label: '过期'
					}],
					status: '',
					search_datatime: '',
					name: ''
				},
				tableData: [],
				cond_data: {},
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				},
				loading: true,
				coupon: {},
				dialogVoucherVisible: false, // 代金券详情界面
				dialogCouponVisible: false, // 折扣券详情界面
				dialogAddVisible: false, // 新增优惠券界面
				dialogAddVoucherFormVisible: false, // 新增代金券对话框
				dialogModifyVoucherFormVisible: false, // 修改代金券对话框
				formAddVoucher: {}, // 增加代金券数据模型
				formModifyVoucher: {}, // 修改代金券数据模型
				addVoucherFormRules: {

				},
				dialogAddCouponFormVisible: false, // 新增折扣券对话框
				dialogModifyCouponFormVisible: false, // 修改折扣券对话框
				formAddCoupon: {}, // 增加折扣券数据模型
				formModifyCoupon: {}, // 修改折扣券数据模型
				addCouponFormRules: {

				},
				voucherCheckAll: false,
				couponCheckAll: false,
				voucherModifyCheckAll: false,
				couponModifyCheckAll: false,
				towns: townOptions,
				isAddCouponIndeterminate: true,
				isAddVoucherIndeterminate: true,
				isModifyVoucherIndeterminate: true,
				isModifyCouponIndeterminate: true,
				multipleSelection: [], // 数据表的多选
				couponCheckedTowns: [], // 折扣券适用民宿
				voucherCheckedTowns: [], // 代金券适用民宿
				voucherModifyCheckedTowns: [], // 修改代金券适用民宿
				couponModifyCheckedTowns: [], // 修改折扣券适用民宿
				voucherMinSuIds: [], // 增加代金券适用民宿的ids
				couponMinSuIds: [], // 增加折扣券适用民宿的ids
				voucherModifyMinSuIds: [], // 修改代金券适用民宿的ids
				couponModifyMinSuIds: [], // 修改折扣券适用民宿的ids
				voucherMinSuIds_bool: false, // 增加代金券适用民宿：全选则为true，否则false
				couponMinSuIds_bool: false // 增加折扣券适用民宿：全选则为true，否则false
			}
		},
		created() {
			// 检测权限
			if (this.currentUserLevel !== 2) {
				this.$router.replace({
					path: '/data'
				})
				return
			}
			// 获取消费记录,表格数据
			this.get_table_data('list')
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 分页表格勾选
			 * @param {Object} val
			 */
			handleSelectionChange(val) {
				var that = this
				this.multipleSelection = []
				val.forEach((e) => {
					that.multipleSelection.push(e.id)
				});
			},
			/**
			 * 代金券适用民宿全选
			 * @param {Object} val
			 */
			handleVoucherCheckAllChange(val) {
				this.voucherCheckedTowns = val ? townOptions : [];
				this.isAddVoucherIndeterminate = false;

				// 获取代金券ids
				this.get_daijinquan_ids()
			},
			/**
			 * 修改代金券适用民宿全选
			 * @param {Object} val
			 */
			handleModifyVoucherCheckAllChange(val) {
				this.voucherModifyCheckedTowns = val ? townOptions : [];
				this.isModifyVoucherIndeterminate = false;

				// 获取代金券ids
				this.get_modify_daijinquan_ids()
			},
			/**
			 * 修改折扣券适用民宿全选
			 * @param {Object} val
			 */
			handleModifyCouponCheckAllChange(val) {
				this.couponModifyCheckedTowns = val ? townOptions : [];
				this.isModifyCouponIndeterminate = false;

				// 获取代金券ids
				this.get_modify_zhekouquan_ids()
			},
			/**
			 * 获取增加代金券，适用民宿ids
			 */
			get_daijinquan_ids() {
				if (this.voucherCheckedTowns.length == townOptions_obj.length) {
					this.voucherMinSuIds_bool = true
				} else {
					var that = this;
					this.voucherMinSuIds.length = 0;

					this.voucherCheckedTowns.forEach((item) => {
						townOptions_obj.forEach((obj) => {
							if (obj.hname === item) {
								that.voucherMinSuIds.push(obj.hid);
							}
						});
					});
					// console.log(this.voucherMinSuIds);
					this.voucherMinSuIds_bool = false
				}
			},
			/**
			 * 获取修改代金券，适用民宿ids
			 */
			// get_modify_daijinquan_ids() {
			// 	var that = this;
			// 	this.voucherModifyMinSuIds.length = 0;

			// 	this.voucherModifyCheckedTowns.forEach((item) => {
			// 		townOptions_obj.forEach((obj) => {
			// 			if (obj.hname === item) {
			// 				that.voucherModifyMinSuIds.push(obj.hid);
			// 			}
			// 		});
			// 	});
			// 	console.log(this.voucherModifyMinSuIds);
			// },
			/**
			 * 获取修改折扣券，适用民宿ids
			 */
			// get_modify_zhekouquan_ids() {
			// 	var that = this;
			// 	this.couponModifyMinSuIds.length = 0;

			// 	this.couponModifyCheckedTowns.forEach((item) => {
			// 		townOptions_obj.forEach((obj) => {
			// 			if (obj.hname === item) {
			// 				that.couponModifyMinSuIds.push(obj.hid);
			// 			}
			// 		});
			// 	});
			// 	console.log(this.couponModifyMinSuIds);
			// },
			/**
			 * 折扣券适用民宿全选
			 * @param {Object} val
			 */
			handleCouponCheckAllChange(val) {
				this.couponCheckedTowns = val ? townOptions : [];
				this.isAddCouponIndeterminate = false;

				// 获取折扣券ids
				this.get_zhekouquan_ids()
			},
			/**
			 * 获取折扣券ids
			 */
			get_zhekouquan_ids() {
				if (this.couponCheckedTowns.length == townOptions_obj.length) {
					this.couponMinSuIds_bool = true;
				} else {
					var that = this;
					this.couponMinSuIds.length = 0;

					this.couponCheckedTowns.forEach((item) => {
						townOptions_obj.forEach((obj) => {
							if (obj.hname === item) {
								that.couponMinSuIds.push(obj.hid);
							}
						});
					});
					// console.log(this.couponMinSuIds);
					this.couponMinSuIds_bool = false;
				}
			},
			/**
			 * 代金券适用民宿，勾选某一项
			 * @param {Object} value
			 */
			handleVoucherCheckedTownsChange(value) {
				var that = this;
				let checkedCount = value.length;
				this.voucherCheckAll = checkedCount === this.towns.length;
				this.isAddVoucherIndeterminate = checkedCount > 0 && checkedCount < this.towns.length;

				// 获取代金券ids
				this.get_daijinquan_ids()
			},
			/**
			 * 修改代金券适用民宿，勾选某一项
			 * @param {Object} value
			 */
			handleModifyVoucherCheckedTownsChange(value) {
				var that = this;
				let checkedCount = value.length;
				this.voucherModifyCheckAll = checkedCount === this.towns.length;
				this.isModifyVoucherIndeterminate = checkedCount > 0 && checkedCount < this.towns.length;

				// 获取代金券ids
				this.get_modify_daijinquan_ids()
			},
			/**
			 * 修改折扣券适用民宿，勾选某一项
			 * @param {Object} value
			 */
			handleModifyCouponCheckedTownsChange(value) {
				var that = this;
				let checkedCount = value.length;
				this.couponModifyCheckAll = checkedCount === this.towns.length;
				this.isModifyCouponIndeterminate = checkedCount > 0 && checkedCount < this.towns.length;

				// 获取代金券ids
				this.get_modify_zhekouquan_ids()
			},
			/**
			 * 折扣券适用民宿，勾选某一项
			 * @param {Object} value
			 */
			handleCouponCheckedTownsChange(value) {
				let checkedCount = value.length;
				this.couponCheckAll = checkedCount === this.towns.length;
				this.isAddCouponIndeterminate = checkedCount > 0 && checkedCount < this.towns.length;

				// 获取折扣券ids
				this.get_zhekouquan_ids()
			},
			/**
			 * 打开增加代金券
			 */
			add_voucher() {
				// this.dialogAddVisible = false
				this.dialogAddVoucherFormVisible = true
				// 获取适用民宿列表
				this.getMinSuList()
			},
			/**
			 * 获取适用民宿列表
			 */
			getMinSuList() {
				var that = this;
				townOptions.length = 0;
				townOptions_obj.length = 0;
				// townOptions.splice(0, townOptions.length);
				// 获取民宿列表
				hotelqueryAllHotel().then((res) => {
					// console.log(res);
					if (res.code === 200) {
						// console.log(res.data);
						if (typeof res.data === 'undefined') {
							that.$message.warning('获取适用民宿列表异常！')
						} else {
							res.data.forEach((item) => {
								townOptions.push(item.hname);
								townOptions_obj.push({
									hname: item.hname,
									hid: item.id
								});
							})
						}
					} else {
						if (typeof res.message === 'undefined') {
							that.$message.warning('获取适用民宿列表异常！')
						} else {
							that.$message.warning(res.message)
						}
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			/**
			 * 修改折扣券
			 */
			// modify_coupon_dialog_handler() {
			// 	var that = this;
			// 	var d = this.formModifyCoupon;
			// 	if (isEmpty(d.name)) {
			// 		this.$message.error('请输入【优惠券名称】')
			// 		return
			// 	}
			// 	if (isEmpty(d.rebatePrice)) {
			// 		this.$message.error('请输入【折扣】')
			// 		return
			// 	}
			// 	if (isEmpty(d.maxDeduction)) {
			// 		this.$message.error('请输入【最大抵扣金额】')
			// 		return
			// 	}
			// 	if (isEmpty(d.grantNumber)) {
			// 		this.$message.error('请输入【发放数量】')
			// 		return
			// 	}
			// 	if (isEmpty(d.limitNumber)) {
			// 		this.$message.error('请输入【每人限领】')
			// 		return
			// 	}
			// 	if (isEmpty(d.grantTimes)) {
			// 		this.$message.error('请选择【发放时间】')
			// 		return
			// 	}
			// 	if (isEmpty(d.meetPrice)) {
			// 		this.$message.error('请输入【订单满多少可使用】')
			// 		return
			// 	}

			// 	if (d.radio == 1) {
			// 		if (isEmpty(d.effectiveDateTime)) {
			// 			this.$message.error('请选择【有效期时间段】')
			// 			return
			// 		}
			// 	} else if (d.radio == 2) {
			// 		if (isEmpty(d.effectiveDay)) {
			// 			this.$message.error('请选择【多少天开始】')
			// 			return
			// 		}
			// 		if (isEmpty(d.effectiveLoseDay)) {
			// 			this.$message.error('请输入【多少天有效】')
			// 			return
			// 		}
			// 	}

			// 	if (isEmpty(this.couponModifyMinSuIds)) {
			// 		this.$message.error('请选择【适用民宿】')
			// 		return
			// 	}

			// 	this.formModifyCoupon.hotelIds = this.couponModifyMinSuIds // 适用民宿ids
			// 	this.formModifyCoupon.createId = this.currentUserId // 创建人
			// 	this.formModifyCoupon.effectiveType = d.radio // 有效期类型（1.时间段 2.生效失效天数）
			// 	this.formModifyCoupon.type = 2 //  // 类型（1.代金券 2.折扣券）
			// 	this.formModifyCoupon.status = 1 // 状态(0删除 1正常)

			// 	coupominsterModifyCoupon(this.formModifyCoupon).then((res) => {
			// 		// console.log(res);
			// 		if (res.code === 200) {
			// 			that.$message.success(res.message)

			// 			this.get_table_data('list')

			// 			that.dialogModifyCouponFormVisible = false

			// 			that.formModifyCoupon = {}
			// 			that.couponModifyMinSuIds = []
			// 			that.couponModifyCheckedTowns = []
			// 		} else {
			// 			that.$message.warning(res.message)
			// 		}
			// 	}).catch((err) => {
			// 		// console.log(err);
			// 		that.$message.error(err.message)
			// 	});
			// },
			/**
			 * 修改代金券
			 */
			// modify_voucher_dialog_handler() {
			// 	var that = this;
			// 	var d = this.formModifyVoucher;
			// 	if (isEmpty(d.name)) {
			// 		this.$message.error('请输入【优惠券名称】')
			// 		return
			// 	}
			// 	if (isEmpty(d.deductionPrice)) {
			// 		this.$message.error('请输入【减免金额】')
			// 		return
			// 	}
			// 	if (isEmpty(d.grantNumber)) {
			// 		this.$message.error('请输入【发放数量】')
			// 		return
			// 	}
			// 	if (isEmpty(d.limitNumber)) {
			// 		this.$message.error('请输入【每人限领】')
			// 		return
			// 	}
			// 	if (isEmpty(d.grantTimes)) {
			// 		this.$message.error('请选择【发放时间】')
			// 		return
			// 	}
			// 	if (isEmpty(d.meetPrice)) {
			// 		this.$message.error('请输入【订单满多少可使用】')
			// 		return
			// 	}

			// 	if (d.radio == 1) {
			// 		if (isEmpty(d.effectiveDateTime)) {
			// 			this.$message.error('请选择【有效期时间段】')
			// 			return
			// 		}
			// 	} else if (d.radio == 2) {
			// 		if (isEmpty(d.effectiveDay)) {
			// 			this.$message.error('请选择【多少天开始】')
			// 			return
			// 		}
			// 		if (isEmpty(d.effectiveLoseDay)) {
			// 			this.$message.error('请输入【多少天有效】')
			// 			return
			// 		}
			// 	}

			// 	if (isEmpty(this.voucherModifyMinSuIds)) {
			// 		this.$message.error('请选择【适用民宿】')
			// 		return
			// 	}

			// 	this.formModifyVoucher.hotelIds = this.voucherModifyMinSuIds // 适用民宿ids
			// 	this.formModifyVoucher.createId = this.currentUserId // 创建人
			// 	this.formModifyVoucher.effectiveType = d.radio // 有效期类型（1.时间段 2.生效失效天数）
			// 	this.formModifyVoucher.type = 1 // 类型（1.代金券 2.折扣券）
			// 	this.formModifyVoucher.status = 1 // 状态(0删除 1正常)

			// 	coupominsterModifyVoucher(this.formModifyVoucher).then((res) => {
			// 		// console.log(res);
			// 		if (res.code === 200) {
			// 			that.$message.success(res.message)

			// 			this.get_table_data('list')

			// 			that.dialogModifyVoucherFormVisible = false

			// 			that.formModifyVoucher = {}
			// 			that.voucherModifyMinSuIds = []
			// 			that.voucherModifyCheckedTowns = []
			// 		} else {
			// 			that.$message.warning(res.message)
			// 		}
			// 	}).catch((err) => {
			// 		// console.log(err);
			// 		that.$message.error(err.message)
			// 	});
			// },
			/**
			 * 添加代金券
			 */
			add_voucher_dialog_handler() {
				var that = this;
				var d = this.formAddVoucher;
				if (isEmpty(d.name)) {
					this.$message.error('请输入【优惠券名称】')
					return
				}
				if (isEmpty(d.deductionPrice)) {
					this.$message.error('请输入【减免金额】')
					return
				}
				if (isEmpty(d.grantNumber)) {
					this.$message.error('请输入【发放数量】')
					return
				}
				if (isEmpty(d.limitNumber)) {
					this.$message.error('请输入【每人限领】')
					return
				}
				if (isEmpty(d.grantTimes)) {
					this.$message.error('请选择【发放时间】')
					return
				}
				if (isEmpty(d.meetPrice)) {
					this.$message.error('请输入【订单满多少可使用】')
					return
				}

				if (d.radio == 1) {
					if (isEmpty(d.effectiveDateTime)) {
						this.$message.error('请选择【有效期时间段】')
						return
					}
				} else if (d.radio == 2) {
					if (isEmpty(d.effectiveDay)) {
						this.$message.error('请选择【多少天开始】')
						return
					}
					if (isEmpty(d.effectiveLoseDay)) {
						this.$message.error('请输入【多少天有效】')
						return
					}
				}

				if (this.voucherMinSuIds_bool) {
					this.formAddVoucher.hotelIds = -1 // 适用民宿ids
				} else {
					if (isEmpty(this.voucherMinSuIds)) {
						this.$message.error('请选择【适用民宿】')
						return
					}
					this.formAddVoucher.hotelIds = this.voucherMinSuIds // 适用民宿ids
				}

				this.formAddVoucher.createId = this.currentUserId // 创建人
				this.formAddVoucher.effectiveType = d.radio // 有效期类型（1.时间段 2.生效失效天数）
				this.formAddVoucher.type = 1 // 类型（1.代金券 2.折扣券）
				this.formAddVoucher.status = 1 // 状态(0删除 1正常)

				coupominsterVoucher(this.formAddVoucher).then((res) => {
					// console.log(res);
					if (res.code === 200) {
						that.$message.success(res.message)

						this.get_table_data('list')

						that.dialogAddVoucherFormVisible = false

						that.formAddVoucher = {}
						that.voucherMinSuIds = []
						that.voucherCheckedTowns = []
					} else {
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			// 打开增加折扣券
			add_coupon() {
				// this.dialogAddVisible = false
				this.dialogAddCouponFormVisible = true
				// 获取适用民宿列表
				this.getMinSuList()
			},
			/**
			 * 添加折扣券
			 */
			add_coupon_dialog_handler() {
				var that = this;
				var d = this.formAddCoupon;
				if (isEmpty(d.name)) {
					this.$message.error('请输入【优惠券名称】')
					return
				}
				if (isEmpty(d.rebatePrice)) {
					this.$message.error('请输入【折扣】')
					return
				} else {
					const regex = /^(?:[1-9](?:\.[0-9])?|9(?:\.[0-9])?)$/;
					const msg = '【折扣】只能输入1.0-9.9，仅可带有一位小数。';
					if (!regex.test(d.rebatePrice)) {
						this.$message.error(msg);
						const h = this.$createElement;

						this.$notify({
							title: '提示信息',
							message: h('i', {
								style: 'color: red'
							}, msg)
						});
						return
					}
				}
				if (isEmpty(d.maxDeduction)) {
					this.$message.error('请输入【最大抵扣金额】')
					return
				}
				if (isEmpty(d.grantNumber)) {
					this.$message.error('请输入【发放数量】')
					return
				}
				if (isEmpty(d.limitNumber)) {
					this.$message.error('请输入【每人限领】')
					return
				}
				if (isEmpty(d.grantTimes)) {
					this.$message.error('请选择【发放时间】')
					return
				}
				if (isEmpty(d.meetPrice)) {
					this.$message.error('请输入【订单满多少可使用】')
					return
				}

				if (d.radio == 1) {
					if (isEmpty(d.effectiveDateTime)) {
						this.$message.error('请选择【有效期时间段】')
						return
					}
				} else if (d.radio == 2) {
					if (isEmpty(d.effectiveDay)) {
						this.$message.error('请选择【多少天开始】')
						return
					}
					if (isEmpty(d.effectiveLoseDay)) {
						this.$message.error('请输入【多少天有效】')
						return
					}
				}

				if (this.couponMinSuIds_bool) {
					this.formAddCoupon.hotelIds = -1 // 适用民宿ids
				} else {
					if (isEmpty(this.couponMinSuIds)) {
						this.$message.error('请选择【适用民宿】')
						return
					}
					this.formAddCoupon.hotelIds = this.couponMinSuIds // 适用民宿ids
				}

				this.formAddCoupon.createId = this.currentUserId // 创建人
				this.formAddCoupon.effectiveType = d.radio // 有效期类型（1.时间段 2.生效失效天数）
				this.formAddCoupon.type = 2 //  // 类型（1.代金券 2.折扣券）
				this.formAddCoupon.status = 1 // 状态(0删除 1正常)

				coupominsterCoupon(this.formAddCoupon).then((res) => {
					// console.log(res);
					if (res.code === 200) {
						that.$message.success(res.message)

						this.get_table_data('list')

						that.dialogAddCouponFormVisible = false

						that.formAddCoupon = {}
						that.couponMinSuIds = []
						that.couponCheckedTowns = []
					} else {
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			/**
			 * 批量失效
			 */
			invalidate_batch() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请勾选优惠券！')
					return
				}

				var that = this;
				let data = {
					ids: that.multipleSelection
				}
				// console.log(data);
				coupomsaveBatchLapse(data).then((res) => {
					// console.log(res);
					if (res.code === 200) {
						that.$message.success(res.message)
						this.get_table_data('list')
					} else {
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			add_discount_coupons() {
				this.dialogAddVisible = true;
			},
			/**
			 * 打开修改优惠券对话框
			 * @param {Object} row
			 */
			// handleModifyClick(row) {
			// 	// 获取适用民宿列表
			// 	this.getMinSuList()

			// 	if (row.type == 1) { // 代金券
			// 		this.dialogModifyVoucherFormVisible = true

			// 		this.formModifyVoucher = {}

			// 		this.$set(this.formModifyVoucher, 'name', row.name);
			// 		this.$set(this.formModifyVoucher, 'deductionPrice', row.deductionPrice);
			// 		this.$set(this.formModifyVoucher, 'grantNumber', row.grantNumber);
			// 		this.$set(this.formModifyVoucher, 'limitNumber', row.limitNumber);
			// 		this.$set(this.formModifyVoucher, 'grantTimes', [row.grantStartDate, row.grantEndDate]);
			// 		this.$set(this.formModifyVoucher, 'meetPrice', row.meetPrice);
			// 		if (row.effectiveType == 1) {
			// 			this.$set(this.formModifyVoucher, 'radio', '1');
			// 			this.$set(this.formModifyVoucher, 'effectiveDateTime', [row.effectiveStartDate, row.effectiveEndDate]);
			// 		} else {
			// 			this.$set(this.formModifyVoucher, 'radio', '2');
			// 			this.$set(this.formModifyVoucher, 'effectiveDay', row.effectiveDay);
			// 			this.$set(this.formModifyVoucher, 'effectiveLoseDay', row.effectiveLoseDay);
			// 		}

			// 		this.voucherModifyMinSuIds = row.hotelIds.split(',')
			// 		this.voucherModifyCheckedTowns.length = 0
			// 		setTimeout(() => {
			// 			var tmp = []
			// 			row.hotelIds.split(',').forEach((item) => {
			// 				townOptions_obj.forEach((obj) => {
			// 					if (obj.hid == item) {
			// 						tmp.push(obj.hname);
			// 					}
			// 				});
			// 			});
			// 			this.voucherModifyCheckedTowns = tmp
			// 			this.$set(this.formModifyVoucher, 'voucherModifyCheckedTowns', tmp);
			// 		}, 1000);

			// 		this.$set(this.formModifyVoucher, 'createId', this.currentUserId); // 创建人
			// 		this.$set(this.formModifyVoucher, 'effectiveType', row.effectiveType); // 有效期类型（1.时间段 2.生效失效天数）
			// 		this.$set(this.formModifyVoucher, 'type', 1); // 类型（1.代金券 2.折扣券）
			// 		this.$set(this.formModifyVoucher, 'status', 1); // 状态(0删除 1正常)
			// 		this.$set(this.formModifyVoucher, 'id', row.id);
			// 	} else { // 折扣券
			// 		this.dialogModifyCouponFormVisible = true

			// 		this.formModifyCoupon = {}

			// 		this.$set(this.formModifyCoupon, 'name', row.name);
			// 		this.$set(this.formModifyCoupon, 'rebatePrice', row.rebatePrice);
			// 		this.$set(this.formModifyCoupon, 'maxDeduction', row.maxDeduction);
			// 		this.$set(this.formModifyCoupon, 'grantNumber', row.grantNumber);
			// 		this.$set(this.formModifyCoupon, 'limitNumber', row.limitNumber);
			// 		this.$set(this.formModifyCoupon, 'grantTimes', [row.grantStartDate, row.grantEndDate]);
			// 		this.$set(this.formModifyCoupon, 'meetPrice', row.meetPrice);
			// 		if (row.effectiveType == 1) {
			// 			this.$set(this.formModifyCoupon, 'radio', '1');
			// 			this.$set(this.formModifyCoupon, 'effectiveDateTime', [row.effectiveStartDate, row.effectiveEndDate]);
			// 		} else {
			// 			this.$set(this.formModifyCoupon, 'radio', '2');
			// 			this.$set(this.formModifyCoupon, 'effectiveDay', row.effectiveDay);
			// 			this.$set(this.formModifyCoupon, 'effectiveLoseDay', row.effectiveLoseDay);
			// 		}

			// 		this.couponModifyMinSuIds = row.hotelIds.split(',')
			// 		this.couponModifyCheckedTowns.length = 0
			// 		setTimeout(() => {
			// 			var tmp = []
			// 			row.hotelIds.split(',').forEach((item) => {
			// 				townOptions_obj.forEach((obj) => {
			// 					if (obj.hid == item) {
			// 						tmp.push(obj.hname);
			// 					}
			// 				});
			// 			});
			// 			this.couponModifyCheckedTowns = tmp
			// 			this.$set(this.formModifyCoupon, 'couponModifyCheckedTowns', tmp);
			// 		}, 1000);

			// 		this.$set(this.formModifyCoupon, 'createId', this.currentUserId); // 创建人
			// 		this.$set(this.formModifyCoupon, 'effectiveType', row.effectiveType); // 有效期类型（1.时间段 2.生效失效天数）
			// 		this.$set(this.formModifyCoupon, 'type', 1); // 类型（1.代金券 2.折扣券）
			// 		this.$set(this.formModifyCoupon, 'status', 1); // 状态(0删除 1正常)
			// 		this.$set(this.formModifyCoupon, 'id', row.id);
			// 	}
			// },
			/**
			 * 点击查看优惠券详情，弹出优惠券详情对话框
			 * @param {Object} row
			 */
			handleDetailClick(row) {
				// console.log(row);
				if (row.type == 1) { // 代金券
					this.dialogVoucherVisible = true

					this.coupon.name = row.name
					this.coupon.deductionPrice = row.deductionPrice
					this.coupon.grantNumber = row.grantNumber
					this.coupon.limitNumber = row.limitNumber
					this.coupon.grantStartDate = row.grantStartDate
					this.coupon.grantEndDate = row.grantEndDate
					this.coupon.meetPrice = row.meetPrice

					this.coupon.effectiveType = row.effectiveType
					this.coupon.effectiveStartDate = row.effectiveStartDate
					this.coupon.effectiveEndDate = row.effectiveEndDate
					this.coupon.effectiveDay = row.effectiveDay
					this.coupon.effectiveLoseDay = row.effectiveLoseDay

					this.coupon.hotelNames = row.hotelNames.split(',')
					this.coupon.hotelIds = row.hotelIds
				} else { // 折扣券
					this.dialogCouponVisible = true

					this.coupon.name = row.name
					this.coupon.rebatePrice = row.rebatePrice
					this.coupon.maxDeduction = row.maxDeduction
					this.coupon.grantNumber = row.grantNumber
					this.coupon.limitNumber = row.limitNumber
					this.coupon.grantStartDate = row.grantStartDate
					this.coupon.grantEndDate = row.grantEndDate
					this.coupon.meetPrice = row.meetPrice

					this.coupon.effectiveType = row.effectiveType
					this.coupon.effectiveStartDate = row.effectiveStartDate
					this.coupon.effectiveEndDate = row.effectiveEndDate
					this.coupon.effectiveDay = row.effectiveDay
					this.coupon.effectiveLoseDay = row.effectiveLoseDay

					this.coupon.hotelNames = row.hotelNames.split(',')
					this.coupon.hotelIds = row.hotelIds
				}
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				this.loading = true
				this.get_condtion();

				let data = this.cond_data;
				if (param == 'search') {
					data.page = 1
					this.pagination.currentPage = 1
				}

				var that = this
				// console.log(data);
				getTableData(data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						var d = res.data
						that.pagination.total = d.total
						that.tableData = []
						for (var i = 0; i < d.pageList.length; i++) {
							that.tableData.push(d.pageList[i])
						}
						// that.tableData.sort((a,b) => b.createDate.localeCompare(a.createDate))
					} else {
						that.tableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				that.loading = false;
			},
			/**
			 * 查询条件
			 */
			get_condtion() {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}

				if (this.formInline.type !== '') {
					data.type = this.formInline.type
				}

				if (this.formInline.status !== '') {
					data.status = this.formInline.status
				}

				if (this.formInline.search_datatime !== '') {
					data.search_datatime = this.formInline.search_datatime
				}

				if (this.formInline.name !== '') {
					data.name = this.formInline.name
				}

				this.cond_data = data;
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							display: flex;
							align-items: center;

							.title {
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								color: #1A202B;
							}

							.title-detail {
								margin-left: 50px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #1A202B;
							}
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.controls {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.demo-form-inline {
								display: inline-flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: flex-start;

								.btn-search {
									background: rgba(9, 101, 98, 1);
									font-size: 14px;
									color: #FFFFFF;
									font-family: Microsoft YaHei-3970(82674968);
									border-radius: 5px;
									border: none;
								}
							}

							.export {
								background: rgba(9, 101, 98, 1);
								font-size: 14px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
								margin-bottom: 22px;
								border: none;
							}
						}

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;

							.txt-notice {

								span {
									font-size: 28px;
									font-weight: 500;
									font-family: '微软雅黑';
								}
							}

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 600px;
			height: 560px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 6px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				border-radius: 6px 6px 0px 0px;
				font-weight: bold;
				border-bottom: 1px solid rgba(230, 230, 230, 1);
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item__label,
				.el-form-item__content {
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #53575A;
				}

				.el-input {
					width: 180px;
				}

				.el-input__inner {
					width: 180px;
				}
			}

			// 删除对话框的样式
			.del-account-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 180px;

				img {
					width: 72px;
				}

				.del-account-body-txt {
					height: 58px;
					line-height: 58px;
					font-size: 18px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #333333;
				}
			}

			.el-dialog__footer {
				padding-bottom: 0 !important;
				text-align: center;

				.el-button.el-button--default {
					width: 75px;
					height: 40px;
					border: 1px solid #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #2B4CFE;
				}

				.el-button.el-button--primary {
					width: 75px;
					height: 40px;
					background: #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #FFFFFF;
					margin-left: 60px;
				}
			}
		}
	}
</style>

<style>
	.add-voucher-class {
		width: 800px !important;
		height: 890px !important;
	}

	.el-date-editor--daterange.el-input__inner {
		width: 280px !important;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 180px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33%;
	}

	.show-imgs {
		display: flex;
	}

	.imgs {
		display: flex;
		flex-direction: row;
		margin-left: 20px;
	}

	.lbl-cls {
		display: inline-block;
		width: 100px;
		text-align: right;
		padding-right: 10px;
		color: #bbb;
	}

	.export {
		background: rgba(9, 101, 98, 1) !important;
		font-size: 14px !important;
		color: #FFFFFF !important;
		font-family: Microsoft YaHei-3970(82674968);
		border-radius: 5px !important;
		margin-bottom: 22px !important;
		border: none !important;
	}

	.add-class {
		height: 450px !important;
		width: 800px !important;
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;
	}

	.add-info-cancel-btn {
		color: rgba(9, 101, 98, 1) !important;
		border: 1px solid rgba(9, 101, 98, 1) !important;
	}

	.add-info-confirm-btn {
		border: none !important;
		background: rgba(9, 101, 98, 1) !important;
		color: #fff !important;
		border-radius: 5px !important;
		margin-left: 28px !important;
	}

	.el-form-item>label {
		color: rgba(128, 128, 128, 1) !important;
	}

	.custom-input {
		width: 7rem !important;
	}

	.custom-input input {
		width: 7rem !important;
	}

	.el-radio {
		margin-right: 10px;
	}

	.el-form-item {
		margin-bottom: 16px !important;
	}
	
	.shou-info-voucher-class {
		height: 580px !important;
	}
	
	.shou-info-coupon-class {
		height: 620px !important;
	}
</style>