<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"
					:disabled="!isAuth('viplist:add')" @click="add">添加
				</el-button>
			</div>
			<el-table v-loading="tableDataLoading" :data="tableData.list">
				<el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
				<el-table-column prop="vipNameType" label="会员类型" width="150">
					<template slot-scope="scope">
						<span v-if="scope.row.vipNameType == 0">月会员</span>
						<span v-if="scope.row.vipNameType == 1">季会员</span>
						<span v-if="scope.row.vipNameType == 2">年会员</span>
					</template>
				</el-table-column>
				<el-table-column prop="money" label="会员价格">
				</el-table-column>
				<el-table-column prop="payDiamond" 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.totalCount">
				</el-pagination>
			</div>
		</el-tab-pane>
		<el-tab-pane label="实名用户" name="realName">
			<RealNameList ref="RealNameList" />
		</el-tab-pane>
		<el-tab-pane label="订单汇总" name="orderInfo">
			<OrderInfo ref="OrderInfo" />
		</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-radio-group v-model="vipNameType">
					<el-radio :label="0">月会员</el-radio>
					<el-radio :label="1">季会员</el-radio>
					<el-radio :label="2">年会员</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">会员价格：</span>
				<el-input style="width:50%;" v-model="money" 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="payDiamond" 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="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-radio-group v-model="vipNameType">
					<el-radio :label="0">月会员</el-radio>
					<el-radio :label="1">季会员</el-radio>
					<el-radio :label="2">年会员</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">会员价格：</span>
				<el-input style="width:50%;" v-model="money" 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="payDiamond" type="number" min="0"
					placeholder="请输入钻石价格"></el-input>
			</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>
import RealNameList from './components/realNameList.vue'
import OrderInfo from './components/orderInfo.vue'
export default {
	components: {
		RealNameList,
		OrderInfo
	},
	data() {
		return {
			activeName: 'first',
			// activeName: 'orderInfo',
			page: 1,
			limit: 10,
			classify: 1,
			id: '',
			vipNameType: -1,
			money: '',
			payDiamond: '',
			tableDataLoading: false,
			dialogFormVisible: false,
			dialogFormVisible1: false,
			tableData: {},
		}
	},
	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()
		},
		// 查询列表
		select() {
			this.page = 1
			this.limit = 10
			this.dataSelect()
		},
		// 添加
		add() {
			this.vipNameType = -1
			this.money = ''
			this.payDiamond = ''
			this.id = ''
			this.dialogFormVisible = true
		},
		updata(row) {
			this.vipNameType = row.vipNameType
			this.money = row.money
			this.payDiamond = row.payDiamond
			this.id = row.id
			this.dialogFormVisible1 = true
		},
		vipAdd() {
			if (this.vipNameType == -1) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请选择会员类型',
					type: 'warning'
				});
				return
			}
			if (this.money === '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入会员价格',
					type: 'warning'
				});
				return
			}
			if (this.payDiamond === '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入钻石价格',
					type: 'warning'
				});
				return
			}
			this.$http({
				url: this.$http.adornUrl('vipDetails/insertVipDetails'),
				method: 'post',
				data: this.$http.adornData({
					'vipNameType': this.vipNameType,
					'money': this.money,
					'payDiamond': this.payDiamond,
				})
			}).then(({ data }) => {

				if (data.code == 0) {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dialogFormVisible = false
							this.dataSelect()
						}
					})
				} else {
					this.$message({
						message: data.msg,
						type: 'warning',
						duration: 1500,
						onClose: () => {
						}
					})
				}
			})
		},
		vipUpdata() {
			if (this.money === '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入会员价格',
					type: 'warning'
				});
				return
			}
			if (this.payDiamond === '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入钻石价格',
					type: 'warning'
				});
				return
			}

			this.$http({
				url: this.$http.adornUrl('vipDetails/updateVipDetails'),
				method: 'post',
				data: this.$http.adornData({
					'vipNameType': this.vipNameType,
					'money': this.money,
					'payDiamond': this.payDiamond,
					'id': this.id
				})
			}).then(({ data }) => {

				if (data.code == 0) {
					this.dialogFormVisible1 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dataSelect()
						}
					})
				} else {
					this.$message({
						message: data.msg,
						type: 'warning',
						duration: 1500,
						onClose: () => {
						}
					})
				}
			})
		},
		// 删除banner图
		deletes(row) {
			let delid = row.id
			this.$confirm(`确定删除此条信息?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl(`vipDetails/deleteVipDetails?id=${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('vipDetails/selectVipDetailsList'),
				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
				}
			})
		}
	},
	mounted() {
		this.dataSelect()
	}
}
</script>

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