<template>
<div class="flexOne">	
	<div class="workTotalSearch">
		<ul>
			<li><span><em>日期</em><el-date-picker :picker-options="pickerOptions" v-model='msg.startDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
									-
	                            <el-date-picker :picker-options="pickerOptions" v-model='msg.endDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
	            </span>
			</li>			
			<li>
				<input type="button" class="hollowFixedBtn" value="查询" @click="getList();resetPageIndex()" />
			</li>			
		</ul>	
	</div>
	<div style="clear: both; width: 100%;height: 20px;"></div>
		<table class="workTotalSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
			<tr>
				<th width="15%">客户</th>
				<th width="15%">创建时间</th>
				<th width="15%">人数</th>
				<th width="15%">出发日期</th>
				<th width="10%">价格</th>
				<th width="15%">线路&系列</th>
				<th width="15%">备注</th>
			</tr>
			<tr>
				<td v-show="list.length==0" colspan="11" align="center">暂无数据</td>
			</tr>				
			<tr v-for="item in list">
				<td>
					<img v-if='!item.photo' src="../../assets/img/litheader.png"/>
				    <img v-if='item.photo' :onerror="defaultImg" :src='item.photo'/>
					{{item.customerName}}
				</td>
				<td>{{item.createTime}}</td>
				<td>{{item.peopleNumber}}</td>
				<td>{{item.departTime}}</td>
				<td style="color: #FF9C00;">￥{{moneyFormat(item.budgetPrice)}}</td>
				<td>
					<p>{{item.lineteamName}}</p>
					<p style="max-width:200px; " class="over_ellipsis">{{item.lineName}}</p>
				</td>
				<td>{{item.remark}}</td>
			</tr>
		</table>
		<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total></el-pagination>		
</div>	
</template>

<script>
	export default {
		data() {
			return {
				pickerOptions: {
					disabledDate: (time) => { //disabledDate true 为禁止选择
						return time.getTime()>Date.now()
					}
				},
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
				currentPage:1,
				total:0,				
				loading:false,
				msg:{
					empId:'-1',
					startDate:'',
					endDate:'',
					pageIndex:1,
					pageSize:10,
				},
				list: [],
			}
		},
		methods: {
			getList() {
				this.loading = true
				this.apipost('Customer_post_GeInquireByTempIdList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading = false
						this.total = res.data.data.count
						this.list = res.data.data.pageData
					} else {
						this.loading = false
						this.$message.error(res.data.message)
					}
				}, err => {})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()				
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},				
		},
		mounted(){
			this.msg.empId=this.$route.query.id
			this.msg.startDate=this.$route.query.starTime
			this.msg.endDate=this.$route.query.endTime
			this.getList()
		},
	}
</script>

<style>
  .workTotalSearch{width: 100%; min-height: auto; padding:0 0 20px 0;}
  .workTotalSearch li{float: left; font-size: 12px; color: #666; margin:20px 10px 0px 0;}
  .workTotalSearch li>span {display: inline-block; }
  .workTotalSearch li span>em{display: inline-block; min-width: 60px; text-align: right; font-style: normal; margin:0 12px 0 0;}
  .workTotalSearch li:last-child{float: right; position: absolute; top: -15px; right: 20px; z-index: 50;}
  .workTotalSearchTable{width: 100%;  font-size:14px; color: #333; background: #ccc;}
  .workTotalSearchTable tr{border-bottom: 2px solid #333;}
  .workTotalSearchTable tr th{background: #BDBDBD;height:30px; font-size: 12px; text-align: left; text-indent: 30px;}
  .workTotalSearchTable tr{background: #fff;text-align: left;}
  .workTotalSearchTable tr:nth-child(2n+1){background: #E5E5E5;}
  .workTotalSearchTable tr td{height: 60px; padding-left:30px; border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC;}
  .workTotalSearchTable tr td p{line-height: 20px;}
  .workTotalSearchTable tr td>img{width: 32px; height: 32px;border-radius: 16px; vertical-align: middle; margin-right: 15px;}
</style>