Homestay_manage_owner/src/views/perimeterMgr/index.vue

<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>
									<el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
								</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>
							<div>
								<el-button class="export" size="small" @click="add_perimeter">
									<i class="el-icon el-icon-circle-plus-outline" style="font-size: 20px;"></i>
									<span style="font-size: 16px;">新增周边</span>
								</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 label="序号" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.xuhao }}</span>
								</template>
							</el-table-column>
							<el-table-column label="类型" align="center" width="88">
								<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">
								<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">
								<template slot-scope="scope">
									<span>{{ scope.row.name }}</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">
								<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="180">
								<template slot-scope="scope">
									<el-button @click="handleModifyClick(scope.row)" type="text" size="small">编辑</el-button>
									<el-button @click="handleDelClick(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="add-dlg-class" :visible.sync="dialogAddVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogAddVisible = false">
			<el-form :model="formAddHostel" ref="addHostelForm" :rules="addHostelFormRules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="周边类型" :label-width="formLabelWidth" :required="true" prop="jibieId">
							<el-select v-model="formAddHostel.jibieId" clearable placeholder="请选择类型" style="width: 100%;">
								<el-option v-for="item in formAddHostel.jibie" :key="item.id" :label="item.jibieName" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="名称" :label-width="formLabelWidth" :required="true" prop="adminName">
							<el-input v-model="formAddHostel.adminName" autocomplete="off" placeholder="请输入名称" maxlength="16">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所在乡镇" :label-width="formLabelWidth" :required="true" prop="id">
							<el-select v-model="formAddHostel.hotelTownship" clearable placeholder="请选择乡镇" style="width: 100%;" @change="getHotelId($event)">
								<el-option v-for="item in formAddHostel.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="联系电话" :label-width="formLabelWidth" :required="true" prop="linkproUrl">
							<el-input v-model="formAddHostel.linkproUrl" autocomplete="off" placeholder="请输入联系电话"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="margin-top: -20px;">
						<el-form-item label="详细地址" :required="true" :label-width="formLabelWidth" prop="addr">
							<el-input v-model="formAddHostel.name" placeholder="请输入地址"></el-input>
						</el-form-item>
						<el-form-item label="简介" :required="true" :label-width="formLabelWidth" prop="jianjie">
							<el-input type="textarea" v-model="formAddHostel.desc" rows="5" placeholder="请输入简介" maxlength="300" show-word-limit></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">封面图：</div>
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-radius: 5px;">
								<div
									style="position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: rgba(131, 131, 131, 1.0); border-radius: 50%; font-size: 22px; color: #e3e3e3; cursor: pointer; display: flex; justify-content: center; align-items: center;">
									&times;</div>
								<viewer>
									<img src="https://via.placeholder.com/150x180" alt="" style="border-radius: 5px;">
								</viewer>
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传图片</el-button>
							</div>
						</div>
					</el-col>
					<el-col :span="6" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">介绍视频：</div>
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-radius: 5px;">
								<div
									style="position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: rgba(131, 131, 131, 1.0); border-radius: 50%; font-size: 22px; color: #e3e3e3; cursor: pointer; display: flex; justify-content: center; align-items: center;">
									&times;</div>
								<img src="https://via.placeholder.com/150x180" alt="" style="border-radius: 5px;">
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传视频</el-button>
							</div>
						</div>
					</el-col>
					<el-col :span="12" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">详情图：</div>
							<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px;">
								<viewer :images="fileInfoListImages" style="width: 390px;">
									<el-carousel height="178px" width="100%" style="border-radius: 5px;">
										<el-carousel-item v-for="item in fileInfoList" :key="item.id">
											<!-- <img :src="item" style="border-radius: 5px; cursor: pointer; width: 100%; height: 178px;"> -->
											<img src="https://via.placeholder.com/150x180"
												style="border-radius: 5px; cursor: pointer; width: 100%; height: 178px;">
										</el-carousel-item>
									</el-carousel>
								</viewer>
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传图片</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 添加产品 -->
		<el-dialog title="添加产品" custom-class="add-product-class" :visible.sync="dialogAddProductVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogAddProductVisible = false">
			<el-form :model="formAddHostel" ref="addHostelForm" :rules="addHostelFormRules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="产品名称" :label-width="formLabelWidth" :required="true" prop="jibieId">
							<el-input v-model="formAddHostel.adminName" autocomplete="off" placeholder="请输入产品名称" maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="产品介绍" :label-width="formLabelWidth" :required="true" prop="adminName">
							<el-input type="textarea" v-model="formAddHostel.desc" rows="5" placeholder="请输入产品介绍" maxlength="300" show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="产品价格" :label-width="formLabelWidth" :required="true" prop="id">
							<div style="display: flex; align-items: center;">
								<el-input v-model="formAddHostel.adminName" style="width: 180px; margin-right: 8px;" autocomplete="off" placeholder="请输入产品价格"
									maxlength="16">
								</el-input>
								<div>元</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddProductVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 编辑周边 -->
		<el-dialog title="编辑周边" custom-class="add-dlg-class" :visible.sync="dialogModifyVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogModifyVisible = false">
			<el-form :model="formAddHostel" ref="addHostelForm" :rules="addHostelFormRules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="周边类型" :label-width="formLabelWidth" :required="true" prop="jibieId">
							<el-select v-model="formAddHostel.jibieId" clearable placeholder="请选择类型" style="width: 100%;">
								<el-option v-for="item in formAddHostel.jibie" :key="item.id" :label="item.jibieName" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="名称" :label-width="formLabelWidth" :required="true" prop="adminName">
							<el-input v-model="formAddHostel.adminName" autocomplete="off" placeholder="请输入名称" maxlength="16">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所在乡镇" :label-width="formLabelWidth" :required="true" prop="id">
							<el-select v-model="formAddHostel.hotelTownship" clearable placeholder="请选择乡镇" style="width: 100%;" @change="getHotelId($event)">
								<el-option v-for="item in formAddHostel.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="联系电话" :label-width="formLabelWidth" :required="true" prop="linkproUrl">
							<el-input v-model="formAddHostel.linkproUrl" autocomplete="off" placeholder="请输入联系电话"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="margin-top: -20px;">
						<el-form-item label="详细地址" :required="true" :label-width="formLabelWidth" prop="addr">
							<el-input v-model="formAddHostel.name" placeholder="请输入地址"></el-input>
						</el-form-item>
						<el-form-item label="简介" :required="true" :label-width="formLabelWidth" prop="jianjie">
							<el-input type="textarea" v-model="formAddHostel.desc" rows="5" placeholder="请输入简介" maxlength="300" show-word-limit></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">封面图：</div>
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-radius: 5px;">
								<div
									style="position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: rgba(131, 131, 131, 1.0); border-radius: 50%; font-size: 22px; color: #e3e3e3; cursor: pointer; display: flex; justify-content: center; align-items: center;">
									&times;</div>
								<viewer>
									<img src="https://via.placeholder.com/150x180" alt="" style="border-radius: 5px;">
								</viewer>
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传图片</el-button>
							</div>
						</div>
					</el-col>
					<el-col :span="6" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">介绍视频：</div>
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-radius: 5px;">
								<div
									style="position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: rgba(131, 131, 131, 1.0); border-radius: 50%; font-size: 22px; color: #e3e3e3; cursor: pointer; display: flex; justify-content: center; align-items: center;">
									&times;</div>
								<img src="https://via.placeholder.com/150x180" alt="" style="border-radius: 5px;">
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传视频</el-button>
							</div>
						</div>
					</el-col>
					<el-col :span="12" style="display: flex; justify-content: center;">
						<div style="display: flex; flex-direction: column; align-items: center;">
							<div style="font-size: 18px; margin-bottom: 10px;">详情图：</div>
							<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px;">
								<viewer :images="fileInfoListImages" style="width: 390px;">
									<el-carousel height="178px" width="100%" style="border-radius: 5px;">
										<el-carousel-item v-for="item in fileInfoList" :key="item.id">
											<!-- <img :src="item" style="border-radius: 5px; cursor: pointer; width: 100%; height: 178px;"> -->
											<img src="https://via.placeholder.com/150x180"
												style="border-radius: 5px; cursor: pointer; width: 100%; height: 178px;">
										</el-carousel-item>
									</el-carousel>
								</viewer>
								<el-button
									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
									size="small">上传图片</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 删除确认对话框 -->
		<el-dialog custom-class="el-dialog-delete-account" :visible.sync="dialogDeleteVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			:show-close="false">
			<div slot="" class="del-account-body">
				<img src="../../icons/serveAC/del_warning.png" alt="">
				<div class="del-account-body-txt">是否确定将该【】从列表中移除？</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-user-cancel-btn" @click="dialogDeleteVisible = false"> 否 </el-button>
				<el-button class="add-user-confirm-btn" @click=""> 是 </el-button>
			</div>
		</el-dialog>
		<!-- 周边详情 -->
		<el-dialog title="周边详情" custom-class="add-voucher-class" :visible.sync="dialogInfoVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogInfoVisible = false">
			<div style="padding: 0; margin: 0; overflow:auto;">
				<el-row>
					<el-col :span="14">
						<div style="display: flex; align-items: center; margin-bottom: 20px; ">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								周边类型</div>
							<div style="font-size: 16px; font-weight: 700; color: #333;">景点</div>
						</div>
						<div style="display: flex; align-items: center; margin-bottom: 20px; ">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								名称</div>
							<div style="font-size: 16px; font-weight: 700; color: #333;">山爪仑漂流</div>
						</div>
						<div style="display: flex; align-items: center; margin-bottom: 20px; ">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								所属乡镇</div>
							<div style="font-size: 16px; font-weight: 700; color: #333;">山爪仑</div>
						</div>
						<div style="display: flex; align-items: center; margin-bottom: 20px; ">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								详细地址</div>
							<div style="font-size: 16px; font-weight: 700; color: #333;">详细地址详细地址详细地址详细地址详细地址详细地址</div>
						</div>
						<div style="display: flex; align-items: center; ">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								联系电话</div>
							<div style="font-size: 16px; font-weight: 700; color: #333;">18988898898</div>
						</div>
					</el-col>
					<el-col :span="10">
						<div style="display: flex;">
							<div
								style="font-size: 16px; font-weight: 700; min-width: 100px; text-align: right; margin-right: 18px; color: rgba(128, 128, 128, 1);">
								封面图</div>
							<viewer>
								<img src="https://via.placeholder.com/160x200" alt="" srcset="" style="border-radius: 5px;" />
							</viewer>
						</div>
					</el-col>
				</el-row>
				<el-divider></el-divider>
				<el-row>
					<el-col :span="24">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="产品" name="first">
								<el-button class="export" style="margin-bottom: 10px !important;" size="small" @click="handleAddProduct">
									<i class="el-icon el-icon-circle-plus-outline" style="font-size: 16px;"></i>
									<span style="font-size: 14px;">添加产品</span>
								</el-button>
								<el-table ref="multipleTable" :data="tableData" height="220" style="width: 100%" :cell-style="cell_style" v-loading="loading"
									:header-cell-style="header_cell_style" @selection-change="handleSelectionChange">
									<el-table-column label="序号" align="center" width="100">
										<template slot-scope="scope">
											<span>{{ scope.row.xuhao }}</span>
										</template>
									</el-table-column>
									<el-table-column label="类型" align="center" width="88">
										<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">
										<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">
										<template slot-scope="scope">
											<span>{{ scope.row.name }}</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">
										<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="180">
										<template slot-scope="scope">
											<el-button @click="handleModifyClick(scope.row)" type="text" size="small">编辑</el-button>
											<el-button @click="handleDelClick(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>
							</el-tab-pane>
							<el-tab-pane label="简介" name="second">
								<div style="height: 264px; overflow-y: auto;">
									<div style="font-size: 16px; font-weight: bold; margin: 10px 0;">开放时间</div>
									<div style="font-size: 14px; margin: 10px 0 20px; line-height: 22px;">1月1日-12月31日 周一至周日 全天: 08:00-17:00
										最晚入园:15:00<br>以上信息仅供参考，具体以景区当日实际公示信息为准</div>
									<div style="font-size: 16px; font-weight: bold; margin: 10px 0;">预订提示</div>
									<div style="font-size: 14px; margin: 10px 0 20px; line-height: 22px;">
										为了保护好您的健康与安全，请您一定要做好自我防护，建议减少外出，避免去人群密集的公共场所，进入景区佩戴口罩。同时，请您配合景区做好入园体温检测以及信息登记工作。由此给您带来不便敬请谅解景区介绍：既有森林公园的野趣，又有江南园林的韵致
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="介绍视频" name="third">
								<div style="height: 264px; overflow-y: auto;">
									<div style="display: flex; justify-content: center; align-items: center;">
										<div v-for="(video, index) in videoList" :key="index" style="width: 464px; height: 262px;">
											<video-player class="video-player vjs-custom-skin" :ref="'videoPlayer' + index" @play="onPlayerPlay($event)"
												:playsinline="true" :options="video.playerOptions"></video-player>
										</div>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="详情图" name="fourth">
								<div style="height: 264px; overflow-y: auto;">
									<div style="display: flex; justify-content: center; align-items: center; border-radius: 5px;">
										<viewer :images="fileInfoListImages" style="width: 600px;">
											<el-carousel height="260px" width="100%" style="border-radius: 5px;">
												<el-carousel-item v-for="item in fileInfoList" :key="item.id">
													<!-- <img :src="item" style="border-radius: 5px; cursor: pointer; width: 100%; height: 178px;"> -->
													<img src="https://via.placeholder.com/600x260"
														style="border-radius: 5px; cursor: pointer; width: 100%; height: 260px;">
												</el-carousel-item>
											</el-carousel>
										</viewer>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-col>
				</el-row>
			</div>
		</el-dialog>
	</div>
