<template>
	<div class="chatBox">
		<el-header height='80px'>
			<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
				<el-col class="tit nopd">
					<span @click="back()" class="back pointer"></span>
					<span>留言知识库</span>
				</el-col>
			</el-row>
		</el-header>
		<div class="cationer">
			<el-main class="">
				<div class="leaveCont">
					<div class=" head row">
						<el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">
							<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
						<el-input
								placeholder="请输入关键词"
								suffix-icon="el-icon-search"
								v-model="crux"
								class="crux"
						>
						</el-input>
						<div class="">
							<el-button type="primary" @click="search()"
									   style="height:40px;width:100px;margin-left:10px;">查询
							</el-button>
						</div>
					</div>

					<div class="nav">
						<div class="list" v-for="item in problemType" :key="item.id"
							 @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">
							<span>{{item.name}}</span>
						</div>
					</div>
					<!-- 折叠面板 -->
					<div class="fold" v-if="noBase">
						<el-collapse accordion>
							<el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">
								<template slot="title">
									<div style="width:100%;" class="quesTit">
										<span>{{item.content}}</span>
										<span>{{item.add_time}}</span>
									</div>
								</template>
								<div>
									<div class="conversationBox">
										<div class="timer">
											{{item.add_time}}
										</div>
										<div class="customer row allAlignment">
											<div></div>
											<div class="row">
												<div class="cont right">
													<div>{{item.content}}</div>
												</div>
												<div class="headImg" style="margin-right:0">
													<img src="./../assets/st-img/user.png" alt="">
												</div>
											</div>
										</div>
									</div>
									<div class="conversationBox">
										<div class="timer">
											{{item.dealWith_time}}
										</div>
										<div class=" row">
											<div class="conversation row">
												<div class="headImg">
													<img src="./../assets/st-img/headAdvent.png" alt="">
												</div>
												<div class="cont left">
													<div>{{item.reply_content}}</div>
												</div>

											</div>
											<div style="width:66px;"></div>
										</div>
									</div>
								</div>

							</el-collapse-item>
						</el-collapse>
					</div>
					<div v-if="!noBase">
						<div class="noBase">
							<span>暂无数据</span>
						</div>
					</div>
				</div>
				<div class="launch">
					<el-button type="primary" @click="launchLeave">发起留言</el-button>
				</div>
			</el-main>
		</div>
	</div>
</template>
<script>
	import '../css/index.css'

	export default {
		name: 'leaveMsg',
		data() {
			return {
				dialogImageUrl: '',
				selt: {value: 'week', label: '最近一周'},//选中默认值
				seltValue: '', // 选中的值
				crux: '',  //关键词
				activeNames: '', //折叠面板选中效果
				activity: '1', //活动列表选中状态
				options: [{
						value: 'week',
						label: '最近一周'
					}, {
						value: 'oneMonth',
						label: '最近一个月'
					}, {
						value: 'threeMonth',
						label: '最近三个月'
				}],
				problemType: '', //类
				knowLedgeBase: '', //知识库问答数据
				problemName: '账号',//类名
				noBase: true  //无数据状态
			}
		},
		methods: {
			// 返回传值到父组件
			back() {
				this.$emit('value', 10)
			},
			// 跳转发起留言
			launchLeave() {
				this.$emit('value', 1000)
			},
			// 切换类
			acty(type, name) {
				this.activity = type;
				this.problemName = name;
			},
			// 获取下拉框的值
			selectGet(value) {
				// 获取下拉框的value值
				this.seltValue = value;
			},
			// 获取数据
			getLeave(data) {
				this.$axios.post('/api/index/Message/index', data).then(res => {
					if (res.data.status === 1) {
						this.knowLedgeBase = res.data.data;
						if (this.knowLedgeBase.length > 0) {
							this.noBase = true;
						} else {
							this.noBase = false;
						}
					}
					console.log('======获取数据=========', res);
				})
			},
			// 查询数据
			search() {
				let optionCont = '';
				if (this.seltValue == '') {
					optionCont = this.selt.value;
				} else {
					optionCont = this.seltValue;
				}
				let data = {
					time: optionCont,
					key: this.crux,
					type: this.problemName
				}
				this.getLeave(data)
			}
		},
		mounted() {
			this.activity = '1';
			this.$axios.post('/api/index/Message/type').then(res => {
				if (res.data.status === 1) {
					this.problemType = res.data.data;
					let optionCont = '';
					if (this.seltValue == '') {
						optionCont = this.selt.value;
					} else {
						optionCont = this.seltValue;
					}
					let data = {
						time: optionCont,
						key: this.crux,
						type: this.problemName
					}
					// console.log('1213',this.problemType)
					// 获取留言数据
					this.getLeave(data)
				}
			})
		}
	}
