<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="display: inline-block;">
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>
		</div>
		<div style="float: right;margin-right:2%;">
			<el-button style='margin: 10px 0;' :disabled="!isAuth('integral:add')" size="mini" type="primary"
				icon="document" @click="addNotice">添加活动</el-button>
			<!-- <el-button style='margin: 10px 0;' :disabled="!isAuth('integral:delete') || checkBoxData.length <= 0"
				size="mini" type="danger" icon="document" @click="choideletes()">批量删除</el-button> -->
		</div>
		<el-table v-loading="tableDataLoading":data="tableData.records">
			<!-- <el-table-column type="selection">  @selection-change="changeFun"
			</el-table-column> -->
			<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">
				  <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;">{{scope.row.activityContent}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="创建时间" width="160">
			</el-table-column>
			<el-table-column prop="isEnable" label="状态" width="80">
			  <template slot-scope="scope">
			    <el-switch v-model="scope.row.isEnable" @change="changeS(scope.row.isEnable,scope.row)"
			      :disabled="!isAuth('userList:updateStatus')" :active-value="openValue" :inactive-value="closeValue"
			      active-color="#13ce66" inactive-color="#ff4949">
			    </el-switch>
			  </template>
			</el-table-column>
			<el-table-column prop="isAllowShop" label="是否允许商户主动加入" width="80">
			  <template slot-scope="scope">
			    <el-switch v-model="scope.row.isAllowShop" @change="changeS(scope.row.isAllowShop,scope.row)"
			      :disabled="!isAuth('userList:updateStatus')" :active-value="openValue" :inactive-value="closeValue"
			      active-color="#13ce66" inactive-color="#ff4949">
			    </el-switch>
			  </template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="180">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" :disabled="!isAuth('integral:update')"
						@click="updates(scope.row)" style="margin: 3px;">修改
					</el-button>
					<el-button size="mini" type="danger" :disabled="!isAuth('integral:delete')"
						@click="deleteuser(scope.row)" style="margin: 3px;" v-if="scope.row.activityId!=14">删除
					</el-button>
					<el-button size="mini" type="warning" :disabled="!isAuth('integral:delete')"
						@click="shopListBtn(scope.row)" 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="limit" :current-page="page"
				layout="total,sizes, prev, pager, next" :total="tableData.total">
			</el-pagination>
		</div>
		<!-- 添加弹框 -->
		<el-dialog title="添加活动" :visible.sync="dialogFormVisible" center width="70%">
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">活动名称：</span>
        <el-select v-model="activityTitle" style="width:50%;" placeholder="请选择">
          <el-option
            v-for="item in huodongList"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
			</div>
			<div style="margin-bottom: 10px;">
				<div style="width: 200px;display: inline-block;text-align: right;">活动图片：</div>
				<div class="imgs" v-for="(item,index) in img" :key="index">
				  <img width="100%" class="images" height="100%" :src="item" alt="">
				  <span class="dels">
				    <i class="el-icon-delete" @click="dels(index)"></i>
				  </span>
				</div>
				<div class="imgs" style="width: 50%;">
				  <el-upload :action="$http.adornUrlUp('alioss/upload')" list-type="picture-card"
				    :show-file-list="false" :on-success="handleRemove" :on-progress="onprogress1">
				    <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
				    </el-progress>
				    <i v-else class="el-icon-plus"></i>
				  </el-upload>
				  <el-dialog :visible.sync="dialogVisible">
				    <img width="100%" :src="dialogImageUrl" alt="">
				  </el-dialog>
				</div>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
				<el-radio-group v-model="isEnable">
				  <el-radio :label="1">开启</el-radio>
				  <el-radio :label="0">关闭</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">是否允许商户主动加入：</span>
				<el-radio-group v-model="isAllowShop">
				  <el-radio :label="1">是</el-radio>
				  <el-radio :label="0">否</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span
					style="width: 200px;display: inline-block;text-align: right;">活动描述：</span>
				<quill-editor ref="myTextEditor" v-model="activityContent" :options="quillOption"
				  style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;margin-left: 200px;">
				</quill-editor>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改弹框 -->
		<el-dialog title="修改活动" :visible.sync="dialogFormVisible1" center width="70%">
			<el-form :model="form">
				<el-form-item label="活动名称：" :label-width="formLabelWidth">
