<template>
	<div class="adviceList_container">
		<div class="adviceList_top">
			<el-input
				placeholder="姓名/手机号"
				v-model="search_txt"
				clearable
				style="maxWidth:500px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="adviceList_cont">
			<el-table
				ref="userTable"
				:data="tableData"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
				border>
					<el-table-column
					prop="UserRealName"
					label="姓名"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.UserRealName}}</span></template>
					</el-table-column>
					<el-table-column
					prop="Mobile"
					label="手机号"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.Mobile}}</span></template>
					</el-table-column>
					<el-table-column
					prop="CompanyName"
					label="客户名称"
					align="center">
						<template slot-scope="scope"> <span style="color:#409EFF;cursor:pointer;" @click="$router.push({
						path:'/RaiDetail',
						query:{
							id:scope.row.CompanyId
						}})">{{scope.row.CompanyName}}</span></template>
					</el-table-column>
					<el-table-column
					prop="SalesRealName"
					label="所属销售"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.SalesRealName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Advice"
					label="优化建议"
					align="center"
					min-width="300px">
						<template slot-scope="scope"> <span>{{scope.row.Advice}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="CreateTime"
					label="创建时间"
					min-width="130px"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.CreateTime}}</span> </template>
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="110">
						<template slot-scope="scope">
							<span class="editsty" v-if="scope.row.AdviceImgUrl" @click="previewImg(scope.row)">查看图片</span>
						</template>
					</el-table-column>
					<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
						<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
						<span>暂无数据</span>
					</div>
			</el-table>
			<el-col :span="24" class="toolbar">
				<m-page 
				:total="total"
				:page_no="page_no"
				@handleCurrentChange="handleCurrentChange"/>
			</el-col>
		</div>
		<!-- 图片预览 -->
		<el-image-viewer 
		v-if="showViewer" 
		:on-close="closeViewer" 
		:url-list="reviewList" />
	</div>
</template>

<script>
import { raiInterface } from '@/api/api.js'
import mPage from '@/components/mPage.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
	name:'',
	components: {mPage,ElImageViewer},
	watch:{
		search_txt(newval) {
			this.page_no = 1;
			this.getTableData();
		}
	},
	data () {
		return {
			tableData:[],
			total:0,
			page_no:sessionStorage.getItem('adviceListBack')?JSON.parse(sessionStorage.getItem('adviceListBack')).page_no:1,
			pageSize:10,
			search_txt:'',
			showViewer:false,
			reviewList:[]
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no:this.page_no,
			keyword:this.search_txt
		}
		sessionStorage.setItem('adviceListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('adviceListBack')
		}
		next()
	},
	methods: {
		/* 获取表格数据 */
		getTableData() {
			raiInterface.adviceList({
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				KeyWord:this.search_txt
			}).then(res => {
				if(res.Ret === 200) {
					this.tableData = res.Data.List || [];
					this.total = res.Data.Paging.Totals;
				}
			})
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},
		/* 预览名片 */
		previewImg(item) {
			this.showViewer = true;
			this.reviewList = item.AdviceImgUrl.split('#');
		},
		/* 关闭预览 */
		closeViewer() {
			this.reviewList = [];
			this.showViewer = false;
		},
	},
	created() {
	},
	mounted() {
		if(sessionStorage.getItem('adviceListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('adviceListBack'));
			this.search_txt = backData.keyword;
			this.page_no = backData.page_no;
		}
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
.adviceList_container {
	.adviceList_top {
		display: flex;
		justify-content:flex-end;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.adviceList_cont {
		min-height: calc(100vh - 320px);
		padding: 20px 30px 80px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
}
</style>