</script>
<style scoped>
	.chatBox {
		width: 700px;
	}

	.el-header {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
	}

	.tit {
		height: 100%;
		line-height: 80px;
		text-align: left;
		padding-left: 20px;
	}

	.tit span {
		font-size: 18px;
	}

	.el-col span {
		font-size: 18px;
		color: #FFFFFF;
	}

	.imgBox {
		text-align: right;
	}

	.imgBox img {
		margin-right: 20px;
	}

	.imgBox img:nth-last-child(1) {
		margin-right: 0
	}

	.el-main {
		background: #fff;
		width: 445px;
		padding: 0;
	}

	.el-aside {
		background: #F5F5F5;
		width: 255px;
	}

	.cationer, .artificial {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.rt {
		width: 255px;
		box-sizing: inherit;
	}

	.artificial {
		/* width: 150px; */
		/* padding:0 20px; */
		margin-top: 23px;
		margin-bottom: 9px;
		vertical-align: middle;
		/* flex-direction: column;*/

	}

	.infor div {
		margin-bottom: 3px;
	}

	.infor div span, .autograph span {
		color: #999999;
		font-size: 14px;
		font-weight: 400;
	}

	.infor div span:nth-child(2), .autograph span:nth-child(2) {
		color: #666666;
		margin-left: 4px;
	}

	.headPortrait {
		width: 100px;
		height: 100px;
	}

	.autograph {
		margin-bottom: 11px;
	}

	.advent {
		border-top: 1px solid #DDDDDD;
		padding: 20px;
	}

	.advent img {
		width: 215px;
		height: 350px;
	}

	.pd {
		padding: 20px;
	}

	.pd20 {
		padding: 0 20px;
	}

	/* 留言框 */
	.el-main {
		position: relative;
		height: 600px;
		overflow: auto;
	}

	.el-main .leaveCont {
		box-sizing: border-box;
		height: 510px;
		padding: 20px 20px 13px;
	}

	label {
		font-size: 14px;
		color: #666666;

	}


	.star {
		color: #F04992;
		vertical-align: middle;

	}

	.tips {
		font-size: 12px;
		color: #F04992;
		margin-left: 20px;
	}

	.addPhoto {
		margin: 20px 0 0;
	}

	.addPhoto label {
		margin-bottom: 14px;
	}

	.el-textarea {
		margin-top: 10px;
	}

	.btn {
		position: absolute;
		/* bottom: 23px; */
		right: 20px;
	}

	.el-button {
		width: 120px;
		height: 48px;
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
	}

	.back {
		display: inline-block;
		width: 25px;
		height: 25px;
		background: url("./../assets/st-img/back.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	.nopd {
		padding: 0;
	}

	.pointer {
		cursor: pointer;
	}

	.selt {
		margin-right: 15px;
		width: 160px;
	}

	.cationer .head {
		width: 100%;
		margin-bottom: 20px;
	}

	.crux {
		width: 230px;
	}

	/* 主体 */
	.nav {
		height: 40px;
		background: #5EA0F7;
		border-radius: 5px 5px 0px 0px;
		display: flex;
		justify-content: space-between;
		padding: 10px 10px 0;
	}

	.nav .list {
		width: 90px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
	}

	.nav .list span {
		color: #fff;
	}

	.listActy {
		background: #fff;
		border-radius: 5px 5px 0px 0px;

	}

	.listActy span {
		color: #5EA0F7 !important;
	}

	.list .quesTit {
		height: 40px;;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list .el-collapse-item__header {
		color: #666666 !important;
	}

	.list .quesTit span {
		color: #666666;
		font-size: 16px;
	}

	.list .quesTit span:nth-last-child(1) {
		color: #999999;
		font-size: 14px;
		margin-right: 10px;
	}

	/* 会话 */
	.conversationBox {
		margin-top: 26px;
	}

	.timer {
		text-align: center;
		margin: 10px 0;
		color: #999999;
		font-size: 12px;
	}

	.headImg {
		width: 40px;
		height: 40px;
		margin-right: 13px;
	}

	.headImg img {
		width: 40px;
		height: 40px;
	}

	.conversation .cont, .customer .cont {
		background: #ffffff;
		padding: 9px 8px 12px 10px;
		display: inline-block;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
		position: relative;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -4px;
		top: 5px;
		width: 5px;
		height: 9px;
		background: #fff;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		/* z-index: -1; */
		border-left: 1px solid #dfdfdf;
		border-top: 1px solid #dfdfdf;
	}

	div.noafter::after {
		content: '';
		width: 0;
		height: 0;
		display: inline;
		position: relative;
		border: 0;
	}

	.conversation .cont div, .customer .cont div {
		color: #666666;
		font-size: 16px;
	}

	.customer {
		justify-content: space-between;
	}

	.customer .cont {
		margin-right: 13px;
		border: 0;
		background: #5EA0F7;
	}

	.customer .cont div {
		color: #FFFFFF;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -3px;
		top: 6px;
		width: 5px;
		height: 9px;
		background: #5ea0f7;
		-webkit-transform: skewX(-30deg);
		transform: skewX(-30deg);
		border-left: 1px solid #5ea0f7;
		border-top: 1px solid #5ea0f7;
	}

	.col {
		color: #999999;
	}

	.change {
		color: #5ea0f7;
	}

	.launch {
		box-sizing: border-box;
		border-top: 1px solid #DDDDDD;
		padding: 16px 20px 0 0;
		position: relative;
		height: 80px;
	}

	.launch button {
		position: absolute;
		right: 20px;
	}

	.noBase {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #e0e0e0;
		text-align: center;
	}
</style>
