<template>
	<div>
		<div class="query-box" style="border-bottom: none;">
			<ul>
				<li>
					<input type="button"  class="fr normalBtn mb30" value="保存" @click="saveList(1)"/>
					<input type="button"  class="fr normalBtn mb30" value="保存草稿"  @click="saveList(0)"/>
				</li>
			</ul>
		</div>
		<div style="width: 100%;  overflow-y: auto;padding-bottom: 10px; height: 100%; " class="ownScrollbarStyle">
			<table border="0" cellspacing="1" cellpadding="0" class="admissionStatisticsDetailsTalbe">
				<tr>
					<th width="120">公司团号</th>
					<th width="120">游览时间</th>
					<th width="200">景点名称</th>
					<th width="100">总人数</th>
					<th width="100">游客类型</th>
					<th width="80">游客人数</th>
					<th width="80">使用人数</th>
					<th width="80">免人数</th>
					<th width="100">单价</th>
					<th width="80">金额小计</th>
					<th width="80">返佣</th>
					<th width="80">总金额</th>
					<th width="80">付款方式</th>
					<th width="150">联络电话</th>
					<th width="300">地址</th>
					<th width="200">备注</th>
				</tr>
				<tr v-for="(item,index) in list">
					<td :rowspan="list.length" v-if="index==0"><div class="w120">{{TCNUM}}</div></td>
					<td>
						<div class="w120">
							{{item.UseTimeStr}}
						</div>
					</td>
					<td>
						<div class="w200 ScenicComDivflex" v-for="subItem in item.ScenicStatisticsList">
							{{subItem.ScenicName}}
						</div>
					</td>
					<td>
						<div class="w100 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							{{subItem.UseAccount}}
						</div>
					</td>
					<td>
						<div class="w100 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								{{personStrToWord(o.PeopleType)}}
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								{{o.PeopleNum}}
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								<el-input class='w50 tcenter' v-model='o.UsePeopleNum' type="number" @input='calculationPrice(subItem)'  @keyup.native="checkInteger(o,'UsePeopleNum')"></el-input>
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								<el-input class='w50 tcenter' maxlength='2' v-model='o.Discount' type="number" @input='calculationPrice(subItem)'  @keyup.native="checkInteger(o,'Discount')"></el-input>
							</p>
						</div>
					</td>
					<td>
						<div class="w100 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								<span class="spanlink" v-if='o.PeoplePrice==0' @click="goUrl('ticketManagement',subItem,'门票管理')">设置</span>
								<span v-if='o.PeoplePrice!=0'>{{o.PeoplePrice}}</span>

								<!--<el-input class='w80 tcenter' v-model='o.PeoplePrice' @input='calculationPrice(subItem)'  @keyup.native="checkInteger(o,'PeoplePrice')"></el-input>-->
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								{{(o.UsePeopleNum-o.Discount)*o.PeoplePrice}}
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<p v-for="o in subItem.TicketPriceList">
								<span class="spanlink" v-if='o.DiscountPrice==0' @click="goUrl('scenicSpotInfoManage',subItem,'景区列表')">设置</span>
								<span v-if='o.DiscountPrice!=0'>{{o.DiscountPrice}}%</span>
								<!--<el-input class='w50 tcenter' v-model='o.DiscountPrice' @input='calculationPrice(subItem)' @keyup.native="checkInteger(o,'DiscountPrice')"></el-input>-->
							</p>
						</div>
					</td>
					<td>
						<div class="w80 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							  <!-- {{(subItem.UsePeopleNum-subItem.Discount)*subItem.PeoplePrice}} -->
							{{subItem.TotalPrice}}
						</div>
					</td>
					<td>
						<div class="w160 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							<el-select class='w100 sel' v-model='subItem.PayStyle' :placeholder="$t('pub.pleaseSel')">
			              		 <el-option label='请选择' value='0' ></el-option>
			                 	 <el-option label='现付' value='1' ></el-option>
			                 	 <el-option label='签单' value='2' ></el-option>
			                  	 <el-option label='实物抵扣' value='5' ></el-option>
			                 	 <el-option label='预付' value='4' ></el-option>
			            	  </el-select>
						</div>
					</td>
					<td>
						<div class="w150 ScenicComDiv" v-for="subItem in item.ScenicStatisticsList">
							{{subItem.Tel}}
						</div>
					</td>
					<td>
						<div class="w300 ScenicComDivflex" v-for="subItem in item.ScenicStatisticsList">
							{{subItem.Address}}
						</div>
					</td>
					<td>
						<div class="w200 ScenicComDivflex"   v-for="subItem in item.ScenicStatisticsList">
							<el-input type='textarea' class='w170' v-model='subItem.Remarks'></el-input>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
