<template>
<div>
		<div class="query-box" style="border-bottom: none;">
		<ul>
				<li><span><em>系列</em>
						<el-select  v-model="msg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
			            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
			            <el-option
			                v-for="item in LineTeamList"
			                :label='item.LtName'
			                :value='item.LtID'
			                :key='item.LtID'>
			            </el-option>
			        </el-select>
				</span>
				</li>
				<li>
					<span>
						<em>团号</em><el-input v-model='msg.TCNUM'  ></el-input>
					</span>
				</li>	
				<li><span><em>{{$t('pub.date')}}</em><el-date-picker v-model='msg.StartDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
										-
		                            <el-date-picker v-model='msg.EndDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
		            </span>
				</li>		
				<li>
					<input type="button" class="normalBtn" :value="$t('pub.searchBtn')"  @click="getList();resetPageIndex()"/>
				</li>
		</ul>				
	</div>
	<div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
		<table border="0" cellspacing="1" cellpadding="0" class="leaderTotalTable"  v-loading='loading'>
			<tr>
				<th colspan="9">公司通用信息</th>
				<th colspan="11">领队报账信息</th>
				<th colspan="7">地接op报账信息</th>
			</tr>
			<tr>
				<th width="50">序号</th>
				<th width="80">出发地</th>
				<th width="80">航班时间</th>
				<th width="80">公司团号</th>
				<th width="80">收客数</th>
				<th width="80">领队</th>
				<th width="80">导游</th>
				<th width="80">领队累计团数</th>
				<th width="80">导游累计团数</th>
				
				<th width="120">进店团号</th>
				<th width="120">店名</th>
				<th width="120">进店时间</th>
				<th width="120">进店人数</th>
				<th width="120">总金额</th>
				<th width="120">司机佣金</th>
				<th width="120">领队佣金</th>
				<th width="120">导游佣金</th>
				<th width="120">公司佣金</th>
				<th width="120">{{$t('objFill.pinzhengsc')}}</th>
				<th width="120">详情</th>
				
				<th width="120">领队佣金调整</th>
				<th width="120">导游佣金调整</th>
				<th width="120">公司佣金调整</th>
				<th width="120">额外奖励</th>
				<th width="120">其他扣除</th>
				<th width="120">公司佣金总计</th>
				<th width="120">详情</th>
				
			</tr>
			<tbody v-for="(item,index) in list">
			<tr>
				<td rowspan="2"><div class="w50">{{index+1}}</div></td>
				<td><div class="w80">
					{{item.StartCityNames}}
				</div></td>
				<td><div class="w120">
					{{item.FlightDate}}
					<el-popover popper-class="dmcTotalTable_tripDetails" width="550" trigger="click">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="_color_666" style="text-align:center;">
								<th width="60">{{$t('Airticket.Air_segment')}}</th>
								<th width="80">{{$t('system.query_flightNum')}}</th>
								<th width="150">起飞时间</th>
								<th width="80">到达时间</th>
								<th width="100">经停城市</th>
							</tr>
							<tr v-for="(ds,din) in item.FlightList" :key="din" style="text-align:center;">
								<td class="_d_name _color_666">
									<span v-if="din==0">{{$t('Airticket.Air_go')}}</span>
									<span v-else-if="din==item.FlightList.length-1">{{$t('Airticket.Air_returnTrip')}}</span>
									<span v-else-if="din>0 && din!=item.FlightList.length-1">{{$t('Airticket.Air_transit')}}</span>
								</td>
								<td>
									<div>{{ds.Flight_number}}</div>
									<div style="margin-top:5px;">{{ds.AlName}}</div>
								</td>
								<td>
									<div>{{ds.FlightDate}} {{ds.Departure_time}}</div>
									<div style="margin-top:5px;">{{ds.dName}}</div>
								</td>
								<td>
									<div>{{ds.FlightArrivalTime}} {{ds.Arrival_time}}</div>
									<div style="margin-top:5px;">{{ds.aName}}</div>
								</td>
								<td>{{ds.StopoverName}}</td>
							</tr>
						</table>
						<el-button slot="reference" class="normalBtn mt5" style='height:24px; padding: 0 10px; background: #2AAEF2; border-color: #2AAEF2;'>详情</el-button>
					</el-popover>					
				</div></td>
				<td><div class="w120 link">
					  <p v-for='xx in stringToArr(item.TCNUMS)' @click="goUrlT('productQuery',xx,'产品查询')">{{xx}}</p>
				</div></td>
				<td>
					<div class="w80">收客数</div>
				</td>
				<td>
					<div class="w80">{{item.LeaderName}}</div>
				</td>
				<td>
					<div class="w80">{{item.GuideName}}</div>
				</td>
				<td>
					<div class="w80">领团数</div>
				</td>
				<td>
					<div class="w80">导团数</div>
				</td>
				<td>
					<div class="w80">
						
					</div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80 link">
						<p @click="goUrl('leaderTotalDetails',item,'领队报账详情')">查看</p>
					</div>
				</td>
				
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80"></div>
				</td>
				<td>
					<div class="w80 link">
						<p @click="goUrl('guideTotalDetails',item,'导游报账详情')">查看</p>
						<p @click="goUrlLeaderPlan('groundOperation',item,'导游计划表')">查看领队</p>
					</div>
				</td>
				
			</tr>
			<tr>
				<td colspan="26" style="text-align: left!important;padding-left: 20px;">
					<div class="link">
						<p v-for='xx in stringToArr(item.TCNUMS)' @click="goUrlT('productQuery',xx)">{{item.Titles}}</p>
					</div>
				</td>
			</tr>
			</tbody>
		</table>
		</div>
		<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 {
        	loading:false,
        	currentPage:1,
        	total:0,
        	msg:{
        		pageIndex:1,
        		pageSize:10,
        		SelectType:6,
		        LineId: 14,
		        LineteamId: "-1",           		
        	},
		    LineList: [],
		    LineTeamList: [],        	
        	thLengthTitle:[],
        	list:[],
        	colspanTotal:0,
        }
 	},
    methods: {
    stringToArr(str){
    	return str.split(',')
    },
    getLineList() {
      this.apipost("line_post_GetAllList", {}, res => {
        if (res.data.resultCode == 1) {
          this.LineList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },    	
   //获取系列列表
    getLineTeamList(lineId) {
      this.LineTeamList = [];
      this.apipost(
        "team_post_GetList",
        {
          lineID: 14,
          isTOOP: 1
        },
        res => {
          if (res.data.resultCode == 1) {
            this.msg.LineteamId = "-1";
            this.LineTeamList = res.data.data;
          }
        }
      );
    },    
  		goUrlR(path,obj,title){
	 	   this.$router.push({ name:path,query:{"ID":obj,blank:'y',tab:title}}) 
		},	
    	 goUrlT(path,obj,title){
	 	   this.$router.push({ name:path,query:{"id":obj,blank:'y',tab:title}}) 
		},	
		 goUrl(path,obj,title){
	 	   this.$router.push({ name:path,query:{"id":obj.TCIDS,'TCNUM':obj.TCNUMS,'flightTotal':obj.TotalSeat,'GuestNum':obj.CommonReport.HouseStatistics.RealityNum,'NewCombinationNum':obj.NewCombinationNum,blank:'y',tab:title}}) 
		},	
		goUrlLeaderPlan(path,obj,title){
			this.$router.push({ name:path,query:{"TCIDs":obj.TCIDS,blank:'y',tab:title}}) 
		},
		handleCurrentChange(val) {
			this.msg.pageIndex = val;
			this.getList();
		},   
	    resetPageIndex() {
	      this.msg.pageIndex = 1;
	      this.currentPage = 1;
	    },		
    	getList(){
    		this.loading=true
    		this.apipost('dmcstatistics_get_GetHotelStaticsService',this.msg,res=>{
    			if(res.data.resultCode==1){
    				this.loading=false
    				this.total=res.data.data.count
    				this.list=res.data.data.pageData.data
    			}else{
    				this.loading=false
    				this.$message.error(res.data.message)
    			}
    		},err=>{})
    	},
    },
    mounted() {
       this.getList()
    },    
}
</script>

<style>
.leaderTotalTable{ background: #ccc;}
.leaderTotalTable tr th{background: #E6E6E6;height:40px; font-size: 12px; color: #333;}
.leaderTotalTable tr{background: #fff;text-align: center; height: 40px;}
.leaderTotalTable tr td{font-size: 12px;}
.leaderTotalTable tr td .pHouseStyle{border-bottom: 1px solid #ccc; height: 20px; line-height: 20px;}
.leaderTotalTable tr td .pHouseStyle:last-child{border-bottom: none;}
.leaderTotalTable tr td .pDateStyle{border-bottom: 1px solid #ccc; height: 20px; line-height: 20px; margin-top: 0;}
.leaderTotalTable tr td .pMsgStyle{padding: 0 10px; line-height: 20px;}
.leaderTotalTable tr td .link p:hover{text-decoration: underline; cursor: pointer;}
.leaderTotalTable tr td .phoverStype:hover{text-decoration: underline; cursor: pointer;}
.dmcTotalTable_tripDetails {padding: 0; box-shadow: 0px 1px 3px 0px #dedede; max-height: 400px;overflow-y: auto;}
.dmcTotalTable_tripDetails .popper__arrow::after {border-bottom-color: #ededed !important;}
.dmcTotalTable_tripDetails>table { padding: 10px 0 0 20px; background-color: #ededed; border-collapse: collapse; border: 1px solid #d2d2d2; font-size: 12px;}
.dmcTotalTable_tripDetails>table th { background-color: #ededed; padding: 5px;}
.dmcTotalTable_tripDetails>table td { background-color: #ffffff; padding: 9px 15px;color: #333333;border: 1px solid #d2d2d2;}
.dmcTotalTable_tripDetails>table td._d_name {background-color: #ededed;}
.dmcTotalTable_tripDetails>table ._color_666 {color: #666666;}
.dmcTotalTable_tripDetails table tr._color_666 th { padding: 9px 15px;}
</style>