<!--					<el-input v-model="form.activityTitle" style="width:65%;"></el-input>-->
          <el-select v-model="form.activityTitle" style="width:50%;" placeholder="请选择">
            <el-option
              v-for="item in huodongList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
				</el-form-item>
				<el-form-item label="活动图片：" :label-width="formLabelWidth">
					<div class="imgs" v-for="(item,index) in img" :key="index">
					  <img width="100%" class="images" height="100%" :src="item" alt="">
					  <span class="dels">
					    <i class="el-icon-delete" @click="dels(index)"></i>
					  </span>
					</div>
					<div class="imgs" style="width: 50%;">
					  <el-upload :action="$http.adornUrlUp('alioss/upload')" list-type="picture-card"
					    :show-file-list="false" :on-success="handleRemove" :on-progress="onprogress1">
					    <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
					    </el-progress>
					    <i v-else class="el-icon-plus"></i>
					  </el-upload>
					  <el-dialog :visible.sync="dialogVisible">
					    <img width="100%" :src="dialogImageUrl" alt="">
					  </el-dialog>
					</div>
				</el-form-item>
				<el-form-item label="活动状态：" :label-width="formLabelWidth">
					<el-radio-group v-model="form.isEnable">
					  <el-radio :label="1">开启</el-radio>
					  <el-radio :label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否允许商户主动加入：" :label-width="formLabelWidth">
					<el-radio-group v-model="form.isAllowShop">
					  <el-radio :label="1">是</el-radio>
					  <el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动描述：" :label-width="formLabelWidth">
					<quill-editor ref="myTextEditor" v-model="form.activityContent" :options="quillOption"
					  style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
					</quill-editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 活动商家 -->
		<el-dialog title="活动商家" :visible.sync="dialogFormVisibleShop" center width="70%">
			<el-table v-loading="tableDataLoadingShop":data="shopData.records">
				<el-table-column label="编号" prop="shopId" width="80" fixed="left">
				</el-table-column>
				<el-table-column label="名称" prop="shopName" fixed="left">
				</el-table-column>
				<el-table-column label="店铺手机号" prop="phone" width="120">
				</el-table-column>
				<el-table-column label="商铺类型" prop="shopTypeName">
				</el-table-column>
				<el-table-column prop="shopCover" label="封面图" width="150">
				  <template slot-scope="scope">

				    <div style="display: inline-block; margin: 3px;">
				      <el-popover placement="top-start" title="" trigger="hover">
				        <img style="width: 50px; height: 50px" :src="scope.row.shopCover" alt="" slot="reference">
				        <img style="width: 300px; height: auto" :src="scope.row.shopCover" alt="">
				      </el-popover>
				    </div>
				  </template>
				</el-table-column>
				<el-table-column prop="shopBanner" label="轮播图" width="150">
				  <template slot-scope="scope">
						<div v-if="scope.row.shopBanner">
							<div v-for="(item,index) in scope.row.shopBanner.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 label="营业状态" prop="putawayFlag">
				  <template slot-scope="scope">
				    <span>{{scope.row.putawayFlag==0?'上班啦':'打烊啦'}}</span>
				  </template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" :disabled="!isAuth('integral:delete')"
							@click="deleteuserShop(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChangeShop" @current-change="handleCurrentChangeShop"
					:page-sizes="[10, 15, 20, 25]" :page-size="limit1" :current-page="page1"
					layout="total,sizes, prev, pager, next" :total="shopData.total">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
	  quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import quillConfig from '../allocation/quill-config.js'
	export default {
	  name: 'news',
	  components: {
	    quillEditor
	  },
		data() {
			return {
				limit: 10,
				page: 1,
				limit1: 10,
				page1: 1,
				integralName: '',
				activityTitle:'',
				activityContent: '',
				activityImage: '',
				money: '',
				activityId: '',
				isAllowShop:1,
				checkBoxData: [], //多选框选择的值
				form: {
					activityId: '',
					activityTitle: '',
					activityContent: '',
					activityImage: '',
					money: '',
					isEnable: '',
					createTime: '',
					isAllowShop:1,
				},
				formLabelWidth: '200px',
				dialogFormVisible: false,
				dialogFormVisible1: false,
				tableDataLoading: true,
				tableData: [],
				quillOption: quillConfig,
				percentage1: 0, //进度条
				img: [], //任务轮播图
				dialogVisible: false,
				dialogImageUrl: [],
				isEnable:0,
				openValue: 1,
				closeValue: 0,
				dialogFormVisibleShop:false,
				tableDataLoadingShop:false,
				shopData:{},
        huodongList:[],
			}
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val;
			},
			// 详情跳转
			look(row) {
				this.$router.push({
					path: '/integralDetail',
					query: {
						activityId: row.activityId
					}
				})
			},
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},
			handleSizeChangeShop(val) {
				this.limit1 = val
				this.shopList(this.activityId)
			},
			handleCurrentChangeShop(val) {
				this.page1 = val
				this.shopList(this.activityId)
			},
			// 查询
			select() {
				this.dataSelect()
			},
			// 重置
			cleans() {
				this.integralName = ''
				this.dataSelect()
			},
      gethuodongList(){
        this.$http({
          url: this.$http.adornUrl('banner/selectBannerList'),
          method: 'get',
          params: this.$http.adornParams({
            'state': -1,
            'classify': 12,
          })
        }).then(({data}) => {
            if(data.code==0){
              this.huodongList = data.data
            }
        })
      },
			//添加活动弹框
			addNotice() {
				this.dialogImageUrl = []
				this.img = []
				this.activityTitle = ''
				this.activityContent = ''
				this.activityImage = ''
				this.isEnable = 0
				this.isAllowShop = 1
				this.dialogFormVisible = true
			},
			// 添加活动
			addNoticeTo() {
				if (this.activityTitle == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入活动名称',
						type: 'warning'
					});
					return
				}
				if (this.img.length == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入上传图片',
						type: 'warning'
					});
					return
				}
				if (this.activityContent == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入活动内容',
						type: 'warning'
					});
					return
				}

				this.$http({
					url: this.$http.adornUrl('admin/activityManage/addActivity'),
					method: 'post',
					params: this.$http.adornParams({
						'activityTitle': this.activityTitle,
						'activityContent': this.activityContent,
						'activityImage': this.img.toString(),
						'isEnable': this.isEnable,
						'isAllowShop':this.isAllowShop
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {

							this.dataSelect()
						}
					})
				})
			},
			// 修改推送活动
			updates(rows) {
				console.log(rows)
				this.dialogFormVisible1 = true
				this.form.activityId = rows.activityId
				this.form.activityTitle = rows.activityTitle
				this.form.activityContent = rows.activityContent
				this.form.isEnable = rows.isEnable
				this.form.isAllowShop = rows.isAllowShop
				if(rows.activityImage){
					this.img =  rows.activityImage.split(',')
				}else{
					this.img = []
				}

			},
			// 修改
			amendNoticeTo() {
				this.$http({
					url: this.$http.adornUrl('admin/activityManage/updateActivity'),
					method: 'post',
					params: this.$http.adornParams({
						'activityId': this.form.activityId,
						'activityTitle': this.form.activityTitle,
						'activityContent': this.form.activityContent,
						'activityImage': this.img.toString(),
						'isEnable': this.form.isEnable,
						'isAllowShop':this.form.isAllowShop
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible1 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
				})
			},
			// 批量删除任务
			choideletes(sendMoneyId) {
				var ids = sendMoneyId ? [sendMoneyId] : this.checkBoxData.map(item => {
					return item.sendMoneyId
				})
				this.$http({
					url: this.$http.adornUrl(`integral/deleteSendMoney?sendMoneyIds=${ids}`),
					method: 'post',
					data: this.$http.adornData({})
				}).then(({
					data
				}) => {
					this.$message({
						message: '批量删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
				})
			},
			// 删除
			deleteuser(row) {
				let delid = row.activityId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('admin/activityManage/deleteActivity'),
						method: 'post',
						params: this.$http.adornParams({
							'activityId':delid
						})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {})

			},
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('admin/activityManage/getActivityList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'activityTitle': this.integralName,
						'isEnable':''
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.tableData = returnData
				})
			},
			onprogress1(event, file, fileList) {
			  console.log('详情图上传进度', parseInt(event.percent))
			  this.percentage1 = parseInt(event.percent)
			},
			// 轮播图片上传
			handleRemove(file) {
			  console.log(file, this.img)
			  this.img.push(file.data);
			},
			handleDownload(file) {

			  console.log(file, this.img)
			},
			// 删除轮播图
			dels(index) {
			  this.img.splice(index, 1);
			  console.log(this.img)
			},
			// 状态
			changeS(isEnable, row) {
				console.log('row.activityId',row)
			  this.$http({
			  	url: this.$http.adornUrl('admin/activityManage/updateActivity'),
			  	method: 'post',
			  	params: this.$http.adornParams({
			  		'activityId': row.activityId,
			  		'activityTitle': row.activityTitle,
			  		'activityContent': row.activityContent,
			  		'activityImage': row.activityImage,
			  		'isEnable': row.isEnable,
			  		'isAllowShop':row.isAllowShop
			  	})
			  }).then(({
			  	data
			  }) => {
			  	this.dialogFormVisible1 = false
			  	this.$message({
			  		message: '操作成功',
			  		type: 'success',
			  		duration: 1500,
			  		onClose: () => {
			  			this.dataSelect()
			  		}
			  	})
			  })
			},
			// 活动商家
			shopListBtn(row){
				this.activityId = row.activityId
				this.shopList(row.activityId)
				this.dialogFormVisibleShop = true
			},
			// 获取商家列表
			shopList(activityId){
				this.tableDataLoadingShop = true
				this.$http({
					url: this.$http.adornUrl('admin/activityManage/getShoActivityShopList?=2'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page1,
						'limit': this.limit1,
						'activityId': activityId,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoadingShop = false
					let returnData = data.data
					this.shopData = returnData
				})
			},
			// 删除商家
			deleteuserShop(row){
				this.$confirm(`确定删除活动商家?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('admin/activityManage/cancelActivityShop'),
						method: 'get',
						params: this.$http.adornParams({
							'activityId':row.activityId,
							'shopId':row.shopId
						})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.shopList(this.activityId)
							}
						})
					})
				}).catch(() => {})
			},

		},
		mounted() {
			this.dataSelect()
      this.gethuodongList();
		}
	}
</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;
	}
	.el-upload--picture-card{
		vertical-align: unset!important;
	}
</style>