export default {
    data () {
        return {
        	defaultSelectValue:0,
        	list:[],
        	roomList:[],
        	TCNUM:'',
        	flightTotal:0,
        	GuestNum:0
        }
 	},
    methods: {
    	personStrToWord(str){
	    	if(str==1)
	    	return '大'
	    	if(str==2)
	    	return '中'
	    	if(str==3)
	    	return '小'
   		 },
   		goUrl(path, obj, name) {
	      this.$router.push({
	        path: path,
	        query: {
	          id: obj.ID,
	          blank: "y",
	          tab: name
	        }
	      });
	     },
	    calculationPrice(obj){
				let totalPrice=0
				console.log(obj.TicketPriceList)
	    		obj.TicketPriceList.forEach(item=>{
	    			totalPrice+=item.PeoplePrice*(item.UsePeopleNum-item.Discount)*(1-item.DiscountPrice/100)
				})
				console.log(totalPrice);
				obj.TotalPrice=totalPrice.toFixed(2)
	    },
    	getList(){
    		this.apipost('dmcstatistics_get_GetScenicStaticsDetail',{TCIDs:this.$route.query.id},res=>{
    			if(res.data.resultCode==1){
    			this.list=res.data.data
				this.list.forEach(item=>{
					item.ScenicStatisticsList.forEach(x=>{
						 x.PayStyle=x.PayStyle.toString()
						 this.calculationPrice(x)
					})
				})
    			}else{
    				this.$message.error(res.data.message)
				}


			// 	          this.list.forEach(item=>{
            // 	item.DiningSummaryList.forEach(x=>{
            // 		x.PayStyle=x.PayStyle.toString()
            // 		x.DiningReserveType=x.DiningReserveType.toString()
            // 		this.calculationPrice(x)
            // 	})
            // })
    		},err=>{})
    	},
  		 saveList(type){
    		if(type==0){
    			this.list.forEach(item=>{
    				item.ScenicStatisticsList.forEach(insideItem=>{
    					insideItem.OrderState=0
    				})
    			})
    		}
    		if(type==1){
    			this.list.forEach(item=>{
    				item.ScenicStatisticsList.forEach(insideItem=>{
    					insideItem.OrderState=1
    				})
    			})
    		}
    		this.apipost('dmcstatistics_get_SetTicketOrder',this.list,res=>{
    			if(res.data.resultCode==1){
    				this.$message.success(res.data.message)
    			}else{
    				this.$message.error(res.data.message)
    			}
    		},err=>{})
    	},
    },
    mounted() {
        this.TCNUM=this.$route.query.TCNUM
        this.flightTotal=this.$route.query.flightTotal
        this.GuestNum=this.$route.query.GuestNum
        this.getList()
    },
}
</script>

<style>
.admissionStatisticsDetailsTalbe{ background: #ccc;}
.admissionStatisticsDetailsTalbe tr th{background: #E6E6E6;height:40px; font-size: 12px; color: #333;}
.admissionStatisticsDetailsTalbe tr{background: #fff;text-align: center; height: 40px;}
.admissionStatisticsDetailsTalbe tr td{font-size: 12px;}
.admissionStatisticsDetailsTalbe tr td .pHouseStyle{border-bottom: 1px solid #ccc; height: 20px; line-height: 20px;}
.admissionStatisticsDetailsTalbe tr td .pHouseStyle:last-child{border-bottom: none;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDivflex{width:100%; height: 84px; display: flex; align-items: center;  padding-left: 15px; border-bottom:1px solid #ccc;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDivflex:last-child{border-bottom: none;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDiv{width:100%; height: 84px; line-height: 84px; border-bottom:1px solid #ccc;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDiv:last-child{border-bottom: none;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDiv>p{border-bottom: 1px solid #ccc; height: 28px; line-height: 28px;}
.admissionStatisticsDetailsTalbe tr td .ScenicComDiv>p:last-child{border-bottom: none;}
.admissionStatisticsDetailsTalbe tr td input{height:20px!important; padding: 0!important; text-align: center;}
.admissionStatisticsDetailsTalbe tr td .sel input{
  height:34px!important;
}
.admissionStatisticsDetailsTalbe tr td .spanlink:hover{text-decoration: underline; cursor: pointer;}
</style>
