<template>
	<el-tabs v-model = "activeName" @tab-click = "handleClick">
		<!-- <el-tab-pane label = "会员列表" name = "first"> -->
			<div style = "margin-right:2%;text-align: right;">
				<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" :disabled="!isAuth('viplist:add')" @click="add">添加
			  </el-button>
			</div>
			<div style="color: orange;"> * 提示：当前为邀请奖励的配置，例如：邀请2人，奖励用户3个月无限看短剧</div>
			<el-table v-loading = "tableDataLoading" :data = "tableData.records" >
			<el-table-column prop = "inviteAwardId" label = "编号" width = "80"></el-table-column>
			<el-table-column prop = "inviteCount" label = "邀请人数">
			</el-table-column>
			<el-table-column prop = "inviteMonth" label = "奖励会员月份数" >
				<template slot-scope="scope">
					<span v-if="scope.row.inviteMonth=='0'">永久</span>
					<span v-else>{{scope.row.inviteMonth}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="inviteImg" label="图片" width="150">
				<template slot-scope="scope">
					<el-popover placement="top-start" title="" trigger="hover">
						<img style="width: 50px; height: 50px" :src="scope.row.inviteImg" alt="" slot="reference">
						<img style="width: 200px; height: 200px" :src="scope.row.inviteImg" alt="">
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop = "createTime" label = "创建时间" >
			</el-table-column>
			  	<el-table-column label = "操作" width = "180" align="center" fixed="right">
					<template slot-scope = "scope">
						<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" :disabled="!isAuth('viplist:update')" @click="updata(scope.row)">修改
						</el-button>
						<el-button size = "mini" type = "danger" :disabled="!isAuth('viplist:delete')" @click = "deletes(scope.row)">删除</el-button>
					</template>
			  	</el-table-column>
			</el-table>
			<div style = "text-align: center;margin-top: 10px;float:right">
			  	<el-pagination @size-change = "handleSizeChange" @current-change = "handleCurrentChange" :page-sizes = "[5, 10, 15, 20]"
							   :page-size = "limit" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
							   :total = "tableData.total">
			  	</el-pagination>
			</div>
		<!-- </el-tab-pane> -->
		<el-dialog title="添加" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">邀请人数：</span>
			 <el-input style="width:50%;" v-model="inviteCount" type="number" min="0" placeholder="请输入邀请人数"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">奖励类型：</span>
			  <el-radio-group v-model="vipNameType" @change="btns()">
			    <el-radio :label="1">永久</el-radio>
			    <el-radio :label="2">月份数</el-radio>
			  </el-radio-group>
			</div>
			<div style="margin-bottom: 10px;" v-if="vipNameType==2">
				<span style="width: 200px;display: inline-block;text-align: right;">奖励会员月份数：</span>
				<el-input style="width:50%;" v-model="inviteMonth" type="number" min="0" placeholder="请输入奖励会员月份数" ></el-input>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">图片：</span>
				<div
					style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
					<el-upload class="avatar-uploader" v-model="inviteImg"
						:action="$http.adornUrlUp('alioss/upload')"  :show-file-list="false"
						:on-success="handleAvatarSuccess5">
						<img v-if="inviteImg" :src="inviteImg" class="avatar"
							style="border-radius: 6px;width: 148px;height: 148px;" />
						<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
					</el-upload>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="vipAdd()">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">邀请人数：</span>
			  <el-input style="width:50%;" v-model="inviteCount" type="number" min="0" placeholder="请输入邀请人数"></el-input>
			 
			</div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">奖励类型：</span>
			  <el-radio-group v-model="vipNameType" @change="btns()">
			    <el-radio :label="1">永久</el-radio>
			    <el-radio :label="2">月份数</el-radio>
			  </el-radio-group>
			</div>
			<div style="margin-bottom: 10px;" v-if='vipNameType==2'>
				<span style="width: 200px;display: inline-block;text-align: right;">奖励会员月份数：</span>
				<el-input style="width:50%;" v-model="inviteMonth" type="number" min="0" placeholder="请输入奖励会员月份数"></el-input>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">图片：</span>
				<div
					style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
					<el-upload class="avatar-uploader" v-model="inviteImg"
						:action="$http.adornUrlUp('alioss/upload')"  :show-file-list="false"
						:on-success="handleAvatarSuccess5">
						<img v-if="inviteImg" :src="inviteImg" class="avatar"
							style="border-radius: 6px;width: 148px;height: 148px;" />
						<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
					</el-upload>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="vipUpdata()">确 定</el-button>
			</div>
		</el-dialog>
	</el-tabs>

</template>
<script>
    export default {
		data () {
			return {
				activeName:'first',
				page: 1,
				limit: 10,
				classify: 1,
				id:'',
				inviteCount: '',
				inviteMonth: '',
				inviteImg: '',
				tableDataLoading:false,
				dialogFormVisible:false,
				dialogFormVisible1:false,
				tableData:{},
				vipNameType:2,
			}
		},
		methods: {
			// 多选
			changeFun (val) {
				this.checkBoxData = val
			},
			// tabs切换
			handleClick (tab, event) {
				if (tab._props.label == '轮播图') {
					this.page = 1
					this.limit = 5
					this.classify = 1
					this.dataSelect()
				}
			},
			handleSizeChange (val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange (val) {
				this.page = val
				this.dataSelect()
			},
			// 封面图片上传
			handleAvatarSuccess5(file) {
				this.inviteImg = file.data;
			},
			// 查询列表
			select() {
				this.page = 1
				this.dataSelect()
			},
			// 添加
			add(){
				this.inviteCount = ''
				this.inviteMonth = ''
				this.id = ''
				this.inviteImg = '';
				this.dialogFormVisible = true
			},
			updata(row){
				this.inviteCount = row.inviteCount
				if(row.inviteMonth==0){
					this.vipNameType = 1
				}else{
					this.vipNameType = 2
				}
				this.inviteMonth = row.inviteMonth
				this.id = row.inviteAwardId
				this.inviteImg = row.inviteImg;
				this.dialogFormVisible1 = true
			},
			vipAdd(){
				if (this.inviteCount == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请选择邀请人数',
				        type: 'warning'
				    });
				    return
				}
				if (this.inviteMonth == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入奖励会员月份数',
				        type: 'warning'
				    });
				    return
				}
				if (this.inviteImg == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传图片',
				        type: 'warning'
				    });
				    return
				}
				
				this.$http({
				  url: this.$http.adornUrl('inviteAward/insertInviteAward'),
				  method: 'post',
				  data: this.$http.adornData({
					  'inviteCount':this.inviteCount,
					  'inviteMonth':this.inviteMonth,
					  'inviteImg':this.inviteImg
				  })
				}).then(({data}) => {

				  if(data.code == 0){
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.dialogFormVisible = false
				        this.inviteCount = ''
				        this.money = ''
				        this.dataSelect()
				      }
				    })
				  }else{
					  this.$message({
					    message: data.msg,
					    type: 'warning',
					    duration: 1500,
					    onClose: () => {
					    }
					  })
				  }
				})
			},
			vipUpdata(){
				if (this.inviteCount == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请选择邀请人数',
				        type: 'warning'
				    });
				    return
				}
				if (this.inviteMonth === '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入奖励会员月份数',
				        type: 'warning'
				    });
				    return
				}
				if (this.inviteImg == ''||this.inviteImg==null) {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传图片',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl('inviteAward/updateInviteAward'),
				  method: 'post',
				  data: this.$http.adornData({
					  'inviteCount':this.inviteCount,
					  'inviteMonth':this.inviteMonth,
					  'inviteAwardId':this.id,
					  'inviteImg':this.inviteImg,
				  })
				}).then(({data}) => {

				  if(data.code == 0){
					  this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
				        this.inviteCount = ''
				        this.inviteMonth = ''
						this.id = ''
				        this.dataSelect()
				      }
				    })
				  }else{
					  this.$message({
					    message: data.msg,
					    type: 'warning',
					    duration: 1500,
					    onClose: () => {
					    }
					  })
				  }
				})
			},
			// 删除banner图
			deletes (row) {
				let delid = row.inviteAwardId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`inviteAward/deleteInviteAward?inviteAwardId=${delid}`),
						method: 'post',
						params: this.$http.adornParams({})
					}).then(({data}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {
				})
			},
			// 获取数据列表
			dataSelect () {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('inviteAward/selectInviteAwardList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit
					})
				}).then(({data}) => {
					if (data && data.code === 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					}
				})
			},
			btns(){
				if(this.vipNameType==1){
					this.inviteMonth = 0
				}else{
					this.inviteMonth = ''
				}
			},
		},
		mounted () {
			this.dataSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}
</style>
