<template>
	<div>
		<div class="row allAlignment">
			<leftNav />
			<div>
				<hader />
				<messageCenter></messageCenter>
				<div class="column allAlignment box" style="background:#F6F8FF; ">
					<div style="height:8vh; background:#FFF; " class="row allAlignment">
						<div class="name_box row center">
							<span>留言列表</span>
						</div>
						<div class="row center allAlignment">
							<el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
								></el-option>
							</el-select>
							<div>
								<el-input
										placeholder="请输入内容"
										size="mini"
										v-model="input3"
										class="input-with-select"
								>
									<el-button slot="append" icon="el-icon-search"></el-button>
								</el-input>
							</div>
						</div>
					</div>
					<div style="margin:0 20px;">
						<el-table
								:header-cell-style="{background:'#eef1f6',color:'#606266'}"
								:row-style="{background:'#ffffff',color:'#606266'}"
								:data="tableData"
								stripe
								@row-dblclick="click_row"
								style="width: 100%"
						>
							<el-table-column prop="name" label="用户名"></el-table-column>
							<el-table-column prop="time" label="留言时间" width="180"></el-table-column>
							<el-table-column prop="content" label="留言内容"></el-table-column>
							<el-table-column prop="phone" label="手机"></el-table-column>
							<el-table-column prop="email" label="邮箱"></el-table-column>
							<el-table-column prop="endTime" label="当前状态">
								<template slot-scope="scope">
                  <span
						  style="color:#FF6600"
						  v-if="scope.row.currentState === '未回复'"
				  >{{scope.row.currentState}}</span>
									<span v-if="scope.row.currentState === '已回复'">{{scope.row.currentState}}</span>
								</template>
							</el-table-column>
							<!-- <el-table-column
											  prop="currentState"
											  label="当前状态"
											  width="100"
											  :filters="[{ text: '未回复', value: '未回复' }, { text: '已回复', value: '已回复' }]"
											  :filter-method="filterTag"
											  filter-placement="bottom-end">
											  <template slot-scope="scope">
												  <el-tag
												  :type="scope.row.currentState === '未回复' ? 'primary' : 'success'"
												  disable-transitions>{{scope.row.currentState}}</el-tag>
											  </template>
							</el-table-column>-->
							<el-table-column prop="satisfaction" label="处理人"></el-table-column>
						</el-table>
					</div>
					<div v-show="pages >9" style=" padding: 10px;">
						<el-pagination background layout="prev, pager, next" :total="pages"></el-pagination>
					</div>
					<div class="right_box" v-show="isShow">
						<historicalRecord :show="isShow" :uid="uid" v-on:childValue="childValue" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "@/css/index.css";
	import leftNav from "@/components/leftNav";
	import hader from "@/components/hader";
	import historicalRecord from "@/components/historicalRecord";
	import messageCenter from "@/components/messageCenter";

	export default {
		name: "SessionHistory",
		data() {
			return {
				isShow: false,
				uid: "",
				pages: 10,
				tableData: [],
				options: [
					{
						value: "今日",
						label: "今日"
					},
					{
						value: "最近3天",
						label: "最近3天"
					},
					{
						value: "最近7天",
						label: "最近7天"
					},
					{
						value: "最近15天",
						label: "最近15天"
					},
					{
						value: "最近30天",
						label: "最近30天"
					}
				],
				value: "",
				input3: "",
				startTime: "", // 请求结果开始时间
				endTime: "" // 请求结果结束时间
			};
		},
		components: {
			leftNav,
			hader,
			historicalRecord,
			messageCenter
		},
		mounted() {
			this.value = this.options[2].value;
		},
		computed: {
			// 获取客服查询时间
			getValueChange() {
				return this.value;
			}
		},
		watch: {
			getValueChange(val) {
				this.getStartEndAjaxTime(val);
			}
		},
		methods: {
			// 获取请求参数开始和结束时间
			getStartEndAjaxTime(e) {
				let time = new Date();
				let time2 = new Date(time)
				function getDate (year,month,date){
					return year+'-'+((month+1)<10?'0'+(month+1):month+1)+'-'+(date<10?'0'+date:date)
				}
				if (e == "今日") {
					time2.setDate(time.getDate())
				} else if (e == "最近3天") {
					time2.setDate(time.getDate()-3)
				} else if (e == "最近7天") {
					time2.setDate(time.getDate()-7)
				} else if (e == "最近15天") {
					time2.setDate(time.getDate()-15)
				} else if (e == "最近30天") {
					time2.setDate(time.getDate()-30)
				}
				this.endTime = getDate(time.getFullYear(),time.getMonth(),time.getDate())
				this.startTime = getDate(time2.getFullYear(),time2.getMonth(),time2.getDate())
				this.getSessionList()
			},
			// 获取列表数据
			getSessionList() {
				console.log('start',this.startTime,'end',this.endTime);
				let str =
					"index" + "customer-service" + "message" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					}
				};
				this.post(
					"api/service/Message/index",
					{
						start_time: this.startTime,
						end_time: this.endTime
					},
					obj
				).then(res => {
					console.log(res)
					if(res.data.data){
						this.tableData = res.data.data
					}
				});
			},
			click_row(row, column, event) {
				// console.log(this.value);
				// console.log(row.uid)
				this.uid = row.uid;
				this.isShow = true;
			},
			childValue(e) {
				//console.log(e);
				this.isShow = e;
			},

			// resetDateFilter() {
			//     this.$refs.filterTable.clearFilter('date');
			// },
			// clearFilter() {
			//     this.$refs.filterTable.clearFilter();
			// },
			// formatter(row, column) {
			//     return row.address;
			// },
			filterTag(value, row) {
				return row.tag === value;
			}
		}
	};
</script>

<style >
	.el-pagination .btn-next .el-icon{
		display: none;
	}
	.cell {
		text-align: center;
	}
	.el-pagination {
		text-align: center;
		font-size: 0;
	}
	.el-table::before {
		z-index: 0 !important;
	}

	.input-with-select {
		width: 100%;
	}
	.name_box {
		margin-left: 20px;
		font-size: 14px;
		font-weight: bold;
		color: rgba(102, 102, 102, 1);
	}
	.box {
		width: 100%;
	}

	.right_box {
		position: fixed;
		top: 33px;
		right: 0;
		width: 100%;
		/* height: 100vh;
			  background: red; */
		/* //background: rgba(255, 255, 255, 0.315); */
	}
	.el-input-group__append {
		text-align: center;
	}
</style>
<style scoped>
	.el-table td {
		padding: 8px 0;
	}
</style>
