<template>
	<div>
		<div style="margin:2% 0;display: inline-block;">
		  <span>积分包名称：</span>
		  <el-input style="width: 200px;" @keydown.enter.native="select" clearable placeholder="请输入积分包名称" v-model="title">
		  </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
		</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>
		  <el-button style='margin: 10px 0;' :disabled="!isAuth('integralPackage:add')" size="mini" type="primary"
		  	icon="document" @click="addNotice">添加</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.records">
			<el-table-column prop="integralBagId" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="integralName" label="积分包名称">
			</el-table-column>
			<el-table-column prop="limitedNum" label="所需天数">
			</el-table-column>
			<el-table-column prop="price" label="兑换数量">
				<template slot-scope="scope">
					<span v-if="scope.row.price==-1" >
						体验积分包
					</span>
					<span v-else>
						{{scope.row.price}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="sumIntegral" label="总数量">
			</el-table-column>
			<el-table-column prop="dayIntegral" label="每日数量">
			</el-table-column>
			<el-table-column prop="shareNum" label="股权数量">
			</el-table-column>
			<el-table-column prop="sort" label="排序">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" :disabled="!isAuth('integralPackage:update')"
						@click="updates(scope.row)">修改
					</el-button>
					<el-button size="mini" type="danger" :disabled="!isAuth('integralPackage:delete')"
						@click="deletes(scope.row)">删除
					</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, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next" :total="tableData.totalElements">
			</el-pagination>
		</div>
		<!-- 添加品牌 -->
		<el-dialog title="添加" customClass="customWidth" :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="integralName" placeholder="请输入积分包名称"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span
					style="width: 200px;display: inline-block;text-align: right;">所需天数：</span>
				<el-input style="width:50%;" v-model="limitedNum" 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="istype">
				  <el-radio :label="1">体验积分包</el-radio>
				  <el-radio :label="2">兑换积分包</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;" v-if="istype==2">
				<span
					style="width: 200px;display: inline-block;text-align: right;">兑换数量：</span>
				<el-input style="width:50%;" v-model="price" 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-input style="width:50%;" v-model="sumIntegral" 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-input style="width:50%;" v-model="dayIntegral" 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-input style="width:50%;" v-model="shareNum" 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-input style="width:50%;" v-model="sort" type="number" :min="0" placeholder="请输入排序"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="specificationTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改弹框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
			<el-form :model="form">
				<el-form-item label="品牌名称：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-input v-model="form.integralName" placeholder="请输入品牌名称" style="width:65%;"></el-input>
				</el-form-item>
				<el-form-item label="所需天数：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-input style="width:65%;" v-model="form.limitedNum" type="number" min="0" placeholder="请输入所需天数">
					</el-input>
				</el-form-item>
				<el-form-item label="积分包类型：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-radio-group v-model="istype">
					  <el-radio :label="1">体验积分包</el-radio>
					  <el-radio :label="2">兑换积分包</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="兑换数量：" :label-width="formLabelWidth" style="margin-bottom: 10px;" v-if="istype==2">
					<el-input style="width:65%;" v-model="form.price" type="number" min="0" placeholder="请输入兑换数量">
					</el-input>
				</el-form-item>
				<el-form-item label="总数量：" :label-width="formLabelWidth">
					<el-input style="width:65%;" v-model="form.sumIntegral" type="number" min="0" placeholder="请输入总数量">
					</el-input>
				</el-form-item>
				<el-form-item label="每日数量：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-input style="width:65%;" v-model="form.dayIntegral" type="number" min="0" placeholder="请输入每日数量">
					</el-input>
				</el-form-item>
				<el-form-item label="股权数量：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-input style="width:65%;" v-model="form.shareNum" type="number" min="0" placeholder="请输入股权数量">
					</el-input>
				</el-form-item>
				<el-form-item label="排序：" :label-width="formLabelWidth" style="margin-bottom: 10px;">
					<el-input style="width:65%;" v-model="form.sort" type="number" min="0" placeholder="请输入排序">
					</el-input>
				</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>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				istype:1,
				title:'',
				integralBagId: '',
				dayIntegral: '',
				integralName: '',
				limitedNum:'',
				price:'',
				shareNum:'',
				sumIntegral:'',
				sort:'',
				form: {
					integralBagId: '',
					dayIntegral: '',
					integralName: '',
					limitedNum:'',
					price:'',
					shareNum:'',
					sumIntegral:'',
					createTime: '',
					sort:''
				},
				formLabelWidth: '200px',
				tableDataLoading: false,
				dialogFormVisible1: false,
				dialogFormVisible: false,
				tableData: {},
			}
		},
		methods: {
			handleSizeChange(val) {
				this.limit = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			// 添加品牌弹框
			addNotice() {
				this.dayIntegral = ''
				this.integralName = ''
				this.limitedNum = ''
				this.price = ''
				this.shareNum = ''
				this.sort = ''
				this.sumIntegral = ''
				this.dialogFormVisible = true
			},
			// 添加品牌
			specificationTo() {
				if(this.istype==1){
					this.price = -1
				}else{
					if (this.price == '') {
						this.$message({
							title: '提示',
							type: 'error',
							duration: 1800,
							message: '请输入兑换数量',
							type: 'warning'
						});
						return
					}
				}
				if (this.integralName == '') {
					this.$message({
						title: '提示',
						type: 'error',
						duration: 1800,
						message: '请输入积分名称',
						type: 'warning'
					});
					return
				}
				if (this.limitedNum == '') {
					this.$message({
						title: '提示',
						type: 'error',
						duration: 1800,
						message: '请输入所需天数',
						type: 'warning'
					});
					return
				}
				this.$http({
					url: this.$http.adornUrl('integralBag/insertIntegralBag'),
					method: 'post',
					data: this.$http.adornData({
						'dayIntegral': this.dayIntegral,
						'integralName': this.integralName,
						'limitedNum':this.limitedNum,
						'price':this.price,
						'shareNum':this.shareNum,
						'sort':this.sort,
						'sumIntegral':this.sumIntegral
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							
							this.dataSelect()
						}
					})
				})
			},
			// 修改品牌弹框
			updates(rows) {
				this.dialogFormVisible1 = true;
				this.form.integralBagId = rows.integralBagId
				this.form.dayIntegral = rows.dayIntegral
				this.form.integralName = rows.integralName
				this.form.limitedNum = rows.limitedNum
				this.form.price = rows.price
				this.form.shareNum = rows.shareNum
				this.form.sort = rows.sort
				this.form.sumIntegral = rows.sumIntegral
				this.form.createTime = rows.createTime
				if(this.form.price==-1){
					this.istype = 1
				}else{
					this.istype = 2
				}
			},
			// 修改品牌
			amendNoticeTo() {
				if(this.istype==1){
					this.form.price = -1
				}else{
					if (this.form.price < 0) {
						this.$message({
							title: '提示',
							type: 'error',
							duration: 1800,
							message: '请输入兑换数量',
							type: 'warning'
						});
						return
					}
				}
				this.$http({
					url: this.$http.adornUrl('integralBag/updateIntegralBag'),
					method: 'post',
					data: this.$http.adornData({
						'integralBagId':this.form.integralBagId,
						'dayIntegral': this.form.dayIntegral,
						'integralName': this.form.integralName,
						'limitedNum':this.form.limitedNum,
						'price':this.form.price,
						'shareNum':this.form.shareNum,
						'sort':this.form.sort,
						'sumIntegral':this.form.sumIntegral,
						'createTime': this.form.createTime
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible1 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
				})
			},
			// 删除品牌
			deletes(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('integralBag/deleteIntegralBag'),
						method: 'post',
						params: this.$http.adornParams({
							'integralBagId':row.integralBagId
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dataSelect()
								}
							})
						}
					})
				}).catch(() => {})
			},
			select(){
				this.page = 1
				this.dataSelect()
			},
			cleans(){
				this.page = 1
				this.title = ''
				this.dataSelect()
			},
			// 获取地址数据
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('integralBag/selectIntegralBagList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'integralName':this.title
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
				})
			}
		},
		mounted() {
			this.dataSelect()
		}
	};
</script>

<style>
</style>
