<template>
	<div class="applyUserList_container">
		<div class="applyUserList_top">
			<el-select v-model="custom_type" placeholder="请选择状态" style="width:200px;marginRight:16px;" clearable>
				<el-option
					v-for="item in statusArr"
					:key="item.name"
					:label="item.name"
					:value="item.name">
				</el-option>
			</el-select>
			<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="applyUserList_cont">
			<el-table
				ref="userTable"
				:data="tableData"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
				border>
					<el-table-column
					prop="RealName"
					label="姓名"
					align="center">
						<template slot-scope="{row}"> <span>{{row.RealName}}</span></template>
					</el-table-column>
					<el-table-column
					prop="Mobile"
					label="手机号码"
					align="center">
						<template slot-scope="{row}"> <span>{{row.Mobile}}</span></template>
					</el-table-column>
					<el-table-column
					prop="Email"
					label="邮箱"
					align="center"
					min-width="120px">
						<template slot-scope="{row}"> <span>{{row.Email}}</span></template>
					</el-table-column>
                    <el-table-column
					prop="CreateTime"
					label="申请时间"
					min-width="130"
					align="center">
						<template slot-scope="{row}"> <span>{{$moment(row.CreateTime).format('YYYY.MM.DD HH:mm:SS')}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Source"
					label="申请来源"
					min-width="80"
					align="center">
						<template slot-scope="{row}"> <span>{{setSource(row.Source)}}({{row.SourceAgent==1?'小程序':'PC端'}})</span> </template>
					</el-table-column>
					<el-table-column
					prop="CompanyName"
					label="公司名"
					align="center">
						<template slot-scope="{row}"> 
							<span style="color:#409EFF;cursor:pointer;" 
							v-if="row.CompanyId>1"
							@click="$router.push({
							path:'/RaiDetail',
							query:{
								id:row.CompanyId
							}})">{{row.UserCompanyName}}</span>
							<span v-else>{{row.UserCompanyName}}</span>
						</template>
					</el-table-column>
					<el-table-column
					prop="SellerName"
					label="所属销售"
					align="center">
						<template slot-scope="{row}"> <span>{{row.SellerName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Status"
					label="用户状态"
					align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="110">
						<template slot-scope="{row}">
							<span class="editsty" v-if="row.Permission" @click="showPermission(row)">关注品种</span>
							<span class="editsty" v-if="row.BusinessCardUrl" @click="previewImg(row)">查看名片</span>
							<span class="editsty" v-if="row.OpStatus===0 && row.IsMove===0" @click="dealHandle(row)">标记处理</span>
							<span class="editsty" v-if="row.IsMove===0" @click="moveHandle(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" />
		<!-- 关注品种弹窗 -->
		<permissionDia :isShow.sync="isShowPermission" :item="dealObj" />
		<!-- 处理弹窗 -->
		<intervewDia :isShowDia.sync="isShowDia" :item="dealObj"/>
		<!-- 移动弹窗 -->
		<moveCustomDia :isShow.sync="isShowMoveDia" :item="dealObj" v-if="isShowMoveDia"/>
	</div>
</template>

<script>
import { ficcManageInterface } from '@/api/api.js'
import mPage from '@/components/mPage.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import intervewDia from './components/interviewDia.vue'
import permissionDia from './components/permissionDia.vue'
import moveCustomDia from './components/moveCustomDia.vue'

export default {
	name:'ApplyList',
	components: {mPage,ElImageViewer,intervewDia,permissionDia,moveCustomDia},
	watch:{
		search_txt(newval) {
			this.page_no = 1;
			this.getTableData();
		},
		custom_type(newval) {
			this.page_no = 1;
			this.getTableData();
		}
	},
	data () {
		return {
			custom_type:'',
			statusArr:[
				{ name:'潜在用户',value:1 },
				{ name:'权益用户',value:2 },
				{ name:'流失',value:3 },
				{ name:'冻结',value:4 },
			],
			tableData:[],
			total:0,
			page_no:sessionStorage.getItem('applyUserListBack')?JSON.parse(sessionStorage.getItem('applyUserListBack')).page_no:1,
			pageSize:10,
			search_txt:'',
			showViewer:false,
			reviewList:[],
			isShowDia:false,//处理弹窗
			dealObj: {},
			isShowPermission:false,	//关注品种弹窗
			isShowMoveDia:false	//移动弹窗
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no:this.page_no,
			keyword:this.search_txt
		}
		sessionStorage.setItem('applyUserListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('applyUserListBack')
		}
		next()
	},
	methods: {
		setSource(e){//来源 1-我的 2-活动 3-图库 4-研报
			if(e==1){
				return '我的'
			}else if(e==2){
				return '活动'
			}else if(e==3){
				return '图库'
			}else if(e==4){
				return '研报'
			}
		},

		/* 获取表格数据 */
		getTableData() {
			ficcManageInterface.applyRecordList({
				PageSize: this.pageSize,
				CurrentIndex: this.page_no,
				Keyword: this.search_txt,
				State: this.custom_type
			}).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.BusinessCardUrl.split('#');
		},
		/* 关闭预览 */
		closeViewer() {
			this.reviewList = [];
			this.showViewer = false;
		},
		// 标记处理
		dealHandle(item) {
			this.dealObj = item;
			this.isShowDia = true;
		},
		// 移动
		moveHandle(item) {
			this.dealObj = item;
			this.isShowMoveDia = true;
		},
		/* 处理申请 */
		dealApplyHandle() {
			raiInterface.delApply({
				ApplyRecordId: this.dealObj.ApplyRecordId
			}).then(res => {
				if(res.Ret === 200) {
					this.$message.success(res.Msg)
					this.dealObj.Status = 1;
					this.isShowDia = false;
				}
			})
		},
		showPermission(item){
			this.dealObj = item;
			this.isShowPermission=true
		}
	},
	created() {
	},
	mounted() {
		if(sessionStorage.getItem('applyUserListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('applyUserListBack'));
			this.search_txt = backData.keyword;
			this.page_no = backData.page_no;
		}
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
.applyUserList_container {
	.applyUserList_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);
	}
	.applyUserList_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>