<template>
	<div class="interviewList_container">
		<div class="interviewList_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="interviewList_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="Status"
					label="申请状态"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.Status}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="CreateTime"
					label="申请时间"
					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" style="marginRight:10px;" @click="dialogHandle(scope.row,'detail')">查看详情</span>
							<template v-if="scope.row.Status==='待邀请'||scope.row.Status==='待访谈'">
								<span class="editsty" style="marginRight:10px;" @click="dialogHandle(scope.row,'update')">状态更新</span>
								<span class="editsty" style="marginRight:10px;" @click="dialogHandle(scope.row,'cancel')">取消</span>
							</template>
						</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>
		<!-- 弹窗操作 -->
		<intervewDia
		:isShowDia="isShowDia"
		:title="diaTit"
		:status="status"
		:itemObj="itemObj"
		:applyId="applyId"
		@cancel="isShowDia=false"
		@over="diaOverHandle"/>
	</div>
</template>

<script>
import { raiInterface } from '@/api/api.js'
import mPage from '@/components/mPage.vue'
import intervewDia from '../components/interviewDia.vue'
export default {
	name:'',
	components: {mPage,intervewDia},
	watch:{
		search_txt(newval) {
			this.page_no = 1;
			this.getTableData();
		}
	},
	data () {
		return {
			total:0,
			page_no:sessionStorage.getItem('interviewListBack')?JSON.parse(sessionStorage.getItem('interviewListBack')).page_no:1,
			pageSize:10,
			search_txt:'',
			tableData:[],
			diaTit:'',
			isShowDia:false,
			status:'',
			applyId:'',
			itemObj:[]
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no:this.page_no,
			keyword:this.search_txt
		}
		sessionStorage.setItem('interviewListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('interviewListBack')
		}
		next()
	},
	methods: {
		/* 获取表格数据 */
		getTableData() {
			raiInterface.interviewList({
				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();
		},
		/* 操作事件 */
		dialogHandle(item,type) {
			this.diaTit = type;
			this.status = item.Status;
			this.applyId = item.InterviewApplyId;
			this.itemObj = type==='detail'? [item] : [];
			this.isShowDia = true;
		},
		/* 操作完成 */
		diaOverHandle() {
			this.isShowDia = false;
			this.getTableData()
		}
	},
	created() {
	},
	mounted() {
		if(sessionStorage.getItem('interviewListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('interviewListBack'));
			this.search_txt = backData.keyword;
			this.page_no = backData.page_no;
		}
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
.interviewList_container {
	.interviewList_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);
	}
	.interviewList_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>