<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-select v-model="formInline.status" clearable placeholder="请选择" style="width: 120px;">
										<el-option v-for="item in formInline.options" :key="item.id" :label="item.label" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="标题">
									<el-input v-model="formInline.title" style="width: 200px;" prefix-icon="el-icon-search" clearable
										placeholder="请输入标题关键字"></el-input>
								</el-form-item>
								<el-form-item label="创建时间">
									<el-date-picker v-model="formInline.search_datatime" type="daterange" 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>
							<el-button type="primary" class="export" @click="handleAD">添加广告</el-button>
						</div>
						<el-table ref="multipleTable" :data="tableData" height="528" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style">
							<el-table-column fixed="left" label="排序" align="center" width="80">
								<template slot-scope="scope">
									<span>{{ scope.row.sortLevel }}</span>
								</template>
							</el-table-column>
							<el-table-column label="标题" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.title }}</span>
								</template>
							</el-table-column>
							<el-table-column label="图片" align="center">
								<template slot-scope="scope">
									<viewer>
										<img style="height: 128px; cursor: pointer;" :src="scope.row.imageUrl" fit="contain" />
									</viewer>
								</template>
							</el-table-column>
							<el-table-column label="跳转类型" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.jumpWay }}</span>
								</template>
							</el-table-column>
							<el-table-column label="页面链接" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.subTitle === ''">
										<span v-if="scope.row.jumpPoint === ''">无</span>
										<span v-else>{{ scope.row.jumpPoint }}</span>
									</span>
									<span v-else>{{ scope.row.subTitle }}</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.state == 1">开启</span>
									<span v-else>禁用</span>
								</template>
							</el-table-column>
							<el-table-column label="创建时间" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.createTime }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="160">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="modifyAd(scope.row)">修改</el-button>
									<el-button type="text" size="small" @click="delAd(scope.row)">删除</el-button>
									<el-button v-if="scope.row.state == 1" @click="enablingAndDisabling(scope.row, 0)" type="text" size="small">禁用</el-button>
									<el-button v-else type="text" size="small" @click="enablingAndDisabling(scope.row, 1)">开启</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-ad-class" :visible.sync="dialogModifyADFormVisible" :close-on-click-modal="false">
			<div style="width: 100%; height: 580px; overflow-y: auto;" class="scroll-container">
				<el-form :model="formModifyAD" :rules="formADRules" ref="formModifyADRule" label-width="120px">
					<el-form-item label="标题" prop="adTitle" :required="true">
						<el-input placeholder="请输入标题" v-model="formModifyAD.adTitle" maxlength="20" style="width: 90%;" clearable></el-input>
					</el-form-item>
					<el-form-item id="uploadImg" label="上传图片" prop="imageUrl" :required="true">
						<div class="avatar-uploader" @click="uploadModifyImageClick">
							<img v-if="formModifyAD.imageUrl" :src="formModifyAD.imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</div>
						<input type="file" ref="modifyImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'modifyImg')" />
					</el-form-item>
					<el-form-item id="uploadImg" label="">
						<div style="color: #f00; line-height: 20px;">
							系统仅支持上传 1 张图片，图片不超过 5M，比例为 3 : 2，为了不遮挡文字不得有白边，上传请按照以下标准：
						</div>
					</el-form-item>
					<el-form-item id="uploadImg" label="">
						<div style="display: flex; justify-content: space-around; margin: -20px 10px 0 0;">
							<div style="display: flex; justify-content: center; align-items: center; width: 150px; height: 75px; border: 1px solid #999;">
								<div style="display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; width: 125px; height: 50px;">
									文字区域</div>
							</div>
							<img :src="imgs.img1" style="width: 150px; height: 75px;" alt="图片示例" />
							<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
						</div>
					</el-form-item>
					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle">
						<div style="display: flex; align-items: center;">
							<el-image style="width: 100px; height: 40px; margin-right: 30px;"
								:class="{ 'selected': selectedModify_1, 'unselected': !selectedModify_1 }" @click="getModifyStyle(1)" :src="formModifyAD.url1"
								@contextmenu.prevent="handleRightClick(1)">
							</el-image>
							<el-image style="width: 100px; height: 100px; border-radius: 50%; margin-right: 30px;" @click="getModifyStyle(2)"
								:class="{ 'selected': selectedModify_2, 'unselected': !selectedModify_2 }" :src="formModifyAD.url2"
								@contextmenu.prevent="handleRightClick(2)">
							</el-image>
							<el-image style="width: 100px; height: 40px; margin-right: 30px; background-color: #9d9d9d;" @click="getModifyStyle(3)"
								:class="{ 'selected': selectedModify_3, 'unselected': !selectedModify_3 }" :src="formModifyAD.url3"
								@contextmenu.prevent="handleRightClick(3)">
							</el-image>
						</div>
					</el-form-item>
					<el-form-item label="跳转类型" prop="checkedTypes">
						<el-radio-group v-model="formModifyAD.checkedTypes">
							<el-radio :label="1">网页</el-radio>
							<el-radio :label="2">小程序</el-radio>
							<el-radio :label="3">不跳转</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="链接" prop="adLink" v-if="formModifyAD.checkedTypes == 1" :required="formModifyAD.checkedTypes == 1">
						<el-tooltip effect="light" content="如需配置链接，请联系创海配置域名。">
							<el-input placeholder="请输入链接" v-model="formModifyAD.adLink" style="width: 90%;" clearable></el-input>
						</el-tooltip>
						<div v-if="formModifyAD.checkedTypes == 1" style="color: #f00; line-height: 22px;">如需配置链接，请联系创海配置域名。</div>
					</el-form-item>
					<el-form-item :label="formModifyAD.adSelectClass" prop="adPage" v-if="formModifyAD.checkedTypes == 2"
						:required="formModifyAD.checkedTypes == 2">
						<div id="panel" style="width: 100%;">
							<el-input placeholder="请选择民宿、优惠券、攻略、商品" v-model="formModifyAD.adPage" maxlength="20" style="width: 70%; margin-right: 20px;"
								readonly="" @clear="clearSelectClass"></el-input>
							<el-dropdown @command="handleCommand" style="cursor: pointer;">
								<span class="el-dropdown-link">
									{{ formModifyAD.adSelectClass }}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="modify_minsu">民宿</el-dropdown-item>
									<el-dropdown-item command="modify_youhuiquan">优惠券</el-dropdown-item>
									<el-dropdown-item command="modify_gonglue">攻略</el-dropdown-item>
									<el-dropdown-item command="modify_shangpin">商品</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</el-form-item>
					<el-form-item label="状态" prop="adStatus" :required="true">
						<el-switch v-model="formModifyAD.adStatus"></el-switch>
					</el-form-item>
					<el-form-item label="排序" prop="adOrder" :required="true">
						<el-input-number size="small" :max="10" :min="1" v-model="formModifyAD.adOrder"></el-input-number>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="cancel-btn" @click="dialogModifyADFormVisible = false">取 消</el-button>
				<el-button type="primary" class="confirm-btn" style="width: 100px;" @click="handleModifyADAddClick">立即修改</el-button>
			</div>
		</el-dialog>
		<!-- 添加广告窗口 -->
		<el-dialog title="添加广告" custom-class="add-ad-class" :visible.sync="dialogADFormVisible" :close-on-click-modal="false">
			<div style="width: 100%; height: 580px; overflow-y: auto;" class="scroll-container">
				<el-form :model="formAD" :rules="formADRules" ref="formADRule" label-width="120px">
					<el-form-item label="标题" prop="adTitle" :required="true">
						<el-input placeholder="请输入标题" v-model="formAD.adTitle" maxlength="20" style="width: 90%;" clearable></el-input>
					</el-form-item>
					<el-form-item id="uploadImg" label="上传图片" prop="imageUrl" :required="true">
						<div class="avatar-uploader" @click="uploadImageClick">
							<img v-if="formAD.imageUrl" :src="formAD.imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</div>
						<input type="file" ref="addImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'addImg')" />
					</el-form-item>
					<el-form-item id="uploadImg" label="">
						<div style="color: #f00; line-height: 20px;">
							系统仅支持上传 1 张图片，图片不超过 5M，比例为 3 : 2，为了不遮挡文字不得有白边，上传请按照以下标准：
						</div>
					</el-form-item>
					<el-form-item id="uploadImg" label="">
						<div style="display: flex; justify-content: space-around; margin: -20px 10px 0 0;">
							<div style="display: flex; justify-content: center; align-items: center; width: 150px; height: 75px; border: 1px solid #999;">
								<div style="display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; width: 125px; height: 50px;">
									文字区域</div>
							</div>
							<img :src="imgs.img1" style="width: 150px; height: 75px;" alt="图片示例" />
							<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
						</div>
					</el-form-item>
					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle">
						<div style="display: flex; align-items: center;">
							<el-image style="width: 100px; height: 40px; margin-right: 30px;" :class="{ 'selected': selected_1, 'unselected': !selected_1 }"
								@click="getStyle(1)" :src="formAD.url1" @contextmenu.prevent="handleRightClick(1)">
							</el-image>
							<el-image style="width: 100px; height: 100px; border-radius: 50%; margin-right: 30px;" @click="getStyle(2)"
								:class="{ 'selected': selected_2, 'unselected': !selected_2 }" :src="formAD.url2" @contextmenu.prevent="handleRightClick(2)">
							</el-image>
							<el-image style="width: 100px; height: 40px; margin-right: 30px; background-color: #9d9d9d;" @click="getStyle(3)"
								:class="{ 'selected': selected_3, 'unselected': !selected_3 }" :src="formAD.url3" @contextmenu.prevent="handleRightClick(3)">
							</el-image>
						</div>
					</el-form-item>
					<el-form-item label="跳转类型" prop="checkedTypes">
						<el-radio-group v-model="formAD.checkedTypes">
							<el-radio :label="1">网页</el-radio>
							<el-radio :label="2">小程序</el-radio>
							<el-radio :label="3">不跳转</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="链接" prop="adLink" v-if="formAD.checkedTypes == 1" :required="formAD.checkedTypes == 1">
						<el-tooltip effect="light" content="如需配置链接，请联系创海配置域名。">
							<el-input placeholder="请输入链接" v-model="formAD.adLink" style="width: 90%;" clearable></el-input>
						</el-tooltip>
						<div v-if="formAD.checkedTypes == 1" style="color: #f00; line-height: 22px;">如需配置链接，请联系创海配置域名。</div>
					</el-form-item>
					<el-form-item :label="formAD.adSelectClass" prop="adPage" v-if="formAD.checkedTypes == 2" :required="formAD.checkedTypes == 2">
						<div id="panel" style="width: 100%;">
							<el-input placeholder="请选择民宿、优惠券、攻略、商品" v-model="formAD.adPage" maxlength="20" style="width: 70%; margin-right: 20px;" readonly=""
								@clear="clearSelectClass"></el-input>
							<el-dropdown @command="handleCommand" style="cursor: pointer;">
								<span class="el-dropdown-link">
									{{ formAD.adSelectClass }}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="minsu">民宿</el-dropdown-item>
									<el-dropdown-item command="youhuiquan">优惠券</el-dropdown-item>
									<el-dropdown-item command="gonglue">攻略</el-dropdown-item>
									<el-dropdown-item command="shangpin">商品</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</el-form-item>
					<el-form-item label="状态" prop="adStatus" :required="true">
						<el-switch v-model="formAD.adStatus"></el-switch>
					</el-form-item>
					<el-form-item label="排序" prop="adOrder" :required="true">
						<el-input-number size="small" :max="10" :min="1" v-model="formAD.adOrder"></el-input-number>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="cancel-btn" @click="dialogADFormVisible = false">取 消</el-button>
				<el-button type="primary" class="confirm-btn" style="width: 100px;" @click="handleADAddClick">立即创建</el-button>
			</div>
		</el-dialog>
		<!-- 民宿 -->
		<el-dialog width="1200px" style="height: 760px;" title="民宿" :visible.sync="minsuVisible" append-to-body :close-on-click-modal="false"
			:close-on-press-escape="false">
			<div style="display: flex; justify-content: space-around;">
				<el-form :inline="true" :model="minsuFormInline" class="demo-form-inline">
					<el-form-item label="民宿名称">
						<el-input v-model="minsuFormInline.adminName" 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="minsu_btn_search">查询</el-button>
					</el-form-item>
				</el-form>
				<div>
					<el-button type="primary" class="btn-search" @click="select_minsu_OK">确定</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" id="minsu_table" :data="minsuTableData" height="396" style="width: 100%" :cell-style="cell_style"
				v-loading="minsuLoading" :header-cell-style="header_cell_style" @selection-change="minsuSelectionChange">
				<el-table-column type="selection" width="50" :selectable="minsuIsSelectable" :header-selectable="false">
				</el-table-column>
				<el-table-column label="序号" align="center" width="70">
					<template slot-scope="scope">
						<span>{{ scope.row.xuhao }}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="80">
					<template slot-scope="scope">
						<span>{{ scope.row.status === 1 ? '正常' : '已冻结' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="民宿等级" align="center" width="160">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 1">银宿级</span>
						<span v-else-if="scope.row.type == 2">金宿级</span>
						<span v-else="scope.row.type == 3">白金级</span>
					</template>
				</el-table-column>
				<el-table-column label="民宿名称" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.hotelName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="联系人(法人)" align="center" width="160">
					<template slot-scope="scope">
						<span>{{ scope.row.corpnName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="联系电话" align="center" width="160">
					<template slot-scope="scope">
						<span>{{ scope.row.corpnPhone }}</span>
					</template>
				</el-table-column>
				<el-table-column label="所属乡镇" align="center" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.hotelTownshipName}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;">
				<el-pagination @current-change="minsuCurrentPageChange" :current-page.sync="minsuPagination.currentPage" :page-size="minsuPagination.pageSize"
					layout="prev, pager, next, jumper" :total="minsuPagination.total">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 优惠券 -->
		<el-dialog width="1200px" style="height: 760px;" title="优惠券/代金券" :visible.sync="youhuiquanVisible" append-to-body :close-on-click-modal="false"
			:close-on-press-escape="false">
			<div style="display: flex; justify-content: space-around;">
				<el-form :inline="true" :model="youhuiquanFormInline" class="demo-form-inline">
					<el-form-item label="名称">
						<el-input v-model="youhuiquanFormInline.title" style="width: 200px;" prefix-icon="el-icon-search" clearable
							placeholder="请输入优惠券名称"></el-input>
					</el-form-item>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="btn-search" @click="youhuiquan_btn_search">查询</el-button>
					</el-form-item>
				</el-form>
				<div>
					<el-button type="primary" class="btn-search" @click="select_youhuiquan_OK">确定</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" id="youhuiquan_table" :data="youhuiquanTableData" height="396" style="width: 100%" :cell-style="cell_style"
				v-loading="youhuiquanLoading" :header-cell-style="header_cell_style" @selection-change="youhuiquanSelectionChange">
				<el-table-column type="selection" width="50" :selectable="youhuiquanIsSelectable">
				</el-table-column>
				<el-table-column label="序号" align="center" fixed width="70">
					<template slot-scope="scope">
						<span>{{ scope.row.xuhao }}</span>
					</template>
				</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" 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="308">
					<template slot-scope="scope">
						<span>{{ scope.row.grantStartDate }} ～ {{ scope.row.grantEndDate }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleDetailClick(scope.row)" type="text" size="small">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;">
				<el-pagination @current-change="youhuiquanCurrentPageChange" :current-page.sync="youhuiquanPagination.currentPage"
					:page-size="youhuiquanPagination.pageSize" layout="prev, pager, next, jumper" :total="youhuiquanPagination.total">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 攻略（推文） -->
		<el-dialog width="1300px" style="height: 860px;" title="攻略（推文）" :visible.sync="gonglueVisible" append-to-body :close-on-click-modal="false"
			:close-on-press-escape="false">
			<div style="display: flex; justify-content: space-around; align-items: flex-start;">
				<el-form :inline="true" :model="gonglueFormInline" class="demo-form-inline">
					<el-form-item label="标题或发布人">
						<el-input v-model="gonglueFormInline.title" style="width: 200px;" prefix-icon="el-icon-search" clearable
							placeholder="标题或发布人"></el-input>
					</el-form-item>
					<el-form-item label="创建时间">
						<el-date-picker v-model="gonglueFormInline.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="gonglue_btn_search">查询</el-button>
					</el-form-item>
				</el-form>
				<div style="display: flex; justify-content: space-between; align-items: center;">
					<el-checkbox v-model="gonglue_index_page" :disabled="!(gonglueSelectedRow === null || gonglueSelectedRow === row)"
						style="margin-right: 10px;">攻略首页</el-checkbox>
					<el-button type="primary" class="btn-search" @click="select_gonglue_OK">确定</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" id="gonglue_table" :data="gonglueTableData" height="500" style="width: 100%" :cell-style="cell_style"
				v-loading="gonglueLoading" :header-cell-style="header_cell_style" @selection-change="gonglueSelectionChange">
				<el-table-column type="selection" width="50" :selectable="gonglueIsSelectable">
				</el-table-column>
				<el-table-column label="序号" align="center" fixed width="70">
					<template slot-scope="scope">
						<span>{{ scope.row.xuhao }}</span>
					</template>
				</el-table-column>
				<el-table-column label="标题" align="center" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="描述" align="center">
					<template slot-scope="scope">
						<div style="position: relative;">
							<el-input type="textarea" placeholder="请输入内容" v-model="scope.row.content" rows="8" resize="none" readonly></el-input>
							</el-input>
							<span style="position: absolute; right: 25px; bottom: 5px; color: #999;">字数: {{ scope.row.content.length }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center" width="280px">
					<template slot-scope="scope">
						<div v-if="typeof scope.row.urls != 'string'">
							<div id="showImgVideo" v-if="typeof scope.row.urls !== 'string'">
								<div v-if="scope.row.urls[0].split(',')[0].endsWith('.jpg') || scope.row.urls[0].split(',')[0].endsWith('.png')"
									style="cursor: pointer;">
									<viewer :images="viewerImage.gonglue_imgs">
										<el-carousel indicator-position="inside" :interval="4000">
											<el-carousel-item v-for="(url, index) in scope.row.urls[0].split(',')" :key="index">
												<img :src="url" style="height: 180px;">
											</el-carousel-item>
										</el-carousel>
									</viewer>
								</div>
								<div v-else-if="scope.row.urls[0].split(',')[0].endsWith('.mp4')">
									<video controls style="height: 180px; width: 100%;">
										<source :src="scope.row.urls[0].split(',')[0]" type="video/mp4">
									</video>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.createDate }}</span>
					</template>
				</el-table-column>
				<el-table-column label="发布人" align="center" width="100">
					<template slot-scope="scope">
						<span>{{ scope.row.userName }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;">
				<el-pagination @current-change="gonglueCurrentPageChange" :current-page.sync="gongluePagination.currentPage"
					:page-size="gongluePagination.pageSize" layout="prev, pager, next, jumper" :total="gongluePagination.total">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 商品 -->
		<el-dialog width="1300px" style="height: 860px;" title="商品" :visible.sync="shangpinVisible" append-to-body :close-on-click-modal="false"
			:close-on-press-escape="false">
			<div style="display: flex; justify-content: space-around; align-items: flex-start;">
				<el-form :inline="true" :model="shangpinFormInline" class="demo-form-inline">
					<el-form-item label="商品名称">
						<el-input v-model="shangpinFormInline.key" 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="shangpin_btn_search">查询</el-button>
					</el-form-item>
				</el-form>
				<div style="display: flex; justify-content: space-between; align-items: center;">
					<el-checkbox v-model="shangpin_index_page" :disabled="!(shangpinSelectedRow === null || shangpinSelectedRow === row)"
						style="margin-right: 10px;">商品首页</el-checkbox>
					<el-button type="primary" class="btn-search" @click="select_shangpin_OK">确定</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" id="shangpin_table" :data="shangpinTableData" height="500" style="width: 100%" :cell-style="cell_style"
				v-loading="shangpinLoading" :header-cell-style="header_cell_style" @selection-change="shangpinSelectionChange">
				<el-table-column type="selection" width="50" :selectable="shangpinIsSelectable">
				</el-table-column>
				<el-table-column label="序号" align="center" width="70">
					<template slot-scope="scope">
						<span>{{ scope.row.xuhao }}</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="150">
					<template slot-scope="scope">
						<span>{{ scope.row.price }}</span>
					</template>
				</el-table-column>
				<el-table-column label="商品库存" align="center" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.stockNum }}</span>
					</template>
				</el-table-column>
				<el-table-column label="商品图片" align="center" width="280px">
					<template slot-scope="scope">
						<div v-if="typeof scope.row.imgs == 'string'">
							<viewer :images="viewerImage.shangpin_imgs" style="cursor: pointer;">
								<img :src="scope.row.imgs" style="height: 180px;">
							</viewer>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;">
				<el-pagination @current-change="shangpinCurrentPageChange" :current-page.sync="shangpinPagination.currentPage"
					:page-size="shangpinPagination.pageSize" layout="prev, pager, next, jumper" :total="shangpinPagination.total">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 鼠标悬停显示图片预览 -->
		<el-dialog :visible="showPreview" @update:visible="showPreview = $event" @close="closeDialog" width="500px">
			<div style="height: 450px; width: 450px; display: flex; align-items: center; justify-content: center;"
				:style="{ backgroundColor: backgroundColor }">
				<img :src="formAD.showImageUrl" style="width: 450px;" />
			</div>
		</el-dialog>
		<!-- 代金劵详情 -->
		<el-dialog title="优惠券详情" custom-class="shou-info-voucher-class" :visible.sync="dialogVoucherVisible" @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="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>
	</div>
</template>

<script>
	import {
		getTableData,
		addAD,
		modifyAD,
		delAD,
		getMinsuTableData,
		getYouhuiquanTableData,
		getGonglueTableData,
		getShangpinTableData,
		ead
	} from '@/api/adMgr';

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

	import {
		valid
	} from 'mockjs'

	import moment from 'moment';

	import COS from 'cos-js-sdk-v5'

	export default {
		data() {
			return {
				cosVal: {
					SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
					SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
					SecurityToken: "1320402385",
					Bucket: "jinganminsu-1320402385",
					Region: "ap-nanjing",
				},
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				dialogImageUrl: '',
				formLabelWidth: '120px',
				// 表格单元格样式
				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: {
					options: [{
						id: 1,
						label: '开启'
					}, {
						id: 0,
						label: '禁用'
					}],
					status: '',
					search_datatime: '',
					title: ''
				},
				minsuFormInline: { // 民宿查询参数
					adminName: ''
				},
				youhuiquanFormInline: { // 优惠券查询参数
					search_datatime: '',
					title: ''
				},
				gonglueFormInline: { // 攻略查询参数
					search_datatime: '',
					title: ''
				},
				shangpinFormInline: { // 商品查询参数
					key: ''
				},
				shangpin_index_page: '', // 商品首页
				gonglue_index_page: '', // 攻略首页
				tableData: [],
				minsuTableData: [], // 民宿表格数据
				youhuiquanTableData: [], // 优惠券表格数据
				shangpinTableData: [], // 商品表格数据
				gonglueTableData: [], // 攻略（推文）表格数据
				viewerImage: { // viewer显示图片的
					gonglue_imgs: [],
					shangpin_imgs: [],
				},
				cond_data: {},
				minsuCond_data: {}, // 民宿查询条件
				shangpinCond_data: {}, // 商品查询条件
				youhuiquanCond_data: {}, // 优惠券查询条件
				gonglueCond_data: {}, // 攻略查询条件
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				minsuPagination: { // 民宿分页
					currentPage: 1,
					pageSize: 7,
					total: 0
				},
				youhuiquanPagination: { // 优惠券分页
					currentPage: 1,
					pageSize: 6,
					total: 0
				},
				gongluePagination: { // 攻略分页
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				shangpinPagination: { // 商品分页
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				loading: true,
				minsuLoading: true, // 民宿加载
				youhuiquanLoading: true, // 优惠券加载
				shangpinLoading: true, // 商品加载
				gonglueLoading: true, // 攻略加载
				dialogModifyADFormVisible: false, // 修改广告
				dialogADFormVisible: false, // 添加广告
				dialogCouponVisible: false, // 优惠券
				dialogVoucherVisible: false, // 代金券
				minsuSelectedRow: null, // 选中的民宿
				youhuiquanSelectedRow: null, // 选中的优惠券
				gonglueSelectedRow: null, // 选中的优惠券
				shangpinSelectedRow: null, // 选中的优惠券
				coupon: {},
				minsuVisible: false, // 选择民宿页面，内层窗口
				youhuiquanVisible: false, // 选择优惠券页面，内层窗口
				gonglueVisible: false, // 选择攻略（推文）页面，内层窗口
				minsuVisible: false, // 民宿
				shangpinVisible: false, // 商品
				imgs: {
					img1: require('../../icons/images/ad/1.png'),
					img2: require('../../icons/images/ad/2.png'),
					img3: require('../../icons/images/ad/3.jpg'),
				},
				formAD: {
					id: '', // id
					adTitle: '', // 广告标题
					imageUrl: '', // 上传成功的图片
					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
					url3: require('../../icons/images/ad/bai.png'), // LOGO样式图片：白色
					showImageUrl: '', // 预览图片
					logoStyle: '', // 样式的值
					logoStyleValue: '', // 样式的值
					checkedTypes: 1, // 跳转类型
					adStatus: true, // 广告状态
					adOrder: 1, // 排序
					adLink: '', // 网页链接
					adPage: '', // 小程序页面
					adPageId: '', // 页面id
					jumpDirection: '', // 跳转产品，值有：民宿、优惠券、攻略、商品
					adSelectClass: '请选择' // 产品右边的选择文本
				},
				formModifyAD: {
					id: '', // id
					adTitle: '', // 广告标题
					imageUrl: '', // 上传成功的图片
					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
					url3: require('../../icons/images/ad/bai.png'), // LOGO样式图片：白色
					showImageUrl: '', // 预览图片
					logoStyle: '', // 样式的值
					logoStyleValue: '', // 样式的值
					checkedTypes: 1, // 跳转类型
					adStatus: true, // 广告状态
					adOrder: 1, // 排序
					adLink: '', // 网页链接
					adPage: '', // 小程序页面
					adPageId: '', // 页面id
					jumpDirection: '', // 跳转产品，值有：民宿、优惠券、攻略、商品
					adSelectClass: '请选择' // 产品右边的选择文本
				},
				addModify: false, // 判断是添加还是修改状态
				cascaderProps: {
					multiple: false,
					showSearch: true,
					placeholder: '请选择民宿、优惠券、攻略、商品',
				},
				previewTimer: null, // 定时对象
				showPreview: false, // 鼠标悬停显示图片预览
				backgroundColor: '#9d9d9d',
				selected_1: false, // 控制LOGO样式
				selected_2: false, // 控制LOGO样式
				selected_3: false, // 控制LOGO样式
				selectedModify_1: false, // 控制LOGO样式
				selectedModify_2: false, // 控制LOGO样式
				selectedModify_3: false, // 控制LOGO样式
				formADRules: {
					adTitle: [{
							required: true,
							message: '请输入标题',
							trigger: 'blur'
						}, {
							required: true,
							message: '请输入标题',
							trigger: 'change'
						},
						{
							max: 20,
							message: '标题长度不能超过20个字符',
							trigger: 'blur'
						}
					],
					imageUrl: [{
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}],
					adLink: [{
						required: true,
						message: '请输入链接',
						trigger: 'blur'
					}, {
						required: true,
						message: '请输入链接',
						trigger: 'change'
					}],
					adPage: [{
						required: true,
						message: '请选择民宿、优惠券、攻略、商品',
						trigger: 'blur'
					}, {
						required: true,
						message: '请选择民宿、优惠券、攻略、商品',
						trigger: 'change'
					}],
				}
			}
		},
		filters: {
			truncateDate(value) {
				return value.substring(0, value.length - 2);
			}
		},
		created() {
			// 检测权限
			if (this.currentUserLevel !== 2) {
				this.$router.replace({
					path: '/data'
				})
				return
			}
			// 获取消费记录,表格数据
			this.get_table_data('list')
			// 优惠券列表数据
			this.get_youhuiquan_table_data('list')
			// 攻略列表数据
			this.get_gonglue_table_data('list')
			// 民宿表数据
			this.get_minsu_table_data('list')
			// 商品表数据
			this.get_shangpin_table_data('list')
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			enablingAndDisabling(row, state) {
				let data = {}
				data.id = row.id;
				data.state = state;

				var that = this;
				// console.log(data);
				ead(data).then((res) => {
					// console.log(res);
					if (res.code === 200) {
						this.get_table_data('list');
						that.$message.success(res.message);
					} else {
						that.$message.warning(res.message);
					}
				}).catch((err) => {
					that.$message.error(err.message);
				});
			},
			// 民宿只能单选
			minsuIsSelectable(row, index) {
				return this.minsuSelectedRow === null || this.minsuSelectedRow === row;
			},
			// 优惠券只能单选
			youhuiquanIsSelectable(row, index) {
				return this.youhuiquanSelectedRow === null || this.youhuiquanSelectedRow === row;
			},
			// 攻略只能单选
			gonglueIsSelectable(row, index) {
				if (this.gonglue_index_page == true) {
					return false;
				}

				return this.gonglueSelectedRow === null || this.gonglueSelectedRow === row;
			},
			// 商品只能单选
			shangpinIsSelectable(row, index) {
				if (this.shangpin_index_page == true) {
					return false;
				}

				return this.shangpinSelectedRow === null || this.shangpinSelectedRow === row;
			},
			// 民宿选择改变
			minsuSelectionChange(selection) {
				// console.log(selection)
				if (selection && selection.length > 0) {
					this.minsuSelectedRow = selection[0]; // 只获取第一条选中的记录
				} else {
					this.minsuSelectedRow = null;
				}
			},
			// 优惠券选择改变
			youhuiquanSelectionChange(selection) {
				if (selection && selection.length > 0) {
					this.youhuiquanSelectedRow = selection[0]; // 只获取第一条选中的记录
				} else {
					this.youhuiquanSelectedRow = null;
				}
			},
			// 攻略选择改变
			gonglueSelectionChange(selection) {
				if (selection && selection.length > 0) {
					this.gonglueSelectedRow = selection[0]; // 只获取第一条选中的记录
				} else {
					this.gonglueSelectedRow = null;
				}
			},
			// 商品选择改变
			shangpinSelectionChange(selection) {
				if (selection && selection.length > 0) {
					this.shangpinSelectedRow = selection[0]; // 只获取第一条选中的记录
				} else {
					this.shangpinSelectedRow = null;
				}
			},
			/**
			 * 点击查看优惠券详情，弹出优惠券详情对话框
			 * @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_minsu_table_data(param) {
				this.minsuLoading = true;
				this.get_minsu_condtion();

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

				var that = this
				// console.log(data);
				getMinsuTableData(data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						let tempData = res.data.pageList;
						if (typeof tempData !== 'undefined' && tempData !== '') {
							this.minsuPagination.total = res.data.total
							this.minsuTableData = []
							for (var i = 0; i < tempData.length; i++) {
								tempData[i].xuhao = (this.minsuPagination.currentPage - 1) * this.minsuPagination.pageSize + i + 1
								this.minsuTableData.push(tempData[i])
							}
						} else {
							this.minsuTableData = []
							this.$message.warning('没有符合条件的数据！')
						}
					} else {
						that.minsuTableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				this.minsuLoading = false;
			},
			// 商品数据列表
			get_shangpin_table_data(param) {
				this.shangpinLoading = true;
				this.get_shangpin_condtion();

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

				var that = this
				// console.log(data);
				getShangpinTableData(data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						let tempData = res.data.list;
						if (typeof tempData !== 'undefined' && tempData !== '') {
							this.shangpinPagination.total = res.data.totalCount
							this.shangpinTableData = []
							for (var i = 0; i < tempData.length; i++) {
								tempData[i].xuhao = (this.shangpinPagination.currentPage - 1) * this.shangpinPagination.pageSize + i + 1
								this.shangpinTableData.push(tempData[i])
							}
						} else {
							this.shangpinTableData = []
							this.$message.warning('没有符合条件的数据！')
						}
					} else {
						that.shangpinTableData = []
						that.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				this.shangpinLoading = false;
			},
			// 优惠劵数据列表
			get_youhuiquan_table_data(param) {
				this.youhuiquanLoading = true;
				this.get_youhuiquan_condtion();

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

				var that = this
				// console.log(data);
				getYouhuiquanTableData(data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						var d = res.data
						that.youhuiquanPagination.total = d.total
						that.youhuiquanTableData = []
						for (var i = 0; i < d.pageList.length; i++) {
							d.pageList[i].xuhao = (this.youhuiquanPagination.currentPage - 1) * this.youhuiquanPagination.pageSize + i + 1
							that.youhuiquanTableData.push(d.pageList[i])
						}
					} else {
						that.youhuiquanTableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				this.youhuiquanLoading = false;
			},
			// 攻略列表数据
			get_gonglue_table_data(param) {
				this.gonglueLoading = true;
				this.get_gonglue_condtion();

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

				var that = this
				// console.log(data);
				getGonglueTableData(data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						var d = res.data
						that.gongluePagination.total = d.total
						that.gonglueTableData = []
						for (var i = 0; i < d.pageList.length; i++) {
							d.pageList[i].xuhao = (this.gongluePagination.currentPage - 1) * this.gongluePagination.pageSize + i + 1
							let t = d.pageList[i].createDate
							if (typeof t === 'number') {
								d.pageList[i].createDate = moment(t).format('YYYY-MM-DD HH:mm:ss');
							} else if (typeof t === 'string') {
								d.pageList[i].createDate = t.slice(0, 19);
							} else {
								that.$message.error('创建时间转换失败！')
							}
							that.gonglueTableData.push(d.pageList[i])
						}
					} else {
						that.gonglueTableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				this.gonglueLoading = false;
			},
			// 民宿条件查询
			get_minsu_condtion() {
				let data = {
					page: this.minsuPagination.currentPage,
					rows: this.minsuPagination.pageSize
				}

				if (this.minsuFormInline.adminName !== '') {
					data.adminName = this.minsuFormInline.adminName
				}

				this.minsuCond_data = data;
			},
			// 优惠券条件查询
			get_youhuiquan_condtion() {
				let data = {
					page: this.youhuiquanPagination.currentPage,
					rows: this.youhuiquanPagination.pageSize
				}

				if (this.youhuiquanFormInline.title !== '') {
					data.title = this.youhuiquanFormInline.title
				}

				this.youhuiquanCond_data = data;
			},
			// 攻略条件查询
			get_gonglue_condtion() {
				let data = {
					page: this.gongluePagination.currentPage,
					rows: this.gongluePagination.pageSize
				}

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

				if (this.gonglueFormInline.title !== '') {
					data.title = this.gonglueFormInline.title
				}

				this.gonglueCond_data = data;
			},
			// 商品条件查询
			get_shangpin_condtion() {
				let data = {
					page: this.shangpinPagination.currentPage,
					rows: this.shangpinPagination.pageSize
				}

				if (this.shangpinFormInline.key !== '') {
					data.key = this.shangpinFormInline.key
				}

				this.shangpinCond_data = data;
			},
			// 民宿选择完成
			select_minsu_OK() {
				if (this.minsuSelectedRow === null) {
					this.$message.error('请选择民宿！');
					return;
				}
				if (this.addModify == true) {
					this.formAD.adPage = this.minsuSelectedRow.hotelName;
					this.formAD.adPageId = this.minsuSelectedRow.id;
					this.formAD.jumpDirection = '民宿';
					this.formAD.adSelectClass = '民宿';
				} else {
					this.formModifyAD.adPage = this.minsuSelectedRow.hotelName;
					this.formModifyAD.adPageId = this.minsuSelectedRow.id;
					this.formModifyAD.jumpDirection = '民宿';
					this.formModifyAD.adSelectClass = '民宿';
				}
				this.minsuVisible = false;
			},
			// 优惠券选择完成
			select_youhuiquan_OK() {
				if (this.youhuiquanSelectedRow === null) {
					this.$message.error('请选择优惠券！');
					return;
				}

				if (this.addModify == true) {
					this.formAD.adPage = this.youhuiquanSelectedRow.name;
					this.formAD.adPageId = this.youhuiquanSelectedRow.id;
					this.formAD.jumpDirection = '优惠券';
					this.formAD.adSelectClass = '优惠券';
				} else {
					this.formModifyAD.adPage = this.youhuiquanSelectedRow.name;
					this.formModifyAD.adPageId = this.youhuiquanSelectedRow.id;
					this.formModifyAD.jumpDirection = '优惠券';
					this.formModifyAD.adSelectClass = '优惠券';
				}
				this.youhuiquanVisible = false;
			},
			// 攻略（推文）选择完成
			select_gonglue_OK() {
				if (this.gonglueSelectedRow === null && this.gonglue_index_page == false) {
					this.$message.error('请选择攻略！');
					return;
				}
				if (this.addModify == true) {
					if (this.gonglue_index_page == true) {
						this.formAD.adPage = '攻略首页';
						this.formAD.adPageId = '首页';
					} else {
						this.formAD.adPage = this.gonglueSelectedRow.title;
						this.formAD.adPageId = this.gonglueSelectedRow.id;
					}
					this.formAD.jumpDirection = '攻略';
					this.formAD.adSelectClass = '攻略';
				} else {
					if (this.gonglue_index_page == true) {
						this.formModifyAD.adPage = '攻略首页';
						this.formModifyAD.adPageId = '首页';
					} else {
						this.formModifyAD.adPage = this.gonglueSelectedRow.title;
						this.formModifyAD.adPageId = this.gonglueSelectedRow.id;
					}
					this.formModifyAD.jumpDirection = '攻略';
					this.formModifyAD.adSelectClass = '攻略';
				}
				this.gonglueVisible = false;
			},
			// 商品选择完成
			select_shangpin_OK() {
				if (this.shangpinSelectedRow === null && this.shangpin_index_page == false) {
					this.$message.error('请选择商品！');
					return;
				}
				if (this.addModify == true) {
					if (this.shangpin_index_page == true) {
						this.formAD.adPage = '商品首页';
						this.formAD.adPageId = '首页';
					} else {
						this.formAD.adPage = this.shangpinSelectedRow.name;
						this.formAD.adPageId = this.shangpinSelectedRow.id;
					}
					this.formAD.jumpDirection = '商品';
					this.formAD.adSelectClass = '商品';
				} else {
					if (this.shangpin_index_page == true) {
						this.formModifyAD.adPage = '商品首页';
						this.formModifyAD.adPageId = '首页';
					} else {
						this.formModifyAD.adPage = this.shangpinSelectedRow.name;
						this.formModifyAD.adPageId = this.shangpinSelectedRow.id;
					}
					this.formModifyAD.jumpDirection = '商品';
					this.formModifyAD.adSelectClass = '商品';
				}
				this.shangpinVisible = false;
			},
			clearSelectClass() {
				this.formAD.adSelectClass = '请选择';
			},
			// 选择那个页面菜单下来类别
			handleCommand(command) {
				if (command.startsWith("modify_")) {
					this.addModify = false;
				} else {
					this.addModify = true;
				}

				if (command == 'youhuiquan' || command == 'modify_youhuiquan') {
					this.youhuiquanVisible = true;
				} else if (command == 'minsu' || command == 'modify_minsu') {
					this.minsuVisible = true;
				} else if (command == 'gonglue' || command == 'modify_gonglue') {
					this.gonglueVisible = true;
				} else if (command == 'shangpin' || command == 'modify_shangpin') {
					this.shangpinVisible = true;
				}
			},
			closeDialog() {
				clearTimeout(this.previewTimer);
				this.showPreview = false;
				this.formAD.showImageUrl = '';
			},
			// 添加广告右键单击
			handleRightClick(param) {
				event.preventDefault();
				if (param == 1) {
					this.formAD.showImageUrl = this.formAD.url1
					this.backgroundColor = '#fff'
				} else if (param == 2) {
					this.formAD.showImageUrl = this.formAD.url2
					this.backgroundColor = '#fff'
				} else {
					this.formAD.showImageUrl = this.formAD.url3
					this.backgroundColor = '#9d9d9d'
				}
				this.showPreview = true
			},
			// 获取LOGO样式
			getStyle(value) {
				if (value == 1) {
					this.formAD.logoStyleValue = value;
					this.selected_1 = !this.selected_1;
					if (this.selected_1 == true) {
						this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
					} else {
						this.formAD.logoStyle = '';
					}
					this.selected_2 = false;
					this.selected_3 = false;
				} else if (value == 2) {
					this.formAD.logoStyleValue = value;
					this.selected_2 = !this.selected_2;
					if (this.selected_2 == true) {
						this.formAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
					} else {
						this.formAD.logoStyle = '';
					}
					this.selected_1 = false;
					this.selected_3 = false;
				} else {
					this.formAD.logoStyleValue = value;
					this.selected_3 = !this.selected_3;
					if (this.selected_3 == true) {
						this.formAD.logoStyle =
							'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240330212452_4dafae643d6143d38ef48e6cecc0ba0.png';
					} else {
						this.formAD.logoStyle = '';
					}
					this.selected_1 = false;
					this.selected_2 = false;
				}
			},
			// 获取修改LOGO样式
			getModifyStyle(value) {
				if (value == 1) {
					this.formModifyAD.logoStyleValue = value;
					this.selectedModify_1 = !this.selectedModify_1;
					if (this.selectedModify_1 == true) {
						this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
					} else {
						this.formModifyAD.logoStyle = '';
					}
					this.selectedModify_2 = false;
					this.selectedModify_3 = false;
				} else if (value == 2) {
					this.formModifyAD.logoStyleValue = value;
					this.selectedModify_2 = !this.selectedModify_2;
					if (this.selectedModify_2 == true) {
						this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
					} else {
						this.formModifyAD.logoStyle = '';
					}
					this.selectedModify_1 = false;
					this.selectedModify_3 = false;
				} else {
					this.formModifyAD.logoStyleValue = value;
					this.selectedModify_3 = !this.selectedModify_3;
					if (this.selectedModify_3 == true) {
						this.formModifyAD.logoStyle =
							'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240330212452_4dafae643d6143d38ef48e6cecc0ba0.png';
					} else {
						this.formModifyAD.logoStyle = '';
					}
					this.selectedModify_1 = false;
					this.selectedModify_2 = false;
				}
			},
			// 删除广告
			delAd(row) {
				this.$confirm('将永久删除【' + row.title + '】广告，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					delAD(row.id).then((res) => {
						// console.log(res.data);
						if (res.code === 200) {
							this.get_table_data('list')
							this.$message.success(res.message)
						} else {
							this.$message.warning(res.message)
						}
					}).catch((err) => {
						this.$message.error(err.message)
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 修改广告
			modifyAd(row) {
				this.dialogModifyADFormVisible = true;

				this.formModifyAD.id = row.id;
				this.formModifyAD.adTitle = row.title;
				this.formModifyAD.imageUrl = row.imageUrl;
				if (row.logoUrl == 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png') {
					this.formModifyAD.logoStyleValue = 1
					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145048_1.png';
					this.selectedModify_1 = true;
					this.selectedModify_2 = false;
				} else {
					this.formModifyAD.logoStyleValue = 2
					this.formModifyAD.logoStyle = 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20240306145140_2.png';
					this.selectedModify_1 = false;
					this.selectedModify_2 = true;
				}
				if (row.jumpWay == '网页') {
					this.formModifyAD.checkedTypes = 1;
					this.formModifyAD.adLink = row.jumpDirection;
				} else if (row.jumpWay == '小程序') {
					this.formModifyAD.checkedTypes = 2;
					this.formModifyAD.jumpDirection = row.jumpDirection;
					this.formModifyAD.adSelectClass = row.jumpDirection;
					this.formModifyAD.adPage = row.subTitle;
					this.formModifyAD.adPageId = row.jumpPoint;
				} else {
					this.formModifyAD.checkedTypes = 3;
				}
				if (row.state == 0) {
					this.formModifyAD.adStatus = false;
				} else {
					this.formModifyAD.adStatus = true;
				}
				this.formModifyAD.adOrder = row.sortLevel;
			},
			// 修改广告
			handleModifyADAddClick() {
				this.$refs.formModifyADRule.validate((valid) => {
					if (valid) {
						// 表单验证通过，可以继续提交表单数据
						modifyAD(this.formModifyAD).then((res) => {
							// console.log(res.data);
							if (res.code === 200) {
								this.get_table_data('search')
								this.$message.success(res.message)
								this.resetModifyADForm();
								this.dialogModifyADFormVisible = false;
							} else {
								this.$message.warning(res.message)
							}
						}).catch((err) => {
							this.$message.error(err.message)
						});
					} else {
						// 表单验证未通过，显示错误消息或其他处理
						this.$message.warning('表单验证未通过');
					}
				});
			},
			// 重置修改广告参数
			resetModifyADForm() {
				this.formModifyAD = {
					id: '', // id
					adTitle: '', // 广告标题
					imageUrl: '', // 上传成功的图片
					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
					showImageUrl: '', // 预览图片
					logoStyle: '', // 样式
					logoStyleValue: '', // 样式的值
					checkedTypes: 1, // 跳转类型
					adStatus: true, // 广告状态
					adOrder: 1, // 排序
					adLink: '', // 网页链接
					adPage: '', // 小程序页面
					adPageId: '', // 页面id
					jumpDirection: '', // 跳转产品，值有：民宿、优惠券、攻略、商品
					adSelectClass: '请选择'
				};
				this.selected_2 = false;
				this.selected_1 = false;
			},
			// 添加广告
			handleADAddClick() {
				this.$refs.formADRule.validate((valid) => {
					if (valid) {
						// 表单验证通过，可以继续提交表单数据
						addAD(this.formAD).then((res) => {
							// console.log(res.data);
							if (res.code === 200) {
								this.get_table_data('search')
								this.$message.success(res.message)
								this.resetADForm();
								this.dialogADFormVisible = false;
							} else {
								this.$message.warning(res.message)
							}
						}).catch((err) => {
							this.$message.error(err.message)
						});
					} else {
						// 表单验证未通过，显示错误消息或其他处理
						this.$message.warning('表单验证未通过');
					}
				});
			},
			// 重置添加广告参数
			resetADForm() {
				this.formAD = {
					id: '', // id
					adTitle: '', // 广告标题
					imageUrl: '', // 上传成功的图片
					url1: require('../../icons/images/ad/fang.jpg'), // LOGO样式图片：矩形
					url2: require('../../icons/images/ad/yuan.png'), // LOGO样式图片：圆形
					showImageUrl: '', // 预览图片
					logoStyle: '', // 样式
					logoStyleValue: '', // 样式的值
					checkedTypes: 1, // 跳转类型
					adStatus: true, // 广告状态
					adOrder: 1, // 排序
					adLink: '', // 网页链接
					adPage: '', // 小程序页面
					adPageId: '', // 页面id
					jumpDirection: '', // 跳转产品，值有：民宿、优惠券、攻略、商品
					adSelectClass: '请选择'
				};
				this.selected_2 = false;
				this.selected_1 = false;
			},
			/**
			 * 显示添加广告对话框
			 */
			handleAD() {
				this.dialogADFormVisible = true;
			},
			// 上传图片到cos
			uploadImageClick() {
				this.$refs.addImageUploadInput.click();
			},
			// 上传图片到cos
			uploadModifyImageClick() {
				this.$refs.modifyImageUploadInput.click();
			},
			// 上传图片
			uploadImage(event, imgOrVideo) {
				const file = event.target.files[0];

				if (file) {
					// 检查文件大小
					if (file.size > 5 * 1024 * 1024) {
						this.$message.warning('图片大小不能超过 5M');
						return;
					}

					// 其他上传逻辑
					this.uploadImageAction(file, imgOrVideo);
				}

			},
			// 实现上传
			uploadImageAction(file, imgOrVideo) {
				const key = `/uploads/ad/${new Date().getTime()}`; // 设置上传到 COS 后的文件名
				var that = this
				const cos = new COS(this.cosVal);
				cos.putObject({
						Bucket: "jinganminsu-1320402385",
						Region: "ap-nanjing",
						Key: key,
						Body: file,
					},
					function(err, data) {
						if (err) {
							// console.error(err);
							that.$message.error(err);
							if (imgOrVideo == 'addImg') {
								that.$set(that.formAD, 'imageUrl', '')
							} else if (imgOrVideo == 'modifyImg') {
								that.$set(that.formModifyAD, 'imageUrl', '')
							}
							return;
						} else {
							// console.log(data);
							if (!isEmpty(`${data.Location}`)) {
								if (imgOrVideo == 'addImg') {
									that.$set(that.formAD, 'imageUrl', `https://${data.Location}`)
								} else if (imgOrVideo == 'modifyImg') {
									that.$set(that.formModifyAD, 'imageUrl', `https://${data.Location}`)
								}
							} else {
								if (imgOrVideo == 'addImg') {
									that.$set(that.formAD, 'imageUrl', '')
								} else if (imgOrVideo == 'modifyImg') {
									that.$set(that.formModifyAD, 'imageUrl', '')
								}
							}
						}
					}
				);
			},
			/**
			 * 获取广告记录,表格数据
			 */
			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);
					if (res.code === 200 && res.rows != '') {
						that.pagination.total = res.total
						that.tableData = []
						for (var i = 0; i < res.rows.length; i++) {
							that.tableData.push(res.rows[i])
						}
						if (that.tableData.length == 0 && (that.pagination.currentPage - 1) > 0) {
							that.pagination.currentPage = that.pagination.currentPage - 1;
							// that.$set(that.pagination, 'currentPage', that.pagination.currentPage - 1);
							that.get_table_data('list');
						}
					} else {
						that.tableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					that.$message.error(err.message)
				});
				that.loading = false;
			},
			/**
			 * 查询条件
			 */
			get_condtion() {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}

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

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

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

				this.cond_data = data;
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			// 民宿查找按钮事件
			minsu_btn_search() {
				this.get_minsu_table_data('search')
			},
			// 优惠券查找按钮事件
			youhuiquan_btn_search() {
				this.get_youhuiquan_table_data('search')
			},
			// 攻略（推文）查找按钮事件
			gonglue_btn_search() {
				this.get_gonglue_table_data('search')
			},
			// 商品查找按钮事件
			shangpin_btn_search() {
				this.get_shangpin_table_data('search')
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			},
			// 民宿分页查询
			minsuCurrentPageChange(val) {
				this.minsuPagination.currentPage = val
				this.get_minsu_table_data('pages')
			},
			// 优惠券分页查询
			youhuiquanCurrentPageChange(val) {
				this.youhuiquanPagination.currentPage = val
				this.get_youhuiquan_table_data('pages')
			},
			// 攻略分页查询
			gonglueCurrentPageChange(val) {
				this.gongluePagination.currentPage = val
				this.get_gonglue_table_data('pages')
			},
			// 商品分页查询
			shangpinCurrentPageChange(val) {
				this.shangpinPagination.currentPage = val
				this.get_shangpin_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;
							}

							.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: 650px;
			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;
				}
			}
		}

		>>>.el-table__fixed-body-wrapper .el-table__body {
			padding-bottom: 17px !important; // 滚动条高度
		}

		>>>.el-table__fixed,
		>>>.el-table__fixed-right {
			height: calc(100% - 14px) !important;
		}
	}
