<template>
	<div class="pickCustom_container">
		<div class="customList_bot_top">
			<div>
				<!-- <el-date-picker
				v-model="date"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="dateChange"
				value-format="yyyy-MM-dd"
				style="width:300px;">
				</el-date-picker> -->
				<date-picker 
				v-model="date" 
				type="date" 
				range
				value-type="format"
				placeholder="创建日期" 
				@change="dateChange"></date-picker>
			</div>
			<el-input
			placeholder="客户名称/社会信用码/手机号码/邮箱"
			v-model="search_txt"
			style="maxWidth:500px"
			@input="searchHandle"
			clearable>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="customList_bot">
			<div class="bot_cont">
				<el-table
				ref="userTable"
				:data="tableData"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
				highlight-current-rows
				border>
					<el-table-column
					prop="CompanyName"
					label="客户名称"
					align="center">
						<template slot-scope="scope"> 
							<span style="color:#409EFF;cursor:pointer;" @click="goDetail(scope.row)" class="customName">{{scope.row.CompanyName}}</span>
						</template>
					</el-table-column>
					<el-table-column
					prop="ProductName"
					label="客户类型"
					align="center"
					width="120px;">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.ProductName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IndustryName"
					label="所属行业"
					align="center">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.IndustryName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="SellerName"
					label="所属销售"
					align="center">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.SellerName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="Status"
					label="客户状态"
					align="center">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.Status}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="EndDate"
					label="服务期限"
					align="center"
					min-width="120px">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.StartDate}}-{{scope.row.EndDate}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="ExpireDay"
					label="到期天数"
					align="center"
					sortable>
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.ExpireDay||'--'}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="CreatedTime"
					label="创建时间"
					sortable
					align="center">
						<template slot-scope="scope"> <span :style="scope.row.IsButtonShow==8?'color:#bbb':''">{{scope.row.CreatedTime}}</span> </template>
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="120">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;" >
								<span class="editsty" style="marginRight:10px;" @click="receiveHandle(scope.row)">领取</span>
							</div>
						</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">
					<el-pagination 
					layout="total,prev,pager,next,jumper" 
					background 
					:current-page="page_no"
					@current-change="handleCurrentChange"
					:page-size="pageSize" 
					@size-change="handleSizeChange" 
					:total="total"
					style="float:right;">
					</el-pagination>
				</el-col>
			</div>
		</div>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
	name:'',
	computed:{
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		}
	},
	data () {
		return {
			defaultprops:{
				multiple: true,
				label:'name',
				children:'children',
				value:'id'
			 },//块级选择器配置
			trade:'',
			tradeArr:[
				{
					name:'宏观经济',
					id:1
				},{
					name:'PTA',
					id:2
				}
			],//行业
			variety:'',//品种
			varietyArr:[
				{
					name:'品种1',
					id:1,
					children:[
						{name:'类1',id:11,},
						{name:'类2',id:12,},
						{name:'类3',id:13,},
					]
				},
				{
					name:'品种2',
					id:2,
					children:[
						{name:'类4',id:21,},
						{name:'类5',id:22,},
						{name:'类6',id:13,},
					]
				}
			],
			date:'',
			start_date:'',//开始日期
			end_date:'',//结束日期
			tableData:[],
			isShowloadding:false,
			search_txt:'',
			total:1,
			page_no:sessionStorage.getItem('pickListBack')?JSON.parse(sessionStorage.getItem('pickListBack')).page_no:1,
			pageSize:10,
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no:this.page_no,
			keyword:this.search_txt,
			start_date:this.start_date,
			end_date:this.end_date,
			date:this.date
		}
		sessionStorage.setItem('pickListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/pickCustom'&&from.path!='/customDetail') {
			sessionStorage.removeItem('pickListBack')
		}
		next()
	},
	methods: {
		/* 获取表格 */
		getTableData() {
			let params = {
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				StartDate:this.start_date,
				EndDate:this.end_date,
				KeyWord:this.search_txt
			}
			customInterence.pickList(params).then(res => {
				if(res.Ret === 200) {
					res.Data.List&&res.Data.List.forEach(item => {
						item.StartDate = item.StartDate.replace(/-/g,'.');
						item.EndDate = item.EndDate.replace(/-/g,'.');
					})
					this.tableData = res.Data.List || [];
					this.total = res.Data.Paging.Totals
				}
			})
		},
		/* 前往详情页 */
		goDetail(item) {
			this.$router.push({
				path:'/customDetail',
				query:{
					id:item.CompanyId
				}
			})
		},
		/* 搜索客户 重置筛选条件 */
		searchHandle() {
			this.page_no = 1;
			this.getTableData()
		},
		/* 选择日期 */
		dateChange(e) {
			if(e[0]) {
				this.start_date = e[0];
				this.end_date = e[1];
			}else {
				this.start_date = '';
				this.end_date = '';
			}
			this.page_no = 1;
			this.getTableData()
		},
		/* 领取客户 */
		receiveHandle(item) {
			this.$router.push({
				path:'/pickCustom',
				query:{
					id:item.CompanyId
				}
			})
		},
		lookHandle(item) {
			this.isLook = true
		},
		/* 删除 */
		delHandle(item) {
			this.$confirm('删除后客户将不能查阅报告，确定删除吗?','提示',{
				type:'warning'
			}).then(() => {
			}).catch(() => {});
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},	
	},
	created() {},
	mounted() {
		if(sessionStorage.getItem('pickListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('pickListBack'));
			this.search_txt = backData.keyword;
			this.page_no = backData.page_no,
			this.date = backData.date,
			this.start_date = backData.start_date,
			this.end_date = backData.end_date
		}
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
.pickCustom_container {
	.customList_bot_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28px;
		padding: 20px 30px;
		background: #fff;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.customList_bot {
		// min-height: calc(100vh - 286px);
		padding: 30px 30px 80px;
		background: #fff;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.try_style {
			color: #BBBBBB;
		}
	}
}
</style>