<template>
	<div>
				<div style="display: inline-block;">
					<div style="position: relative;display: inline-block;margin: 5px;">
						<span>留言内容：</span>
						<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入留言内容"
							v-model="contentS">
						</el-input>&nbsp;&nbsp;
					</div>
					<el-button style='margin: 5px;' size="mini" type="primary" icon="document" @click="select">查询
					</el-button>
					<el-button style='margin: 5px;' size="mini" type="primary" icon="document" @click="cleans">重置
					</el-button>
				</div>
				<!-- 留言板表格-->
				<el-table v-loading="tableDataLoading" :data="tableData.records">
					<el-table-column prop="messageId" label="编号" width="200">
					</el-table-column>
					<el-table-column prop="userId" label="用户ID">
					</el-table-column>
					<el-table-column prop="userName" label="用户名称" width="200">
					</el-table-column>
                    <el-table-column prop="imageUrl" label="头像">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatar" width="60" height="60" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="留言内容" width="200">
					</el-table-column>
                    <el-table-column prop="phone" label="用户电话" width="200">
					</el-table-column>
                    <el-table-column prop="isDelete" label="是否删除">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isDelete == 0">否</span>
                            <span v-if="scope.row.isDelete == 1" style="color: #f56c6c;">是</span>
                        </template>
                    </el-table-column>
					<el-table-column prop="status" label="是否采纳">
						<template slot-scope="scope">
                            <span v-if="scope.row.status == 0">未处理</span>
                            <span v-if="scope.row.status == 1" style="color: #67c23a;">已采纳</span>
                            <span v-if="scope.row.status == 2" style="color: #f56c6c;">已拒绝</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200">
					</el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="200">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="220" fixed='right' align="center">
						<template slot-scope="scope">
							<!-- 采纳：已处理（1/2）则禁用 -->
							<el-button size="mini" type="primary" style="margin: 5px;"
								@click="messageUpdate(scope.row,1)"
								:disabled="scope.row.status === 1 || scope.row.status === 2">
								采纳
							</el-button>
							<!-- 拒绝：已处理（1/2）则禁用 -->
							<el-button size="mini" type="primary" style="margin: 5px;"
								@click="messageUpdate(scope.row,2)"
								:disabled="scope.row.status === 1 || scope.row.status === 2">
								拒绝
							</el-button>
							<!-- 删除：已删除（isDelete=1）则禁用 -->
							<el-button size="mini" type="danger" style="margin: 5px;"
								@click="messageDelete(scope.row)"
								:disabled="scope.row.isDelete === 1">
								删除
							</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, 40]" :page-size="limit" :current-page="page"
						layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
					</el-pagination>
				</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				size: 10,
				page: 1,
				limit: 10,
                contentS: '',
				tableData: {},
                tableDataLoading: true,
			}
		},
		methods: {
			handleSizeChange(val) {
				this.limit = val
				this.classSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.classSelect()
			},

			// 获取服务分类数据
			classSelect() {
        		this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('messageBoard/selectMessageBoardList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'key': this.contentS,
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						});
					}
				})
			},
            // 查询
            select() {
                this.page = 1
                this.limit = 10
                this.classSelect()
            },
            // 重置
            cleans() {
                this.contentS = ''
                this.classSelect()
            },
			// 删除留言
			messageDelete(row) {
				this.$confirm(`确定删除此条留言?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('messageBoard/deleteMessageBoard'),
						method: 'get',
						params: this.$http.adornParams({
							'messageBoardId': row.messageId
						})
					}).then(({
						data
					}) => {
						if(data.code==0){
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
										this.classSelect()
								}
							})
						}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
							})
						}
					})
				}).catch(() => {})
			},
			// 更新留言（带回复输入框）
			messageUpdate(row,status) {
				let title = status == 1 ? '采纳留言' : '拒绝留言';
				let content = status == 1 ? '请输入回复内容（采纳）：' : '请输入回复内容（拒绝）：';
				
				// 弹出可输入文本的弹窗
				this.$prompt(content, title, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					// type: 'warning',
					inputPlaceholder: '请输入回复内容',
					inputType: 'textarea',
					inputRows: 3,
				}).then(({ value }) => {
					this.$http({
						url: this.$http.adornUrl('messageBoard/updateMessageBoardStatus'),
						method: 'get',
						params: this.$http.adornParams({
							'messageBoardId': row.messageId,
							'status': status,
							'content': value
						})
					}).then(({ data }) => {
						if(data.code==0){
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.classSelect()
								}
							})
						}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
							})
						}
					})
				}).catch(() => {
					this.$message.info('已取消操作');
				})
			},
		},
		mounted() {
			this.classSelect()
		},
	}
</script>

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

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.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;
	}
</style>