</template>

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

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

	var townOptions = [] // 民宿列表
	var townOptions_obj = [] // 民宿列表
	export default {
		data() {
			return {
				videoList: [],
				activeName: 'second',
				fileInfoListImages: [],
				fileInfoList: [1, 2, 4],
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				currentUserId: this.$store.state.user.user_id, // 当前用户的权限
				formLabelWidth: '100px',
				// 表格单元格样式
				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)'
				},
				addHostelFormRules: {},
				// 查询数据
				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: {},
				formAddHostel: {},
				dialogAddVisible: false, // 新增周边
				dialogInfoVisible: false, // 周边详情
				dialogModifyVisible: false, // 修改周边
				dialogDeleteVisible: false, // 删除确认对话框
				dialogAddProductVisible: false, // 添加产品对话框
				formAddVoucher: {}, // 增加代金券数据模型
				formModifyVoucher: {}, // 修改代金券数据模型
				addVoucherFormRules: {

				},
				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')

			this.videoList.push({
				playerOptions: {
					playbackRates: [0.5, 0.8, 1.0, 1.25, 1.5, 1.75, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: "zh-CN",
					aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						withCredentials: false,
						type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
						src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
					}],
					controls: true,
					hls: true,
					poster: "", // 你的封面地址
					notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						progressControl: true,
						currentTimeDisplay: true,
						timeDivider: true,
						durationDisplay: true,
						remainingTimeDisplay: false,
						fullscreenToggle: true, // 全屏按钮
					},
					flash: {
						hls: {
							withCredentials: false
						}
					},
					html5: {
						hls: {
							withCredentials: false
						}
					}
				}
			})
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";

			document.addEventListener('fullscreenchange', this.handleFullScreenChange);
		},
		beforeDestroy() {
			document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
		},
		methods: {
			handleFullScreenChange() {
				if (!document.fullscreenElement) {
					// 退出全屏逻辑
					this.playering.pause()
				}
			},
			// 定义点击播放按钮，自动全屏化的方法
			full(e) {
				// 做兼容处理
				if (e.requestFullscreen) {
					e.requestFullscreen()
				} else if (e.mozRequestFullScreen) {
					e.mozRequestFullScreen()
				} else if (e.msRequestFullscreen) {
					e.msRequestFullscreen()
				} else if (e.oRequestFullscreen) {
					e.oRequestFullscreen()
				} else if (e.webkitRequestFullscreen) {
					e.webkitRequestFullScreen()
				} else {
					// var docHtml = document.documentElement;
					// var docBody = document.body;
					var videobox = document.getElementsByClassName('video-player')
					var cssText = 'width:100%;height:100%;overflow:hidden;'
					// docHtml.style.cssText = cssText;
					// docBody.style.cssText = cssText;
					videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
					document.IsFullScreen = true
				}
			},
			// 定义点击播放按钮，调用全屏化的方法
			onPlayerPlay(player) {
				// console.log('player play===>>>', player)
				this.playering = player
				this.full(player)
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			/**
			 * 添加产品
			 */
			handleAddProduct() {
				this.dialogAddProductVisible = true
			},
			/**
			 * 分页表格勾选
			 * @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
				}
			},
			/**
			 * 折扣券适用民宿全选
			 * @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()
			},
			/**
			 * 获取适用民宿列表
			 */
			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)
				});
			},
			/**
			 * 添加代金券
			 */
			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.dialogInfoVisible = 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_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.formAddCoupon = {}
						that.couponMinSuIds = []
						that.couponCheckedTowns = []
					} else {
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			/**
			 * 新增周边
			 */
			add_perimeter() {
				this.dialogAddVisible = true
			},
			/**
			 * 打开编辑周边
			 * @param {Object} row
			 */
			handleModifyClick(row) {
				this.dialogModifyVisible = true
			},
			/**
			 * 删除周边
			 */
			handleDelClick() {
				this.dialogDeleteVisible = true
			},
			/**
			 * 点击查看优惠券详情，弹出优惠券详情对话框
			 * @param {Object} row
			 */
			handleDetailClick(row) {
				// console.log(row);
				this.dialogInfoVisible = true
				if (row.type == 1) { // 代金券
					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.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) {
						let tempData = res.data.pageList;
						if (typeof tempData !== 'undefined' && tempData !== '') {
							this.pagination.total = res.data.total
							this.tableData = []
							for (var i = 0; i < tempData.length; i++) {
								tempData[i].xuhao = (this.pagination.currentPage - 1) * this.pagination.pageSize + i + 1
								this.tableData.push(tempData[i])
							}
						} else {
							this.tableData = []
							this.$message.warning('没有符合条件的数据！')
						}
						// 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;
							padding-right: 100px;

							.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;
				}
			}

			// 删除对话框的样式
			.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: 900px !important;
		height: 760px !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;
	}

	.add-dlg-class {
		width: 830px !important;
		height: 768px !important;
	}

	.add-product-class {
		width: 680px !important;
		height: 440px !important;
	}

	.el-carousel__indicators {
		display: none !important;
	}

	.el-tabs__item {
		width: 100px !important;
		text-align: center !important;
		font-size: 20px !important;
	}


	.el-tabs__item.is-active,
	.el-tabs__item:hover {
		color: rgba(9, 101, 98, 1) !important;
	}

	.el-tabs__active-bar {
		color: rgba(9, 101, 98, 1) !important;
		background-color: rgba(9, 101, 98, 1) !important;
	}
</style>