<template>
	<div class="app-container" style="margin-right: 10px;">
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<!-- <el-button style="float: right" @click="searchMemberList()" type="primary" size="small">查询结果</el-button>
				<el-button style="float: right; margin-right: 15px" @click="updateOrderInfo()" type="primary"
					size="small">同步订单统计
				</el-button> -->
				<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索
				</el-button>
				<el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">重置
				</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="用户昵称：">
						<el-input style="width: 203px" v-model="listQuery.nickname" placeholder="会员名称/关键字"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<div class="listconadd">

			<el-card class="operate-container" shadow="never">
				<i class="el-icon-tickets"></i>
				<span>数据列表</span>
				<el-button type="primary" class="btn-add" @click="sendMessageToAll()" size="mini">
					发送全员信息
				</el-button>
				<el-button type="primary" class="btn-add" @click="sendMessageToSelect()" size="mini">
					向选择会员发送信息
				</el-button>
			</el-card>
			<div class="table-container">
				<el-table ref="brandTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
					v-loading="listLoading" border>
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column label="编号" width="80" align="center">
						<template slot-scope="scope">
							{{ scope.row.id }}
						</template>
					</el-table-column>
					<el-table-column label="汇融乡村振兴卡号" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.invitecode }}
						</template>
					</el-table-column>
					<el-table-column label="注册时间" width="160" align="center">
						<template slot-scope="scope">
							{{ scope.row.createTime | formatTime }}
						</template>
					</el-table-column>
					<el-table-column label="用户昵称" align="center">
						<template slot-scope="scope">
							{{ scope.row.nickname }}
						</template>
					</el-table-column>
					<el-table-column label="用户账号" align="center">
						<template slot-scope="scope">
							{{ scope.row.username }}
						</template>
					</el-table-column>
					<el-table-column label="电话号码" width="120" align="center">
						<template slot-scope="scope">
							{{ scope.row.phone }}
						</template>
					</el-table-column>
					<!-- 				<el-table-column label="用户余额" width="180" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.blance }}</p>
						<p><el-button type="text" @click="handleShowVeriyEditDialog(scope.$index, scope.row)">余额记录</el-button></p>
					</template>
				</el-table-column> -->
					<!-- 				<el-table-column label="用户积分" width="180" align="center">
					<template slot-scope="scope">
						<p>{{ scope.row.integration }}</p>
						<p><el-button type="text" @click="handleShowIntegrationDialog(scope.$index, scope.row)">积分记录</el-button></p>
					</template>
				</el-table-column>
				<el-table-column label="是否显示" width="100" align="center">
					<template slot-scope="scope">
						<el-switch @change="handleShowChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
					</template>
				</el-table-column> -->
					<el-table-column label="购买订单" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.buyCount }}
						</template>
					</el-table-column>
					<el-table-column label="消费金额" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.buyMoney }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="250" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="sendMessageToOne(scope.$index, scope.row)">
								发送信息
							</el-button>
							<!-- <el-button size="mini" type="danger" @click="addBlacne(scope.$index, scope.row)">余额充值</el-button> -->
							<!-- <el-button size="mini" type="danger" @click="addIntegration(scope.$index, scope.row)">积分充值</el-button> -->
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="batch-operate-container"></div>
			<div class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize"
					:page-sizes="[5, 10, 15]" :current-page.sync="listQuery.pageNum" :total="total"></el-pagination>
			</div>
		</div>
		<el-dialog title="积分记录" :visible.sync="dialogVisible1" width="40%">
			<el-table style="width: 100%;margin-top: 20px" :data="integrationList" border>
				<el-table-column label="编号" align="center">
					<template slot-scope="scope">
						{{ scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column label="会员" align="center">
					<template slot-scope="scope">
						{{ scope.row.memberId }}
					</template>
				</el-table-column>
				<el-table-column label="价格" align="center">
					<template slot-scope="scope">
						{{ scope.row.changeCount }}
					</template>
				</el-table-column>
				<el-table-column label="类别" align="center">
					<template slot-scope="scope">
						{{ scope.row.changeType | formatchangeType }}
					</template>
				</el-table-column>
				<el-table-column label="来源" align="center">
					<template slot-scope="scope">
						{{ scope.row.sourceType | formatsourceType }}
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center">
					<template slot-scope="scope">
						{{ scope.row.operateNote }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="180" align="center">
					<template slot-scope="scope">
						{{ scope.row.createTime | formatTime }}
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog title="余额记录" :visible.sync="dialogVisible" width="40%">
			<el-table style="width: 100%;margin-top: 20px" :data="blanceList" border>
				<el-table-column label="会员" align="center">
					<template slot-scope="scope">
						{{ scope.row.memberId }}
					</template>
				</el-table-column>
				<el-table-column label="价格" align="center">
					<template slot-scope="scope">
						{{ scope.row.price }}
					</template>
				</el-table-column>
				<el-table-column label="类别" align="center">
					<template slot-scope="scope">
						{{ scope.row.type | formatStatus }}
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center">
					<template slot-scope="scope">
						{{ scope.row.note }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="180" align="center">
					<template slot-scope="scope">
						{{ scope.row.createTime | formatTime }}
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog title="余额充值" :visible.sync="blance.dialogVisible" width="40%">
			<el-form :model="blance" ref="brandFrom" label-width="150px">
				<el-form-item label="充值金额：" prop="detail">
					<el-input v-model="blance.blance"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="blance.dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleEditBlance">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="积分充值" :visible.sync="integration.dialogVisible" width="40%">
			<el-form :model="integration" ref="brandFrom" label-width="150px">
				<el-form-item label="充值积分：" prop="detail">
					<el-input v-model="integration.integration"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="integration.dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleEditIntegration">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="向指定会员发送信息" :visible.sync="dialogVisibleMessOne" width="40%">
			<el-form :model="msgOne" :rules="msgOneRules" ref="msgOneFrom" label-width="150px">
				<el-form-item label="会员：">向账号为 {{msgOne.membername}} 的会员发送信息</el-form-item>
				<el-form-item label="信息类型：" prop="code">
					<el-select v-model="msgOne.code" placeholder="请选择">
						<el-option v-for="item in messageCodeOptions" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题：" prop="params">
					<el-input v-model="msgOne.params"></el-input>
				</el-form-item>
				<el-form-item label="信息内容：" prop="content">
					<el-input type="textarea" :rows="3" v-model="msgOne.content"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="sendMessageToOneReset">取 消</el-button>
					<el-button type="primary" @click="sendMessageToOneSubmit">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="向选择会员发送信息" :visible.sync="dialogVisibleMessSelect" width="40%">
			<el-form :model="msgOne" :rules="msgOneRules" ref="msgSelectFrom" label-width="150px">
				<el-form-item label="">&nbsp;向所选择的会员发送信息!</el-form-item>
				<el-form-item label="信息类型：" prop="code">
					<el-select v-model="msgOne.code" placeholder="请选择">
						<el-option v-for="item in messageCodeOptions" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题：" prop="params">
					<el-input v-model="msgOne.params"></el-input>
				</el-form-item>
				<el-form-item label="信息内容：" prop="content">
					<el-input type="textarea" :rows="3" v-model="msgOne.content"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="sendMessageToSelectReset">取 消</el-button>
					<el-button type="primary" @click="sendMessageToSelectSubmit">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="向所有会员发送信息" :visible.sync="dialogVisibleMessAll" width="40%">
			<el-form :model="msgOne" :rules="msgOneRules" ref="msgAllFrom" label-width="150px">
				<el-form-item label="">&nbsp;向所有的会员发送信息!</el-form-item>
				<el-form-item label="信息类型：" prop="code">
					<el-select v-model="msgOne.code" placeholder="请选择">
						<el-option v-for="item in messageCodeOptions" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题：" prop="params">
					<el-input v-model="msgOne.params"></el-input>
				</el-form-item>
				<el-form-item label="信息内容：" prop="content">
					<el-input type="textarea" :rows="3" v-model="msgOne.content"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="sendMessageToAllReset">取 消</el-button>
					<el-button type="primary" @click="sendMessageToAllSubmit">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import {
		formatDate
	} from '@/utils/date'
	import {
		fetchList,
		updateShowStatus,
		updateFactoryStatus,
		deleteMember,
		updateMemberOrderInfo,
		handleEditIntegration,
		handleEditBlance
	} from '@/api/ums/member'
	import {
		fetchList as fetchBlanceList
	} from '@/api/ums/memberBlanceLog'
	import {
		fetchList as fetchIntegrationList
	} from '@/api/ums/memberIntegration'
	import {
		sendToOne,
		sendToAll,
		sendToSelect
	} from '@/api/ums/sysMessage'

	export default {
		name: 'memberList',
		data() {
			return {
				messageCodeOptions: [{
					value: '云链助手',
					label: '云链助手'
				}, {
					value: '交易物流',
					label: '交易物流'
				}],
				dialogVisibleMessOne: false,
				msgOne: {
					userId: null,
					code: '',
					params: '',
					content: '',
					membername: ''
				},
				msgOneRules: {
					code: [{
						required: true,
						message: '请选择信息类型',
						trigger: 'blur'
					}],
					params: [{
						required: true,
						message: '请输入信息标题',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '信息内容不能为空',
						trigger: 'blur'
					}]
				},
				dialogVisibleMessSelect: false,
				msgSelect: {
					userIdList: [],
					sysMessage: {
						code: '',
						params: '',
						content: ''
					}
				},
				dialogVisibleMessAll: false,
				dialogVisible: false,
				dialogVisible1: false,
				blanceList: null,
				integrationList: null,
				blance: {
					dialogVisible: false,
					id: null
				},
				integration: {
					dialogVisible: false,
					id: null
				},
				operates: [{
						label: '显示会员',
						value: 'showMember'
					},
					{
						label: '隐藏会员',
						value: 'hideMember'
					}
				],
				operateType: null,
				listQuery: {
					nickname: null,
					pageNum: 1,
					pageSize: 10
				},
				list: null,
				total: null,
				listLoading: true,
				multipleSelection: []
			}
		},
		created() {
			this.getList()
		},
		filters: {
			formatTime(time) {
				if (time == null || time === '') {
					return 'N/A'
				}
				let date = new Date(time)
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
			verifyStatusFilter(value) {
				if (value === 1) {
					return '消费'
				} else {
					return '收入'
				}
			},
			formatchangeType(value) {
				if (value === 1) {
					return '增加'
				} else {
					return '减少'
				}
			},
			formatsourceType(value) {
				if (value === 1) {
					return '下单'
				}
				if (value === 2) {
					return '登录'
				} else {
					return '注册'
				}
			},
			formatStatus(value) {
				if (value === 1) {
					return '消费'
				}
				if (value === 2) {
					return '退款'
				}
				if (value === 3) {
					return '充值'
				}
				if (value === 4) {
					return '提现'
				}
				if (value === 5) {
					return '佣金'
				}
				if (value === 6) {
					return '平台调整'
				} else {
					return '收入'
				}
			},
			formatReturnAmount(row) {
				return row.productRealPrice * row.productCount
			}
		},
		methods: {
			sendMessageToOne(index, row) {
				this.msgOne.userId = row.id
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = row.username
				this.dialogVisibleMessOne = true
			},
			sendMessageToOneSubmit(index, row) {
				let _this = this
				this.$refs['msgOneFrom'].validate((valid) => {
					if (valid) {
						sendToOne(_this.msgOne).then(response => {
							this.$message({
								message: '信息发送成功',
								type: 'success',
								duration: 1000
							});
							_this.sendMessageToOneReset()
						});
					} else {
						_this.$message({
							message: '请输入正确的数据',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			sendMessageToOneReset() {
				this.$refs['msgOneFrom'].resetFields();
				this.msgOne.userId = null
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = ''
				this.dialogVisibleMessOne = false
			},
			sendMessageToSelect() {
				if (this.multipleSelection < 1) {
					this.$message({
						message: '请选择至少一条会员信息',
						type: 'warning',
						duration: 1000
					})
					return
				}
				this.msgOne.userId = null
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = ''
				this.dialogVisibleMessSelect = true
			},
			sendMessageToSelectSubmit() {
				let _this = this
				this.$refs['msgSelectFrom'].validate((valid) => {
					if (valid) {
						let idList = []
						for (var i in _this.multipleSelection) {
							idList.push(_this.multipleSelection[i].id)
						}
						let param = {
							userIdList: idList,
							sysMessage: _this.msgOne
						}
						console.log('kkk', param)
						sendToSelect(param).then(response => {
							this.$message({
								message: '信息发送成功',
								type: 'success',
								duration: 1000
							});
							_this.sendMessageToSelectReset()
						});
					} else {
						_this.$message({
							message: '请输入正确的数据',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			sendMessageToSelectReset() {
				this.$refs['msgSelectFrom'].resetFields();
				this.msgOne.userId = null
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = ''
				this.dialogVisibleMessSelect = false
			},
			sendMessageToAll() {
				this.msgOne.userId = null
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = ''
				this.dialogVisibleMessAll = true
			},
			sendMessageToAllSubmit() {
				let _this = this
				this.$refs['msgAllFrom'].validate((valid) => {
					if (valid) {
						sendToAll(_this.msgOne).then(response => {
							this.$message({
								message: '信息发送成功',
								type: 'success',
								duration: 1000
							});
							_this.sendMessageToAllReset()
						});
					} else {
						_this.$message({
							message: '请输入正确的数据',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			sendMessageToAllReset() {
				this.$refs['msgAllFrom'].resetFields();
				this.msgOne.userId = null
				this.msgOne.code = '云链助手'
				this.msgOne.params = ''
				this.msgOne.content = ''
				this.msgOne.membername = ''
				this.dialogVisibleMessAll = false
			},
			addBlacne(index, row) {
				this.blance.dialogVisible = true
				this.blance.id = row.id
			},
			addIntegration(index, row) {
				this.integration.dialogVisible = true
				this.integration.id = row.id
			},
			handleEditBlance() {
				if (this.blance.blance == null) {
					this.$message({
						message: '请输入余额',
						type: 'warning',
						duration: 1000
					})
					return
				}
				this.$confirm('是否要进行余额充值', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = new URLSearchParams()
					params.append('id', this.blance.id)
					params.append('blance', this.blance.blance)

					handleEditBlance(params).then(response => {
						this.$message({
							message: '余额充值成功',
							type: 'success',
							duration: 1000
						})
						this.getList()
					})
					this.blance.dialogVisible = false
				})
			},
			handleEditIntegration() {
				if (this.integration.integration == null) {
					this.$message({
						message: '请输入积分',
						type: 'warning',
						duration: 1000
					})
					return
				}
				this.$confirm('是否要进行积分充值', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = new URLSearchParams()
					params.append('id', this.integration.id)
					params.append('integration', this.integration.integration)

					handleEditIntegration(params).then(response => {
						this.$message({
							message: '积分充值成功',
							type: 'success',
							duration: 1000
						})
						this.getList()
					})
					this.integration.dialogVisible = false
				})
			},
			handleShowVeriyEditDialog(index, row) {
				this.dialogVisible = true
				fetchBlanceList({
					memberId: row.id
				}).then(response => {
					this.blanceList = response.data.records
				})
			},
			handleShowIntegrationDialog(index, row) {
				this.dialogVisible1 = true
				fetchIntegrationList({
					memberId: row.id
				}).then(response => {
					this.integrationList = response.data.records
				})
			},

			handleShowChange(index, row) {
				let params = new URLSearchParams()
				params.append('ids', row.id)
				params.append('showStatus', row.showStatus)
				updateShowStatus(params).then(response => {
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					})
				})
			},
			getList() {
				this.listLoading = true
				fetchList(this.listQuery).then(response => {
					this.listLoading = false
					this.list = response.data.records
					this.total = response.data.total
					this.totalPage = response.data.pages
					this.pageSize = response.data.size
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			handleUpdate(index, row) {
				this.$router.push({
					path: '/ums/updateMember',
					query: {
						id: row.id
					}
				})
			},
			handleDelete(index, row) {
				this.$confirm('是否要删除该会员', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteMember(row.id).then(response => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1000
						})
						this.getList()
					})
				})
			},
			getProductList(index, row) {
				console.log(index, row)
			},
			getProductCommentList(index, row) {
				console.log(index, row)
			},
			handleFactoryStatusChange(index, row) {
				var data = new URLSearchParams()
				data.append('ids', row.id)
				data.append('factoryStatus', row.factoryStatus)
				updateFactoryStatus(data)
					.then(response => {
						this.$message({
							message: '修改成功',
							type: 'success',
							duration: 1000
						})
					})
					.catch(error => {
						if (row.factoryStatus === 0) {
							row.factoryStatus = 1
						} else {
							row.factoryStatus = 0
						}
					})
			},
			handleShowStatusChange(index, row) {
				let data = new URLSearchParams()
				data.append('ids', row.id)
				data.append('showStatus', row.showStatus)
				updateShowStatus(data)
					.then(response => {
						this.$message({
							message: '修改成功',
							type: 'success',
							duration: 1000
						})
					})
					.catch(error => {
						if (row.showStatus === 0) {
							row.showStatus = 1
						} else {
							row.showStatus = 0
						}
					})
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.getList()
			},
			searchMemberList() {
				this.listQuery.pageNum = 1
				this.getList()
			},
			updateOrderInfo() {
				updateMemberOrderInfo().then(response => {
					this.getList()
					this.$message({
						message: '同步成功',
						type: 'success',
						duration: 1000
					})
				})
			},
			handleResetSearch() {

				this.listQuery = {
					nickname: null,
					pageNum: 1,
					pageSize: 10
				};
			},
			handleSearchList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},

			handleBatchOperate() {
				console.log(this.multipleSelection)
				if (this.multipleSelection < 1) {
					this.$message({
						message: '请选择一条记录',
						type: 'warning',
						duration: 1000
					})
					return
				}
				let showStatus = 0
				if (this.operateType === 'showMember') {
					showStatus = 1
				} else if (this.operateType === 'hideMember') {
					showStatus = 0
				} else {
					this.$message({
						message: '请选择批量操作类型',
						type: 'warning',
						duration: 1000
					})
					return
				}
				let ids = []
				for (let i = 0; i < this.multipleSelection.length; i++) {
					ids.push(this.multipleSelection[i].id)
				}
				let data = new URLSearchParams()
				data.append('ids', ids)
				data.append('showStatus', showStatus)
				updateShowStatus(data).then(response => {
					this.getList()
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					})
				})
			},
			addMember() {
				this.$router.push({
					path: '/pms/addMember'
				})
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>