</style>

<style>
	.add-ad-class {
		height: 750px !important;
	}

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

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

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

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		width: 150px;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 150px;
		height: 100px;
		display: block;
	}

	.selected {
		border: 2px solid #409EFF;
	}

	.unselected {
		border: 2px solid #f3f3f3;
	}

	#uploadImg .el-form-item__label,
	#logoStyle .el-form-item__label {
		margin-top: 30px;
	}

	.el-cascader-menu__wrap {
		height: 170px;
	}


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

		#panel .el-cascader {
			width: 90%;
		}
	}

	.shou-info-voucher-class {
		height: 580px !important;
	}

	.shou-info-coupon-class {
		height: 620px !important;
	}

	#showImgVideo {
		height: 180px;
	}

	#minsu_table table:first-child tr:first-child th:first-child {
		pointer-events: none;
	}

	#youhuiquan_table table:first-child tr:first-child th:first-child {
		pointer-events: none;
	}

	#gonglue_table table:first-child tr:first-child th:first-child {
		pointer-events: none;
	}

	#shangpin_table table:first-child tr:first-child th:first-child {
		pointer-events: none;
	}
	
	.scroll-container::-webkit-scrollbar {
	    width: 1px; /* 根据需要调整滚动条的宽度 */
	}
	
	.scroll-container::-webkit-scrollbar-track {
	    background-color: #ccc; /* 设置滚动条轨道的颜色 */
	}
	
	.scroll-container::-webkit-scrollbar-thumb {
	    background-color: rgba(9, 101, 98, 1); /* 设置滚动条滑块的颜色 */
	}
</style>