<template>
	<div>
		<!-- <div style="margin:2% 0;display: inline-block;">
				<el-input style="width: 180px;" @keydown.enter.native="select" clearable placeholder="请输入活动名称"
					v-model="integralName"></el-input>
			</div> -->
			<div style="text-align: right;">
				<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="selectHd">刷新
				</el-button>
				<!-- <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleansHs">重置
				</el-button> -->
			</div>
			<el-table v-loading="tableDataLoadingHd" :data="huodongData">
				<el-table-column prop="activityId" label="编号" width="80">
				</el-table-column>
				<el-table-column prop="activityTitle" label="活动名称" width="150">
				</el-table-column>
				<el-table-column prop="activityImage" label="活动图片" width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.activityImage">
							<div v-for="(item,index) in scope.row.activityImage.split(',')" :key="index"
								style="display: inline-block; margin: 3px;">
								<el-popover placement="top-start" title="" trigger="hover">
									<img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
									<img style="width: 300px; height: auto" :src="item" alt="">
								</el-popover>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="activityContent" label="活动内容">
					<template slot-scope="scope">
						<el-popover placement="top-start" title="" trigger="hover">
							<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
								slot="reference">{{scope.row.activityContent}}</div>
							<div style="width: 300px; height: auto;word-break: break-all;">{{scope.row.activityContent}}
							</div>
						</el-popover>
		
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="创建时间" width="160">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button size="mini" v-if="activityId!=scope.row.activityId" type="primary" @click="querenBtnHd(scope.row)" style="margin: 3px;">参加活动
						</el-button>
						
						<el-button v-else size="mini" type="primary" disabled style="margin: 3px;">已参加
						</el-button>
						
					</template>
				</el-table-column>
			</el-table>
			<!-- <div style="text-align: center;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 15, 20, 25]" :page-size="limitH" :current-page="pageH"
					layout="total,sizes, prev, pager, next" :total="huodongData.total">
				</el-pagination>
			</div> -->
		<!-- 活动详情 -->
		<el-dialog title="活动详情" :visible.sync="dialogFormVisibleXq" center>
			<div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">活动名称：</span>
					<span>{{xiangqingData.activityTitle}}</span>
				</div>
				<div style="margin-bottom: 10px;" v-if="xiangqingData.activityImage">
					<div style="width: 200px;display: inline-block;text-align: right;">活动图片：</div>
					<div class="imgs" v-for="(item,index) in xiangqingData.activityImage.split(',')" :key="index">
						<img width="100%" class="images" height="100%" :src="item" alt="">
					</div>
				</div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">活动详情：</span>
					<div class="divs" v-html="xiangqingData.activityContent" style="margin-left: 200px;width: 50%;">
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
			
</template>

<script>
	import {
		jsonp
	} from 'vue-jsonp'
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	var geocoder, map, markersArray = [];
	export default {
		data() {
			return {
				phone: '',
				nickName: '',
				limit: 10,
				page: 1,
				size11: 10,
				page11: 1,
				shopName1: '',
				isActivity: '',
				region: '',
				shopId: '',
				userIdList: '',
				shopName: '',
				userData: [], //用户集合
				openTime: '',
				closeTime: '',
				detailedAddress: '',
				shopLng: '',
				shopLat: '',
				percentage1: 0, //进度条
				img: [], //任务轮播图
				// img: '',
				classn: '',
				value: '',
				parentId: 0,
				parentIdnum: '',

				tableDataLoading: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				tableDataLoading11: false,
				dialogFormVisible: false,
				dialogFormVisible11: false, //用户列表
				typeDatas: {},
				typeDatas1: {},
				titles: '添加',
				// 地图相关
				longitude: '', //维度
				latitude: '', //经度
				loadingMap: true,
				BMap: '',
				map: '',
				geoc: '',
				keyword: '',
				showMap: false,
				pointLngLat: '',
				center: {
					lng: 109.45744048529967,
					lat: 36.49771311230842
				},
				storeAddress: [],
				storeAddre: '请选择城市',
				form: {
					province: '',
					city: '', //市
					district: '', //区
				},
				dialogImageUrl: [],
				dialogVisible: false,
				erweimaImg: '',
				activeName: 'first',
				shopTypeName: '',
				shopTypId: '',
				titles1: '',
				labels: [], //标签集合
				bq: '', //输入的标签名
				province: '',
				city: '', //市
				district: '', //区
				options: regionData,
				shopCover: '',
				shopTypenum: [],
				typeDatas2: [],
				shopType: '',

				type: '',
				money: '',
				classIndex: '',
				dialogFormVisible4: false,
				dialogFormVisible5: false,
				dialogFormVisible6: false,
				tablemoney: 0,
				dataForm: {
					id: 0,
					userName: '',
					password: '',
					comfirmPassword: '',
					salt: '',
					email: '',
					mobile: '',
					roleIdList: [],
					shopIdList: [],
					status: 1,
				},
				newPassword: '',
				querenPassword: '',
				bannedFlag: '',
				exemptErrandFlag: 1, //是否见面配送费0开启 1关闭
				errandMoney: '',
				exemptMinMoney: '',
				minimumDelivery: '',
				autoSendOrder: 1,
				autoAcceptOrder: 1,
				putawayFlag: 1,
				distributionDistance: '',
				facility: 1,
				shopUserId: '',
				shopUserName: '',
				shopPhone: '', //商户关联手机号
				snCode: '',

				dialogFormVisibleHd: false,
				dialogFormVisibleXq: false,
				tableDataLoadingHd: false,
				huodongData: [],
				limitH: 10,
				pageH: 1,
				integralName: '',
				xiangqingData: {},
				statusmain: [{
						value: '',
						label: '全部'
					},
					{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
				openValue:1,
				closeValue:0,
				activityId:'',
			}
		},
		methods: {



			

			

			handleSizeChange(val) {
				this.limitH = val
				this.huodongSelect()
			},
			handleCurrentChange(val) {
				this.pageH = val
				this.huodongSelect()
			},
			// 活动弹框
			canjiaHd(row) {
				this.shopId = this.$cookie.get('shopId')
				this.activityId = row.activityId
				this.dialogFormVisibleHd = true
				this.huodongSelect()
			},
			// 获取活动列表
			huodongSelect() {
				this.tableDataLoadingHd = true
				this.$http({
					url: this.$http.adornUrl('app/activityManage/getActivityList'),
					method: 'get',
					params: this.$http.adornParams({
					})
				}).then(({
					data
				}) => {
					this.tableDataLoadingHd = false
					let returnData = data.data
					var arr = []
					for(var i in returnData.records){
						if(returnData.records[i].activityId!=14){
							arr.push(returnData.records[i])
						}
					}
					this.huodongData = arr
				})
			},
			selectHd() {
				this.pageH = 1
				this.huodongSelect()
			},
			cleansHs() {
				this.pageH = 1
				this.integralName = ''
				this.huodongSelect()
			},
			// 确认参加活动
			querenBtnHd(row) {
				if(this.shopId==null||this.shopId==''){
					var text = '确定要参加这个活动吗'
				}else{
					var text = '只能同时参与一个活动，确认参与后将自动退出已参加的活动，确定继续？'
				}
				
				this.$confirm(text, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('admin/activityManage/shopJoinActivity'),
						method: 'get',
						params: this.$http.adornParams({
							'shopId': this.shopId,
							'activityId': row.activityId
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dialogFormVisibleHd = false
									this.shopSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {}
							})
						}
					})
				}).catch(() => {})
			},
			shopSelect() {
				this.$http({
					url: this.$http.adornUrl('app/goods/getShopActivity'),
					method: 'get',
					params: this.$http.adornParams({
						'shopId': this.shopId,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data
					if(data.data){
						this.activityId = returnData.activityId
					}else{
						this.activityId = ''
					}
					this.huodongSelect()
				})
			},
			
		},
		mounted() {
			this.shopId = this.$cookie.get('shopId')
			this.shopSelect()  
			
		}
	}
</script>

<style>
	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.divs img {
		width: 100%;
	}
</style>
